/* Truaxis 2026 homepage — scoped, calm, industrial */

:root {
  /* Marka kılavuzu: Truaxis Lacivert #1E285A · Turkuaz #32C8F0 · Siyah #1D1D1B · Gri #A2AAAD
     (koyu tonlar kılavuz gereği yardımcı zemin olarak kullanılabilir) */
  --tx-navy: #1e285a;
  --tx-deep: #12193c; /* lacivertin koyu tonu */
  --tx-ink: #1e285a;
  --tx-cyan: #32c8f0;
  --tx-sand: #eef1f4; /* grinin açık tonu */
  --tx-paper: #fafbfc;
  --tx-sun: #c9a227; /* yalnızca güneş görselleri (doğal öğe) */
  --tx-text: #1d1d1b;
  --tx-muted: #5e666d;
  --tx-line: rgba(30, 40, 90, 0.12);
  --tx-radius: 1.25rem;
  --tx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Marka tipografisi; fontlar yüklü değilse mevcut aileler devreye girer */
  --tx-font-head: "Malayalam MN", "Instrument Sans", Manrope, sans-serif;
  --tx-font-body: "Centrale Sans", Manrope, system-ui, sans-serif;
}

body.tx-front {
  background: var(--tx-paper);
  color: var(--tx-text);
}

body.tx-front #page,
body.tx-front #page.grid-container,
body.tx-front .site.grid-container,
body.tx-front .container.grid-container,
body.tx-front .site-content,
body.tx-front .content-area,
body.tx-front #primary,
body.tx-front #content,
body.tx-front .site-main,
body.tx-front .inside-article,
body.tx-front .separate-containers .inside-article,
body.tx-front .separate-containers .site-main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.tx-case-page > .gbp-section,
body.tx-portfolio-page > .gbp-section,
body.tx-agri-page > .gbp-section,
body.tx-404-page > .gbp-section,
body.tx-blog-page > .gbp-section,
body.tx-case-page .header-wrap + .gbp-section,
body.tx-portfolio-page .header-wrap + .gbp-section,
body.tx-agri-page .header-wrap + .gbp-section,
body.tx-404-page .header-wrap + .gbp-section,
body.tx-blog-page .gbp-section,
body.tx-404-page .gbp-section.gb-element-a22288de,
body.tx-404-page .gbp-section__inner.gb-element-846c923d {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.tx-front .page-header,
body.tx-front .inside-page-hero,
body.tx-front .page-hero,
body.tx-front .gp-page-header,
body.tx-front .generate-page-header,
body.tx-front .featured-image,
body.tx-front .page-header-image,
body.tx-front .page-header-image-single {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

.tx-error-hero__art {
  width: min(450px, 72vw);
  height: auto;
  display: block;
}

.tx-error-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 1.25rem 3rem;
  background: var(--tx-paper);
}

.tx-error-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}

/* Navbar: her zaman sabit — kaydırınca zıplamaz, GP sticky’yi ezer */
body.tx-front .header-wrap {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent !important;
  padding: 0.7rem 1.35rem 0;
  pointer-events: none;
}

body.tx-front #sticky-placeholder,
body.tx-front #sticky-navigation {
  display: none !important;
  height: 0 !important;
}

body.tx-front .header-wrap > .site-header {
  display: none !important;
}

body.tx-front #site-navigation,
body.tx-front #site-navigation.navigation-stick,
body.tx-front #mobile-header,
body.tx-front #mobile-header.navigation-stick {
  pointer-events: auto;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: min(1064px, 100%) !important;
  margin-inline: auto !important;
  border-radius: 999px !important;
  /* Logo mavisiyle akraba, yumuşak lacivert→mavi gradyan */
  background: linear-gradient(
    115deg,
    rgba(7, 14, 34, 0.92) 0%,
    rgba(13, 42, 96, 0.88) 52%,
    rgba(23, 82, 160, 0.82) 100%
  ) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(8, 12, 26, 0.3);
  transform: none !important;
}

body.tx-front.is-scrolled #site-navigation,
body.tx-front.is-scrolled #mobile-header {
  background: linear-gradient(
    115deg,
    rgba(6, 12, 30, 0.96) 0%,
    rgba(12, 38, 88, 0.92) 52%,
    rgba(20, 72, 142, 0.88) 100%
  ) !important;
}

body.tx-front .inside-navigation.grid-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.35rem 1rem 0.35rem 1.05rem !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 0 !important;
  flex-wrap: nowrap !important;
}

body.tx-front .navigation-branding,
body.tx-front .site-logo,
body.tx-front .mobile-header-logo,
body.tx-front .navigation-branding a,
body.tx-front .site-logo a {
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
  line-height: 0 !important;
}

body.tx-front .navigation-branding img,
body.tx-front .site-logo img,
body.tx-front .mobile-header-logo img,
body.tx-front img.is-logo-image,
body.tx-front img.header-image.is-logo-image {
  display: block !important;
  height: 52px !important;
  width: auto !important;
  max-width: 280px !important;
  max-height: 52px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.tx-front .main-navigation .menu-toggle,
body.tx-front .main-navigation .menu-toggle .mobile-menu,
body.tx-front .main-navigation .menu-toggle .gp-icon {
  color: #fff !important;
  background: transparent !important;
}

body.tx-front .main-navigation .main-nav ul li a,
body.tx-front .main-navigation ul li a,
body.tx-front .main-navigation ul li.current-menu-item > a,
body.tx-front .main-navigation ul li.current_page_item > a {
  color: #fff !important;
  background: transparent !important;
  line-height: 3.25rem !important;
  padding-left: 0.55rem !important;
  padding-right: 0.55rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

body.tx-front .main-navigation ul li a:hover {
  color: #fff !important;
  opacity: 0.82;
}

/* Dar masaüstü: menü tek satırda kalsın diye sıkıştır */
@media (min-width: 993px) and (max-width: 1120px) {
  body.tx-front .main-navigation .main-nav ul li a,
  body.tx-front .main-navigation ul li a {
    padding-left: 0.38rem !important;
    padding-right: 0.38rem !important;
    font-size: 0.67rem !important;
  }

  body.tx-front .navigation-branding img,
  body.tx-front .site-logo img,
  body.tx-front img.is-logo-image {
    height: 44px !important;
  }
}

@media (min-width: 993px) {
  body.tx-front #site-navigation {
    display: block !important;
    opacity: 1 !important;
  }

  body.tx-front #site-navigation .main-nav,
  body.tx-front #site-navigation .main-nav > ul {
    display: flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.tx-front #site-navigation .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 992px) {
  body.tx-front .header-wrap {
    padding: 0.45rem 0.7rem 0;
  }

  /* Telefonda navbar tamamen şeffaf: pill/gradyan yok; logo solda, burger en sağda */
  body.tx-front #site-navigation,
  body.tx-front #site-navigation.navigation-stick,
  body.tx-front #mobile-header,
  body.tx-front #mobile-header.navigation-stick,
  body.tx-front.is-scrolled #site-navigation,
  body.tx-front.is-scrolled #mobile-header {
    width: 100% !important;
    border-radius: 0 !important;
    overflow: visible;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Tam genişlik navbar tıklamayı yutmasın: yalnızca logo + burger + açık menü */
  body.tx-front #site-navigation,
  body.tx-front #mobile-header {
    pointer-events: none !important;
  }

  body.tx-front #site-navigation .navigation-branding,
  body.tx-front #site-navigation .site-logo,
  body.tx-front #site-navigation .mobile-header-logo,
  body.tx-front #mobile-header .navigation-branding,
  body.tx-front #mobile-header .site-logo,
  body.tx-front #mobile-header .mobile-header-logo,
  body.tx-front .menu-toggle,
  body.tx-front nav.toggled .main-nav {
    pointer-events: auto !important;
  }

  body.tx-front .inside-navigation.grid-container {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 0.15rem 0 0.35rem !important;
    gap: 0;
    min-height: 56px !important;
  }

  body.tx-front nav:not(.toggled) .inside-navigation.grid-container {
    height: 56px !important;
    max-height: 56px !important;
  }

  body.tx-front .navigation-branding,
  body.tx-front .site-logo,
  body.tx-front .mobile-header-logo {
    height: 56px !important;
    max-height: 56px !important;
  }

  /* Logo şeffaf zeminde net görünsün: daha büyük + yumuşak gölge */
  body.tx-front .navigation-branding img,
  body.tx-front .site-logo img,
  body.tx-front .mobile-header-logo img,
  body.tx-front img.is-logo-image,
  body.tx-front img.header-image.is-logo-image {
    height: 48px !important;
    max-height: 48px !important;
    max-width: 240px !important;
    filter: drop-shadow(0 1px 6px rgba(8, 12, 26, 0.55));
  }

  body.tx-front .main-navigation .menu-toggle,
  body.tx-front button.menu-toggle,
  body.tx-front .mobile-menu-control-wrapper .menu-toggle {
    flex: 0 0 44px !important;
    flex-grow: 0 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 56px !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    line-height: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible;
    z-index: 110;
    position: relative !important;
  }

  body.tx-front .menu-toggle .mobile-menu {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  /* Burger ikonu şeffaf zeminde net görünsün */
  body.tx-front .main-navigation .menu-toggle .gp-icon,
  body.tx-front .main-navigation .menu-toggle svg {
    color: #fff !important;
    filter: drop-shadow(0 1px 5px rgba(8, 12, 26, 0.6));
  }

  body.tx-front .menu-toggle::before {
    display: none !important;
  }

  body.tx-front .menu-toggle .gp-icon.icon-menu-bars {
    position: relative !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.tx-front .menu-toggle .icon-menu-bars svg {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 20px !important;
    height: 20px !important;
    fill: #fff !important;
  }

  /* Kapalı: sadece hamburger. Açık: sadece X. */
  body.tx-front .menu-toggle .icon-menu-bars svg:nth-child(1) {
    display: block !important;
    opacity: 1 !important;
  }

  body.tx-front .menu-toggle .icon-menu-bars svg:nth-child(2) {
    display: none !important;
    opacity: 0 !important;
  }

  body.tx-front nav.toggled .menu-toggle .icon-menu-bars svg:nth-child(1) {
    display: none !important;
    opacity: 0 !important;
  }

  body.tx-front nav.toggled .menu-toggle .icon-menu-bars svg:nth-child(2) {
    display: block !important;
    opacity: 1 !important;
  }

  body.tx-front #mobile-header.toggled,
  body.tx-front #site-navigation.toggled {
    border-radius: 16px !important;
  }

  body.tx-front #mobile-header.toggled .main-nav,
  body.tx-front #site-navigation.toggled .main-nav {
    flex: 1 1 100%;
    width: 100%;
  }

  body.tx-front #mobile-header.toggled .main-nav > ul,
  body.tx-front #site-navigation.toggled .main-nav > ul {
    background: transparent !important;
    padding: 0.2rem 0.45rem 0.55rem !important;
  }

  body.tx-front .main-navigation.toggled .main-nav ul li a {
    line-height: 2.35rem !important;
    font-size: 0.78rem !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }
}

@media (max-width: 480px) {
  body.tx-front .header-wrap {
    padding: 0.38rem 0.55rem 0;
  }

  body.tx-front nav:not(.toggled) .inside-navigation.grid-container,
  body.tx-front .inside-navigation.grid-container {
    min-height: 52px !important;
  }

  body.tx-front nav:not(.toggled) .inside-navigation.grid-container {
    height: 52px !important;
    max-height: 52px !important;
  }

  body.tx-front .navigation-branding,
  body.tx-front .site-logo,
  body.tx-front .mobile-header-logo {
    height: 52px !important;
    max-height: 52px !important;
  }

  body.tx-front .navigation-branding img,
  body.tx-front .site-logo img,
  body.tx-front .mobile-header-logo img,
  body.tx-front img.is-logo-image,
  body.tx-front img.header-image.is-logo-image {
    height: 46px !important;
    max-height: 46px !important;
    max-width: 220px !important;
  }

  body.tx-front .main-navigation .menu-toggle,
  body.tx-front button.menu-toggle {
    height: 52px !important;
  }
}

.tx-home {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--tx-text);
  overflow-x: clip;
  /* GP .site-content flex olduğunda main içerik genişliğine büzülüp
     sola yaslanabiliyor; her zaman tam genişlik kapla */
  width: 100% !important;
  flex: 1 1 100%;
}

.tx-home *,
.tx-home *::before,
.tx-home *::after {
  box-sizing: border-box;
}

.tx-wrap {
  width: min(1180px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.tx-eyebrow,
.tx-kicker {
  margin: 0 0 0.85rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-sun);
}

/* Bölüm kicker'ları: hero'daki altın vurguyu taşıyan kısa çizgi */
.tx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.tx-kicker::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--tx-sun);
  flex-shrink: 0;
}

.tx-kicker--light {
  color: #e8d59a;
}

.tx-h2 {
  margin: 0 0 0.85rem;
  font-family: "Instrument Sans", Manrope, sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--tx-deep);
  text-wrap: balance;
}

.tx-h2--light {
  color: #f7f4ec;
}

.tx-lead {
  margin: 0.5rem 0 0;
  max-width: 40rem;
  color: var(--tx-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.tx-section {
  padding: clamp(4rem, 8vw, 6.75rem) 0;
}

.tx-section__head {
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}

.tx-section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Buttons */
.tx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: transform 0.35s var(--tx-ease), background 0.35s var(--tx-ease), color 0.35s var(--tx-ease), box-shadow 0.35s var(--tx-ease);
}

.tx-btn:hover {
  transform: translateY(-2px);
}

.tx-btn--sun {
  background: var(--tx-sun);
  color: var(--tx-deep) !important;
  box-shadow: none;
}

.tx-btn--ghost {
  background: #fff;
  color: var(--tx-navy) !important;
  border: 1px solid #fff;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(8, 12, 26, 0.18);
}

.tx-btn--ghost:hover {
  background: var(--tx-sand);
  border-color: var(--tx-sand);
}

.tx-btn--navy {
  background: var(--tx-navy);
  color: #f7f4ec !important;
  box-shadow: none;
}

/* Hero — tam ekran, el çizimi sahne */
.tx-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6.5rem 0 8rem;
  color: #f7f4ec;
  background: var(--tx-deep);
  overflow: hidden;
}

/* Sahne katmanları: gökyüzü → bulutlar → tepeler/tarla → ufuk pusu */
.tx-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Gerçek gökyüzü geçişi: zirvede uzay mavisi → canlı gök mavisi → ufukta ışık */
.tx-scene__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #0a2a5e 0%,
    #1450a0 20%,
    #2f7cc8 42%,
    #6fb0e4 62%,
    #b5dcf2 80%,
    #e8f2ef 92%,
    #f3eed6 100%
  );
}

.tx-scene__terrain {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 46%;
}

.tx-scene__haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(250, 247, 238, 0.34) 67%, transparent 80%);
}

/* ---------------------------------------------------------------
   Solar tracker animasyonu
   Katman sırası (DOM): media → veil → .tx-solar → inner (z1) → scroll (z2)
   Animasyon içerikle etkileşmez; metin ve butonlar her zaman önde.
   .tx-solar__tracker  → sahnedeki konum (statik)
   .tx-solar__lift     → alttan yükselme (CSS transition, GPU)
   .tx-solar__panel    → güneş takibi (home.js, rotate)
   --------------------------------------------------------------- */

.tx-solar {
  position: absolute;
  inset: 0;
  z-index: 0; /* stacking context: tracker z-index'leri hero dışına sızmasın */
  pointer-events: none;
  overflow: hidden;
}

.tx-solar__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tx-solar__sun {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(200px, 26vw, 380px);
  opacity: 0;
  will-change: transform, opacity;
}

.tx-solar__sun-inner {
  transform: translate(-50%, -50%);
}

.tx-solar__sun svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* ışık hüzmeleri viewBox dışına, panellere kadar uzanır */
}

/* Güneşten tarladaki panellere inen çok yumuşak ışık hüzmeleri */
.tx-solar__shafts {
  opacity: 0.45;
  filter: blur(12px);
}

.tx-solar__halo {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: tx-halo 8s ease-in-out infinite;
}

@keyframes tx-halo {
  50% { transform: scale(1.04); opacity: 0.92; }
}

/* Çok şeffaf, yavaşça dönen yumuşak ışın demeti: göz yormadan
   "güneş ışık saçıyor" hissi verir */
.tx-solar__beams {
  transform-box: view-box;
  transform-origin: 50% 50%;
  opacity: 0.4;
  filter: blur(9px);
  animation: tx-beams 70s linear infinite;
}

@keyframes tx-beams {
  to { transform: rotate(360deg); }
}

.tx-solar__tracker {
  position: absolute;
}

.tx-solar__tracker-svg {
  display: block;
  width: 100%;
  height: auto;
}

.tx-solar__shadow {
  fill: #1c2b22;
  fill-opacity: 0.3;
}

/* Paneller sahnede sabittir (yükselme animasyonu yok); yalnızca güneşi izler */
.tx-solar__panel {
  transform-box: view-box;
  transform-origin: 160px 84px;
  will-change: transform;
}

/* Saha yerleşimi home.js'teki çapraz dizi (string) tanımından üretilir:
   konumlar, boyutlar ve derinlik soluklaşması inline atanır.
   Burada yalnızca responsive gizleme için derinlik sınıfları kullanılır. */

.tx-solar.is-static .tx-solar__sun {
  opacity: 0.85;
}

/* ---------------------------------------------------------------
   Güneşle senkron metin reveal'ı (After Effects hissi):
   home.js güneş ilerledikçe .tx-hero'ya is-t1 / is-t2 / is-t3 ekler.
   Metin blur + geniş harf aralığından netleşerek belirir.
   --------------------------------------------------------------- */

/* Başlangıç gizliliği yalnızca JS varken (body.tx-js) uygulanır;
   script yüklenemezse metin görünür kalır.
   Yalnızca transform/opacity/filter animasyonlanır (layout'a dokunulmaz). */
.tx-js .tx-srev {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(10px);
  transition:
    opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* Aynı grupta buton satırı, metinden bir nefes sonra gelsin */
.tx-js .tx-hero__actions.tx-srev {
  transition-delay: 0.18s;
}

.tx-hero.is-t1 .tx-srev--1,
.tx-hero.is-t2 .tx-srev--2,
.tx-hero.is-t3 .tx-srev--3 {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------------------------------------------------------------
   Scroll göstergesi: sağda ince ray + güneş "thumb";
   sol altta ona bakan mini tracker'lar.
   --------------------------------------------------------------- */

/* Yerel scrollbar gizlenir; sayfanın tek göstergesi güneşli ray olur */
@media (min-width: 1025px) {
  html:has(body.tx-front) {
    scrollbar-width: none;
  }

  html:has(body.tx-front)::-webkit-scrollbar {
    display: none;
  }
}

.tx-rail {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  height: min(62vh, 520px);
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    rgba(27, 37, 89, 0),
    rgba(27, 37, 89, 0.3) 12%,
    rgba(27, 37, 89, 0.3) 88%,
    rgba(27, 37, 89, 0)
  );
  z-index: 39;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

/* Geniş tutma alanı: ince çizgiyi ve güneşin taşan kenarını kapsar */
.tx-rail::before {
  content: "";
  position: absolute;
  inset: -24px -28px;
}

.tx-rail.is-drag {
  cursor: grabbing;
}

.tx-rail__sun {
  position: absolute;
  top: 0;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  will-change: transform;
  filter: drop-shadow(0 2px 10px rgba(201, 150, 46, 0.45));
  transition: scale 0.25s var(--tx-ease);
  cursor: grab;
  pointer-events: auto;
}

.tx-rail__sun::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.tx-rail:hover .tx-rail__sun,
.tx-rail.is-drag .tx-rail__sun {
  scale: 1.08;
}

.tx-rail.is-drag .tx-rail__sun {
  cursor: grabbing;
  transition: none;
}

.tx-rail__sun svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tx-minifield {
  position: fixed;
  left: 1.1rem;
  bottom: 0.9rem;
  z-index: 39;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0 0.4rem 0.3rem;
  border-bottom: 1px solid rgba(27, 37, 89, 0.22);
  pointer-events: none;
  /* Sayfa tepesindeyken gizli; scroll başlayınca alttan belirir */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--tx-ease), transform 0.5s var(--tx-ease);
}

.tx-minifield.is-on {
  opacity: 1;
  transform: none;
}

.tx-minifield .tx-solar__tracker {
  position: static;
}

.tx-minifield .tx-solar__lift {
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

.tx-minifield .tx-solar__tracker { width: 150px; }

.tx-minifield .tx-solar__shadow { fill-opacity: 0.18; }

/* ---------------------------------------------------------------
   Enerji hattı: panellerden şehre.
   Sol kenarda bölümden bölüme inen kablo (üzerinde akan turkuaz
   enerji darbesi) + her bölümde beslenen bir vinyet (inverter, ev,
   şarj istasyonu, batarya, sokak lambası) ve en altta şehir.
   Yalnızca geniş ekranlarda görünür.
   --------------------------------------------------------------- */

.tx-flow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.85rem;
  width: 130px;
  pointer-events: none;
  display: none;
  color: var(--tx-navy); /* vinyet çizgi rengi (currentColor) */
  z-index: 1;
}

.tx-flow--dark {
  color: #c8d9ec;
}

@media (min-width: 1440px) {
  .tx-flow { display: block; }
}

/* Kablo: düz boru değil, doğal salınımla inen ince kablo (SVG path).
   Enerji darbesi, eğrinin kendisi boyunca akar (stroke-dashoffset). */
.tx-flow__wire {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 100%;
  overflow: visible;
}

/* Katmanlar: gölge → metalik gövde → parlaklık çizgisi → enerji darbesi */
.tx-flow__cableshadow {
  fill: none;
  stroke: rgba(4, 7, 12, 0.26);
  stroke-width: 7.5;
  stroke-linecap: round;
}

.tx-flow__cable {
  fill: none;
  stroke: url(#txw-body);
  stroke-width: 6.5;
  stroke-linecap: round;
}

.tx-flow__cablehi {
  fill: none;
  stroke: rgba(218, 224, 230, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.tx-flow__cablepulse {
  fill: none;
  stroke: rgba(80, 214, 248, 0.95);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 30 630;
  stroke-dashoffset: 660;
  animation: tx-cable-pulse 3.6s linear infinite;
}

@keyframes tx-cable-pulse {
  to { stroke-dashoffset: 0; }
}

/* Duvar montaj klipsleri: kablonun x=20'yi kestiği hizalarda */
.tx-flow__clip {
  position: absolute;
  left: 7px;
  width: 27px;
  height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.35));
}

.tx-flow__clip--a { top: 20%; }
.tx-flow__clip--b { top: 80%; }

/* Branşman: ana kablodan ekipmana kıvrılan ince kablo + konnektör soketi */
.tx-flow__branch {
  position: absolute;
  left: 15px;
  width: 37px;
  height: auto;
  top: 50%;
  transform: translateY(-30%);
  filter: drop-shadow(1px 1.5px 1.5px rgba(0, 0, 0, 0.3));
}

.tx-flow__branchwire {
  fill: none;
  stroke: url(#txw-body);
  stroke-width: 3.4;
  stroke-linecap: round;
}

/* Vinyet, içerik sütununa asla taşmaz: genişliği kenar boşluğuna göre
   ölçeklenir (1440'ta ~56px, geniş ekranda 92px'e kadar) */
.tx-flow__icon {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: min(92px, calc((100vw - 1180px) / 2 - 74px));
  height: auto;
}

/* Bölüm bazlı ince hizalar */
.tx-about .tx-flow__icon,
.tx-about .tx-flow__branch { top: 44%; }
.tx-services .tx-flow__icon,
.tx-services .tx-flow__branch { top: 47%; }
.tx-refs .tx-flow__icon,
.tx-refs .tx-flow__branch { top: 42%; }

/* LED / pencere yanıp sönmeleri ve ışık konisi nabzı */
.tx-blink { animation: tx-blink 2.6s ease-in-out infinite; }
.tx-blink--2 { animation-delay: 0.9s; }
.tx-blink--3 { animation-delay: 1.7s; }

@keyframes tx-blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.tx-glowpulse { animation: tx-glow 4.5s ease-in-out infinite; }

@keyframes tx-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Kablonun geçtiği açık bölümler konumlandırma bağlamı ister */
.tx-about,
.tx-services,
.tx-refs {
  position: relative;
}

/* Tema footer'ı her sayfada gizlenir: yerini tx-site-footer alır */
body .site-footer,
body .site-info,
body .footer-widgets {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.tx-hero__inner {
  position: relative;
  z-index: 1;
}

.tx-hero__inner--center {
  width: min(52rem, calc(100% - 2.5rem));
  margin-inline: auto;
  margin-top: -7vh; /* metin bloğu merkezin biraz üzerinde dursun */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Açık gökyüzünde altın eyebrow'a kontrast desteği */
.tx-hero .tx-eyebrow {
  color: #e0b338;
  text-shadow: 0 1px 12px rgba(12, 18, 40, 0.45);
}

.tx-hero__title {
  margin: 0 0 1rem;
  font-family: "Instrument Sans", Manrope, sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: #fbfaf7;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(12, 18, 40, 0.45);
}

.tx-hero__lead {
  max-width: 38rem;
  margin: 0 0 1.6rem;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.7;
  color: rgba(247, 244, 236, 0.88);
  text-shadow: 0 1px 14px rgba(12, 18, 40, 0.4);
}

.tx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.tx-scroll {
  position: absolute;
  right: max(1.5rem, calc((100% - 1180px) / 2));
  bottom: 2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: rgba(247, 244, 236, 0.8);
  text-decoration: none !important;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tx-scroll i {
  width: 1px;
  height: 3rem;
  background: linear-gradient(#c9a227, transparent);
  animation: tx-line 1.8s ease-in-out infinite;
}

/* Stats — hero'dan içeriğe koyu köprü bandı; açılışta görünmez,
   scroll ile alttan yükselerek sahneye girer */
.tx-stats {
  position: relative;
  z-index: 3;
  background: var(--tx-deep);
  padding: clamp(3rem, 5.5vw, 4.5rem) 0;
  overflow: hidden;
}

/* Üstte ince altın ışık dikişi + yumuşak ışıma: hero'daki güneşin izi */
.tx-stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 62%);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.7), transparent);
}

.tx-stats::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(50% 100% at 50% 0%, rgba(201, 162, 39, 0.08), transparent 70%);
  pointer-events: none;
}

.tx-stats .tx-reveal {
  transform: translateY(56px) scale(0.97);
  transition-duration: 0.9s;
}

.tx-stats .tx-reveal.is-in {
  transform: none;
}

.tx-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}

.tx-stat {
  background: transparent;
  padding: 0.35rem 1.9rem;
  border-left: 1px solid rgba(247, 244, 236, 0.14);
}

.tx-stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.tx-stat strong {
  display: block;
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #f7f4ec;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.tx-stat span {
  color: rgba(247, 244, 236, 0.58);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* About */
.tx-about {
  background:
    radial-gradient(46% 60% at 88% 0%, rgba(201, 162, 39, 0.07), transparent 70%),
    var(--tx-sand);
}

.tx-about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.25rem);
  align-items: start;
}

.tx-about__copy p {
  margin: 0 0 1rem;
  color: #3e4554;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 44rem;
}

.tx-note {
  border-left: 3px solid var(--tx-sun);
  border-radius: 0 0.6rem 0.6rem 0;
  background: rgba(201, 162, 39, 0.07);
  padding: 0.7rem 1.1rem;
  font-weight: 500;
  color: var(--tx-navy) !important;
}

/* Services */
.tx-services {
  background: var(--tx-paper);
}

.tx-services__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
}

.tx-card {
  position: relative;
  padding: 1.8rem 1.4rem 1.85rem;
  background: #fff;
  border: 1px solid var(--tx-line);
  border-radius: 1rem;
  min-height: 100%;
  overflow: hidden;
  transition: transform 0.45s var(--tx-ease), box-shadow 0.45s var(--tx-ease), border-color 0.45s var(--tx-ease);
}

/* Hover'da üstten altın ışık dikişi */
.tx-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tx-sun), rgba(201, 162, 39, 0));
  opacity: 0;
  transition: opacity 0.45s var(--tx-ease);
}

.tx-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, 0.45);
  box-shadow: 0 18px 40px rgba(12, 18, 40, 0.08);
}

.tx-card:hover::before {
  opacity: 1;
}

.tx-card__n {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.05rem;
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--tx-sun);
}

.tx-card__n::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--tx-line);
}

.tx-card h3 {
  margin: 0 0 0.5rem;
  font-family: "Instrument Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tx-deep);
}

.tx-card p {
  margin: 0;
  color: var(--tx-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Tracker */
.tx-tracker {
  position: relative;
  overflow: hidden;
  background: var(--tx-deep);
  color: rgba(247, 244, 236, 0.86);
}

/* Köşede yumuşak altın ışıma: hero güneşinin izi */
.tx-tracker::before {
  content: "";
  position: absolute;
  top: -18%;
  left: -8%;
  width: 52%;
  height: 75%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(201, 162, 39, 0.08), transparent 70%);
  pointer-events: none;
}

.tx-tracker .tx-h2,
.tx-tracker .tx-kicker {
  color: #f7f4ec;
}

.tx-tracker .tx-kicker {
  color: #e8d59a;
}

.tx-tracker__grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 5.5vw, 4.5rem);
  align-items: center;
}

.tx-tracker__visual {
  margin: 0;
  border-radius: 1.1rem;
  overflow: hidden;
  aspect-ratio: 4 / 3.1;
  max-height: 480px;
  width: 100%;
  border: 1px solid rgba(247, 244, 236, 0.1);
}

.tx-tracker__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tx-tracker__grid > div > p {
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 34rem;
  color: rgba(247, 244, 236, 0.78);
}

.tx-ticks {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.tx-ticks li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.7rem;
  border-top: 1px solid rgba(247, 244, 236, 0.12);
  font-size: 0.92rem;
}

.tx-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--tx-sun);
}

/* Refs */
.tx-refs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
}

.tx-ref {
  display: block;
  text-decoration: none !important;
  color: inherit;
  min-width: 0;
}

.tx-ref figure,
.tx-ref:nth-child(1) figure {
  margin: 0;
  overflow: hidden;
  border-radius: 1.15rem;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  background: #d9d3c7;
}

.tx-ref img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--tx-ease);
}

.tx-ref:hover img {
  transform: scale(1.06);
}

.tx-ref h3 {
  margin: 0.75rem 0 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--tx-deep);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Konum etiketi önünde küçük altın nokta — saha işareti */
.tx-ref h3::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--tx-sun);
  flex-shrink: 0;
  opacity: 0.85;
}

/* Tech */
.tx-tech {
  position: relative;
  isolation: isolate;
  color: #f7f4ec;
  min-height: 460px;
  display: flex;
  align-items: center;
}

.tx-tech__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85);
}

.tx-tech__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 18, 40, 0.9) 0%, rgba(12, 18, 40, 0.66) 55%, rgba(12, 18, 40, 0.38) 100%);
}

.tx-tech__inner {
  position: relative;
  max-width: 38rem;
}

.tx-tech__inner p {
  color: rgba(247, 244, 236, 0.84);
  margin: 0 0 1.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Contact — merkezlenmiş kapanış */
.tx-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50% 65% at 50% 100%, rgba(201, 162, 39, 0.08), transparent 70%),
    var(--tx-sand);
}

.tx-cta__box {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  padding: 0;
}

/* Merkezde simetri için kicker çizgisi iki yana */
.tx-cta .tx-kicker::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--tx-sun);
  flex-shrink: 0;
}

.tx-cta .tx-h2 {
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
}

.tx-cta__box p {
  color: #3e4554;
  margin: 0 auto 1.6rem;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Portfolio page */
.tx-pagehead {
  padding: 5.25rem 0 1.75rem;
  background: var(--tx-sand);
}

.tx-pagehead__title {
  margin: 0 0 0.5rem;
  font-family: "Instrument Sans", Manrope, sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--tx-deep);
}

.tx-pagehead__lead {
  margin: 0 0 1.35rem;
  max-width: 28rem;
  color: var(--tx-muted);
  font-size: 0.9rem;
}

.tx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tx-chip {
  appearance: none;
  border: 1px solid var(--tx-line);
  background: #fff;
  color: var(--tx-muted);
  border-radius: 999px;
  min-height: 2rem;
  padding: 0.3rem 0.85rem;
  font: 500 0.75rem/1 Manrope, sans-serif;
  cursor: pointer;
  transition: background 0.25s var(--tx-ease), color 0.25s var(--tx-ease), border-color 0.25s var(--tx-ease);
}

.tx-chip.is-on,
.tx-chip:hover {
  background: var(--tx-navy);
  border-color: var(--tx-navy);
  color: #f7f4ec;
}

.tx-port {
  padding: 1.5rem 0 3.5rem;
  background: var(--tx-paper);
}

.tx-port__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem 1rem;
}

.tx-portcard {
  min-width: 0;
}

.tx-portcard.is-off {
  display: none;
}

.tx-portcard.is-link {
  text-decoration: none !important;
  color: inherit;
}

.tx-portcard figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0.85rem;
  aspect-ratio: 1;
  background: #d9d3c7;
}

.tx-portcard figure i {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(12, 18, 40, 0.72);
  color: #f7f4ec;
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.tx-portcard.is-text figure {
  background: linear-gradient(160deg, #1b2559 0%, #0c1228 100%);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.tx-btn--ghost-dark {
  background: transparent;
  color: var(--tx-navy) !important;
  border: 1px solid var(--tx-line);
}

.tx-btn--ghost-dark:hover {
  background: #fff;
}

/* Case detail page */
.tx-casehero {
  position: relative;
  overflow: hidden;
  color: #f7f4ec;
  background: var(--tx-deep);
}

.tx-casehero__img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: min(58vh, 520px) !important;
  min-height: 360px !important;
  object-fit: cover !important;
  object-position: center;
}

.tx-casehero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 18, 40, 0.12) 0%, rgba(12, 18, 40, 0.28) 42%, rgba(12, 18, 40, 0.78) 100%);
  pointer-events: none;
}

.tx-casehero__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6.5rem 0 2.2rem;
}

.tx-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 0.25rem;
  margin-bottom: 1.15rem;
  padding: 0.35rem 0.9rem 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(251, 250, 247, 0.94);
  color: #1b2559 !important;
  text-decoration: none !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tx-back-btn span {
  font-size: 0.95rem;
  line-height: 1;
}

.tx-back-btn--light {
  background: #fff;
  color: var(--tx-navy) !important;
  box-shadow: 0 2px 10px rgba(8, 12, 26, 0.08);
  margin-bottom: 1.25rem;
}

.tx-back-btn--light:hover {
  color: var(--tx-cyan) !important;
}

.tx-home .tx-casehero__title,
.tx-home .tx-casehero h1 {
  margin: 0 0 0.4rem;
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fbfaf7 !important;
}

.tx-home .tx-casehero__sub {
  margin: 0;
  max-width: 34rem;
  font-size: 0.9rem;
  color: rgba(247, 244, 236, 0.88) !important;
}

.tx-snap {
  margin-top: -1.2rem;
  position: relative;
  z-index: 2;
  padding-bottom: 0.5rem;
}

.tx-snap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--tx-line);
  border: 1px solid var(--tx-line);
  border-radius: 1rem;
  overflow: hidden;
  background-color: #fff;
}

.tx-snap__item {
  background: #fff;
  padding: 1rem 0.95rem 1.05rem;
}

.tx-snap__item span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-muted);
}

.tx-snap__item strong {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--tx-deep);
}

.tx-casemain {
  background: var(--tx-sand);
}

.tx-casemain__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: start;
}

.tx-casemain__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #3e4554;
}

.tx-why {
  padding: 1.35rem 1.4rem;
  background: #fff;
  border: 1px solid var(--tx-line);
  border-radius: 1rem;
}

.tx-why p:last-child {
  margin: 0;
  font-size: 0.9rem;
  color: #3e4554;
}

.tx-deliver {
  background: var(--tx-paper);
}

.tx-deliver__list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.tx-deliver__list li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--tx-line);
}

.tx-deliver__list li span {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.75rem;
  color: var(--tx-sun);
  padding-top: 0.15rem;
}

.tx-deliver__list li p {
  margin: 0;
  font-size: 0.92rem;
  color: #3e4554;
}

.tx-deliver__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

@media (max-width: 1024px) {
  .tx-casemain__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tx-snap__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tx-casehero__img {
    height: 48vh !important;
    min-height: 280px !important;
  }

  .tx-casehero__inner {
    padding: 5.5rem 0 1.6rem;
  }
}

.tx-portcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--tx-ease);
}

.tx-portcard:hover img {
  transform: scale(1.04);
}

.tx-portcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin: 0.65rem 0 0;
}

.tx-portcard__meta span {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8478;
  font-weight: 500;
}

.tx-portcard__meta em {
  font-style: normal;
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #3a4254;
}

/* Reveal */
.tx-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--tx-ease), transform 0.7s var(--tx-ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}

.tx-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

@keyframes tx-ken {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(0, -2%, 0); }
}

@keyframes tx-line {
  0%, 100% { opacity: 0.25; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 1024px) {
  /* Tablet: en arka sıra gizlenir; rail + mini alan kapanır */
  .tx-solar__depth--3 { display: none; }

  .tx-rail,
  .tx-minifield { display: none; }

  .tx-stats__grid,
  .tx-services__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tx-stats__grid {
    row-gap: 2rem;
  }

  .tx-stat:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .tx-about__grid,
  .tx-tracker__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tx-refs__grid {
    grid-template-columns: 1fr 1fr;
  }

  .tx-tracker__visual {
    aspect-ratio: 16 / 10;
  }

  .tx-port__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .tx-hero {
    padding: 5.5rem 0 6rem;
  }

  /* Metin bloğu küçük ekranda daha kompakt; navbar ile çakışmaz */
  .tx-hero__inner--center {
    margin-top: -3vh;
  }

  .tx-hero__title {
    font-size: clamp(1.55rem, 7vw, 1.95rem);
  }

  .tx-hero__lead {
    font-size: 0.88rem;
    line-height: 1.65;
    max-width: 32rem;
  }

  /* Mobil: ilk iki sıra kalır; paneller telefonda belirgin olacak kadar
     büyütülür (inline stil JS'ten geldiği için !important gerekli) */
  .tx-solar__depth--2,
  .tx-solar__depth--3 { display: none; }

  .tx-solar__depth--0 { width: 36vw !important; bottom: -2% !important; }
  .tx-solar__depth--1 { width: 25vw !important; bottom: 14% !important; }

  .tx-solar__sun { width: clamp(140px, 42vw, 200px); }

  .tx-stats__grid,
  .tx-services__grid,
  .tx-refs__grid,
  .tx-port__grid {
    grid-template-columns: 1fr;
  }

  .tx-stats__grid {
    row-gap: 0;
  }

  .tx-stat {
    border-left: 0;
    border-top: 1px solid rgba(247, 244, 236, 0.14);
    padding: 1.15rem 0;
  }

  .tx-stat:first-child {
    border-top: 0;
    padding-top: 0.35rem;
  }

  .tx-section__head--row .tx-btn {
    width: 100%;
  }

}

/* Kısa ekranlar (yatay telefon / küçük cihaz): hero içeriği sıkışmasın */
@media (max-height: 600px) {
  .tx-hero__inner--center {
    margin-top: 0;
  }

  .tx-hero {
    padding: 5rem 0 4rem;
  }

  .tx-scroll {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-scroll i,
  .tx-ref img,
  .tx-card,
  .tx-btn,
  .tx-reveal {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Solar sahne statikleşir: paneller yerinde, halo/huzme/bulut animasyonu yok */
  .tx-solar__lift {
    transform: none !important;
    transition: none !important;
  }

  .tx-solar__halo,
  .tx-solar__beams,
  .tx-scene__cloud {
    animation: none !important;
  }

  /* Metin reveal'ı beklemeden görünür */
  .tx-srev {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: inherit !important;
    transition: none !important;
  }

  .tx-rail__sun {
    transition: none !important;
  }

  .tx-flow__cablepulse,
  .tx-blink,
  .tx-glowpulse,
  .tx-beacon {
    animation: none !important;
  }
}

/* ================================================================
   MARKA KILAVUZU UYUMU
   Renkler: Lacivert #1E285A · Turkuaz #32C8F0 · Siyah #1D1D1B · Gri #A2AAAD
   Tipografi: Malayalam MN (başlık) / Centrale Sans (gövde) — yüklü
   değilse mevcut aileler devreye girer. UI vurguları altından
   turkuaza taşındı; altın yalnızca güneş görsellerinde kaldı.
   ================================================================ */

.tx-home {
  font-family: var(--tx-font-body);
}

.tx-h2,
.tx-hero__title,
.tx-stat strong,
.tx-card h3,
.tx-card__n,
.tx-ref h3,
.tx-pagehead__title,
.tx-home .tx-casehero__title,
.tx-home .tx-casehero h1,
.tx-snap__item strong {
  font-family: var(--tx-font-head);
}

/* Vurgu rengi: turkuaz (küçük metinde okunabilirlik için koyulaştırılmış ton) */
.tx-eyebrow,
.tx-kicker,
.tx-card__n,
.tx-deliver__list li span {
  color: #0fa5ce;
}

.tx-kicker::before,
.tx-cta .tx-kicker::after {
  background: var(--tx-cyan);
}

.tx-kicker--light {
  color: #9fe4f6;
}

.tx-hero .tx-eyebrow {
  color: #8ae2fa;
  text-shadow: 0 1px 12px rgba(12, 18, 40, 0.45);
}

/* Birincil buton: Truaxis turkuazı */
.tx-btn--sun {
  background: var(--tx-cyan);
  color: var(--tx-navy) !important;
}

.tx-btn--sun:hover {
  background: #21b6e0;
}

.tx-card::before {
  background: linear-gradient(90deg, var(--tx-cyan), rgba(50, 200, 240, 0));
}

.tx-card:hover {
  border-color: rgba(50, 200, 240, 0.5);
}

.tx-note {
  border-left-color: var(--tx-cyan);
  background: rgba(50, 200, 240, 0.08);
}

.tx-ticks li::before,
.tx-ref h3::before {
  background: var(--tx-cyan);
}

.tx-scroll i {
  background: linear-gradient(var(--tx-cyan), transparent);
}

.tx-stats::before {
  background: linear-gradient(90deg, transparent, rgba(50, 200, 240, 0.65), transparent);
}

.tx-stats::after {
  background: radial-gradient(50% 100% at 50% 0%, rgba(50, 200, 240, 0.09), transparent 70%);
}

.tx-about {
  background:
    radial-gradient(46% 60% at 88% 0%, rgba(50, 200, 240, 0.06), transparent 70%),
    var(--tx-sand);
}

.tx-cta {
  background:
    radial-gradient(50% 65% at 50% 100%, rgba(50, 200, 240, 0.07), transparent 70%),
    var(--tx-sand);
}

.tx-tracker::before {
  background: radial-gradient(50% 50% at 50% 50%, rgba(50, 200, 240, 0.07), transparent 70%);
}


/* ================================================================
   AGRIVOLTAIK SAYFASI
   ================================================================ */

.tx-pagehead__lead--wide {
  max-width: 40rem;
}

.tx-agri-geos {
  background: var(--tx-paper);
}

.tx-agri-geos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.tx-agri-icon {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  color: var(--tx-navy);
  background: rgba(50, 200, 240, 0.09);
  border: 1px solid rgba(50, 200, 240, 0.22);
}

.tx-agri-icon svg {
  width: 2.8rem;
  height: 2.8rem;
}

.tx-agri-geos .tx-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}

.tx-agri-sub {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0fa5ce;
}

.tx-agri-steel {
  position: relative;
  overflow: hidden;
  background: var(--tx-deep);
  color: rgba(247, 244, 236, 0.86);
}

.tx-agri-steel::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -8%;
  width: 52%;
  height: 75%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(50, 200, 240, 0.08), transparent 70%);
  pointer-events: none;
}

.tx-agri-steel__inner {
  position: relative;
  max-width: 44rem;
}

.tx-agri-steel__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(247, 244, 236, 0.78);
}

.tx-agri-frame {
  background: var(--tx-sand);
}

.tx-agri-frame__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.25rem);
  align-items: start;
}

.tx-agri-frame__grid p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #3e4554;
}

/* Açık zemin için tick varyantı */
.tx-ticks--light {
  margin-top: 0;
}

.tx-ticks--light li {
  border-top-color: var(--tx-line);
  color: #3e4554;
  font-size: 0.92rem;
}

.tx-agri-frame .tx-note {
  margin-top: 1.25rem;
}

@media (max-width: 1024px) {
  .tx-agri-geos__grid {
    grid-template-columns: 1fr;
  }

  .tx-agri-frame__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---- Agrivoltaik: navbar açılır menüsü ----
   Pill ile aynı dil: lacivert→mavi gradyan, blur, yumuşak köşe.
   Hover köprüsü: pill ile panel arasındaki boşlukta imleç inerken
   hover kopmasın diye li'ye görünmez uzantı eklenir. */
body.tx-front .main-navigation .menu-item-has-children {
  position: relative;
}

body.tx-front .main-navigation .menu-item-has-children:hover::after,
body.tx-front .main-navigation .menu-item-has-children.sfHover::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 26px;
}

body.tx-front .main-navigation ul ul {
  background: linear-gradient(
    150deg,
    rgba(7, 14, 34, 0.97) 0%,
    rgba(12, 38, 88, 0.95) 60%,
    rgba(20, 66, 132, 0.93) 100%
  ) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(50, 200, 240, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(8, 12, 26, 0.45);
  padding: 0.45rem !important;
  margin-top: 14px !important;
  min-width: 220px;
  overflow: hidden;
}

body.tx-front .main-navigation ul ul li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  float: none !important;
}

body.tx-front .main-navigation ul ul li a,
body.tx-front .main-navigation .main-nav ul ul li a {
  display: block !important;
  height: auto !important;
  line-height: 2.5rem !important;
  padding: 0 0.9rem !important;
  margin: 0 !important;
  border-radius: 9px !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
  transition: background 0.2s var(--tx-ease), color 0.2s var(--tx-ease);
}

body.tx-front .main-navigation ul ul li a:hover {
  background: rgba(50, 200, 240, 0.14) !important;
  color: #8ae2fa !important;
  opacity: 1;
}

body.tx-front .main-navigation ul ul li + li a {
  margin-top: 2px !important;
}

/* ---- Agrivoltaik: genel bakışta tıklanabilir kartlar ---- */
.tx-agri-cardlink {
  display: block;
  text-decoration: none !important;
  color: inherit;
}

/* ---- Agrivoltaik: ürün uygunluk matrisi ---- */
.tx-agri-cs {
  background: var(--tx-paper);
}

.tx-agri-matrix {
  display: grid;
  gap: 1px;
  background: var(--tx-line);
  border: 1px solid var(--tx-line);
  border-radius: 1rem;
  overflow: hidden;
}

.tx-agri-matrix__row {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 1.25rem;
  background: #fff;
  padding: 1.1rem 1.4rem;
  align-items: start;
}

.tx-agri-matrix__row strong {
  font-family: var(--tx-font-head);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--tx-navy);
}

.tx-agri-geo {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0fa5ce;
}

.tx-agri-matrix__row p {
  margin: 0;
  color: var(--tx-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.tx-agri-cs__extras {
  margin-top: 0.9rem;
}

/* Agri-tracker genel bakış: numaralı özet bölümleri */
.tx-agri-sum .tx-lead {
  max-width: 52rem;
  margin: 0.4rem 0 1.3rem;
}

.tx-agri-sum--alt {
  background: var(--tx-paper);
}

/* Blog listesi */
.tx-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}

.tx-blog-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
}

.tx-blog-card__date {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-muted);
}

.tx-blog-card h3 {
  margin: 0;
  font-family: "Instrument Sans", Manrope, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--tx-deep);
}

.tx-blog-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tx-muted);
  flex: 1 1 auto;
}

.tx-blog-card__more {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1786ad;
}

/* ================================================================
   Site alt bilgisi — tüm sayfalarda
   ================================================================ */
.tx-site-footer {
  background: var(--tx-deep);
  color: rgba(226, 236, 246, 0.72);
  font-family: Manrope, system-ui, sans-serif;
  line-height: 1.6;
}

.tx-site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3.2rem);
  padding: clamp(2.6rem, 5vw, 4rem) 1.25rem clamp(2rem, 3.5vw, 2.8rem);
  align-items: start;
}

.tx-site-footer__brand img {
  display: block;
  width: 220px;
  height: auto;
  max-width: 100%;
}

.tx-site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.tx-site-footer__col h3 {
  margin: 0 0 0.35rem;
  font-family: "Instrument Sans", Manrope, system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f7f4ec;
}

.tx-site-footer__col a,
.tx-site-footer__col span {
  font-size: 0.92rem;
  color: rgba(226, 236, 246, 0.72);
  text-decoration: none;
}

.tx-site-footer__col a:hover {
  color: var(--tx-cyan);
}

.tx-site-footer__cta {
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--tx-cyan) !important;
}

.tx-site-footer__bar {
  border-top: 1px solid rgba(226, 236, 246, 0.12);
}

.tx-site-footer__bar .tx-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
}

.tx-site-footer__bar p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(226, 236, 246, 0.55);
}

.tx-site-footer__bar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.tx-site-footer__bar nav a {
  font-size: 0.8rem;
  color: rgba(226, 236, 246, 0.62);
  text-decoration: none;
}

.tx-site-footer__bar nav a:hover {
  color: var(--tx-cyan);
}

@media (max-width: 860px) {
  .tx-site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
  }

  .tx-site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .tx-site-footer__grid {
    grid-template-columns: 1fr;
  }

  .tx-site-footer__bar .tx-wrap {
    justify-content: flex-start;
  }
}

/* WordPress'in kalan sayfaları (KVKK, gizlilik, blog vb.):
   tx-front navbar'ı + okunur içerik düzeni */
body.tx-wp-page {
  background: var(--tx-paper);
}

body.tx-wp-page #content,
body.tx-wp-page .site-content {
  max-width: 860px !important;
  width: 100% !important;
  flex: 0 1 860px !important;
  margin: 0 auto !important;
  padding: clamp(7rem, 13vh, 9rem) 1.5rem 4rem !important;
}

body.tx-wp-page #primary,
body.tx-wp-page .content-area,
body.tx-wp-page .site-main {
  width: 100% !important;
  flex: 1 1 100% !important;
}

body.tx-wp-page h1.entry-title,
body.tx-wp-page .entry-header h1 {
  margin: 0 0 1.4rem;
  font-family: "Instrument Sans", Manrope, system-ui, sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--tx-deep);
}

body.tx-wp-page .entry-content {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--tx-text);
}

body.tx-wp-page .entry-content h2,
body.tx-wp-page .entry-content h3,
body.tx-wp-page .entry-content h4 {
  margin: 2rem 0 0.7rem;
  font-family: "Instrument Sans", Manrope, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tx-deep);
}

body.tx-wp-page .entry-content h2 { font-size: 1.5rem; }
body.tx-wp-page .entry-content h3 { font-size: 1.25rem; }
body.tx-wp-page .entry-content h4 { font-size: 1.1rem; }

body.tx-wp-page .entry-content p,
body.tx-wp-page .entry-content ul,
body.tx-wp-page .entry-content ol {
  margin: 0 0 1rem;
}

body.tx-wp-page .entry-content a {
  color: #1786ad;
  text-decoration-color: rgba(50, 200, 240, 0.5);
}

body.tx-wp-page .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.92rem;
}

body.tx-wp-page .entry-content table th,
body.tx-wp-page .entry-content table td {
  border: 1px solid var(--tx-line);
  padding: 0.55rem 0.7rem;
  text-align: left;
}

body.tx-wp-page .site-footer {
  margin-top: 2.5rem;
}

/* Kalan sayfalarda olası eski tasarım hero bloklarını gizle */
body.tx-wp-page > .gbp-section,
body.tx-wp-page .header-wrap + .gbp-section {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Ana sayfa tracker bölümündeki Agri-Tracker özeti */
.tx-tracker__agri {
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 244, 236, 0.14);
}

.tx-tracker__agri h3 {
  margin: 0 0 0.5rem;
  font-family: "Instrument Sans", Manrope, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #f7f4ec;
}

.tx-tracker__agri p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.65;
}

.tx-tracker__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tx-agri-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.tx-agri-cs__intro {
  margin: 0 0 1.6rem;
  max-width: 46rem;
  color: var(--tx-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  font-style: italic;
}

.tx-agri-listh {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  margin: 2.2rem 0 0.6rem;
}

.tx-agri-frame .tx-agri-listh {
  margin-top: 0;
}

@media (max-width: 640px) {
  .tx-agri-matrix__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

body.tx-404-page,
body.tx-404-page #page,
body.tx-404-page .site,
body.tx-404-page .site-content,
body.tx-404-page #content,
body.tx-404-page #primary,
body.tx-404-page .content-area,
body.tx-404-page .site-main {
  background: var(--tx-paper) !important;
}

.tx-404__stage {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  background:
    radial-gradient(55% 60% at 50% 100%, rgba(50, 200, 240, 0.08), transparent 70%),
    var(--tx-paper);
}

.tx-404__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 2.5rem);
  max-width: 42rem;
  min-height: calc(100svh - 8rem);
  margin: 0 auto;
}

.tx-404__code {
  margin: 0 0 0.4rem;
  font-family: var(--tx-font-head);
  font-size: clamp(4.5rem, 12vw, 8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(115deg, var(--tx-navy) 20%, #1e6fae 60%, var(--tx-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tx-404__title {
  margin: 0 0 0.8rem;
  font-family: var(--tx-font-head);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tx-deep);
  text-wrap: balance;
}

.tx-404__lead {
  margin: 0 0 1.8rem;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--tx-muted);
  text-align: center;
}

.tx-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.tx-404__scene {
  width: min(520px, 90vw);
  height: auto;
  display: block;
  margin: 2rem auto 0;
}

@media (max-width: 640px) {
  .tx-404__actions .tx-btn {
    width: 100%;
  }
}