:root {
  --talia-turquoise: #00ABC8;
  --dark-blue: #0F23FC;
  --cyan: #00b5d8;
  --cyan-deep: #0095b5;
  --teal: #2dd4bf;
  --yellow: #ffd93d;
  --magenta: #ff3d7f;
  --magenta-deep: #e11d67;
  --ink: #0e1a2b;
  --ink-2: #1b2a40;
  --ink-band: #1b2b3d;
  --ink-soft: #2a3a52;
  --text: #1b2230;
  --muted: #5a6478;
  --paper: #ffffff;
  --paper-2: #f4f5f7;
  --paper-3: #eceef2;
  --card-yellow: #fff6dc;
  --card-blue: #e4f4fb;
  --card-pink: #ffe6ef;
  --line: #e5e8ee;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 32px;
  /* Header altındaki dekoratif oval.
     --oval-h    : .hero-oval kutusunun yüksekliği
     --oval-drop : kıvrımın header'ın altına sarkan payı (--oval-h eksi
                   .oval-bottom:before içindeki 12px)
     Yapışkan iç menü, slider içeriği ve bölüm hedefleri bu paya göre
     hesaplanır; telefonda ikisi birden küçülür (bkz. max-width: 640px). */
  --oval-h: 40px;
  --oval-drop: 28px;
}

* {
  box-sizing: border-box;
}

/* ----- Erişilebilirlik yardımcıları ----- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: white;
  font-weight: 700;
  font-size: 13px;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

section {
  width: 100%;
}

/* ----- Constrained container (full-width parent, max-width inner) ----- */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* =========================================================
   HEADER — full-width sticky bar, inner content max-width
   Shared shell for every page.
   ========================================================= */
.site-header {
  --header-pad: 18px;
  /* yatay iç boşluk */
  --header-pad-y: 12px;
  /* dikey iç boşluk; nav ile mega menü arasındaki köprü */
  position: fixed;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  top: 0;
  width: 100%;
}

.hero-oval {
  pointer-events: none;
  /* dekoratif; altındaki mega menünün hover'ını kesmesin */
  width: 100%;
  overflow: hidden;
  height: var(--oval-h, 40px);
  position: absolute;
  z-index: 9;
}

.hero-oval:before {
  content: "";
  position: absolute;
  height: 400px;
  width: 300%;
  z-index: 9;
  left: -100%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.oval-bottom {
  top: 100%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.oval-top {
  bottom: 0;
}

.oval-bottom:before {
  border-radius: 0 0 100% 100%;
  bottom: 12px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 6px 8px 0px;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.oval-top:before {
  border-radius: 100% 100% 0 0;
  top: 12px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px -6px 8px 0px;
  background-color: rgb(255, 255, 255);
}

.hero-swiper {
  width: 100%;
  height: 100%;
}

.header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-pad-y) var(--header-pad) 0 var(--header-pad);
}

.topnav__util {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.topnav__nav {
  --nav-pad: 9px;
  display: flex;
  gap: 0;
  margin-right: calc(var(--nav-pad) * -1);
  /* metin, üstteki satırla hizalı kalsın */
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

/* Bağlantılar bitişik; aralık padding ile veriliyor. */
.topnav__nav a {
  position: relative;
  padding: 8px var(--nav-pad);
}

/* Görünmez köprü: bağlantı kutusunu header'ın alt kenarına kadar uzatır,
   böylece fare mega menüye inerken hover kopmaz. */
.topnav__nav a::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: var(--header-pad-y);
}

.mega-trigger {
  position: relative;
}

/* Alt menüsü olan başlıklarda küçük ok ikonu */
.mega-trigger::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.65;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mega-trigger:hover::after {
  opacity: 1;
  transform: translateY(0) rotate(225deg);
}

.mega-menu {
  position: absolute;
  /* Üst kenarı bağlantı satırının 18px altından başlar; header'ın alt iç
     boşluğu sıfır olduğu için ölçü satırın kendisine göre alınır, yoksa
     panel menü yazılarının üzerine biner. */
  top: calc(100% + var(--header-pad-y) - 8px);
  right: max(var(--header-pad), calc((100% - 1200px) / 2 + var(--header-pad)));
  z-index: 30;
  display: none;
  width: min(640px, calc(100% - 2 * var(--header-pad)));
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 24px 48px -28px rgba(14, 26, 43, 0.42);
}

.mega-menu::before {
  position: absolute;
  right: 0;
  left: 0;
  height: 18px;
  content: "";
}

.site-header:has(.mega-trigger:hover) .mega-menu,
.site-header:has(.mega-trigger:focus-visible) .mega-menu,
.site-header:has(.mega-menu:hover) .mega-menu,
.site-header.menu-open .mega-menu {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
}

.mega-menu__panel {
  display: none;
}

.site-header[data-menu="products"] .mega-menu__panel[data-panel="products"],
.site-header[data-menu="solutions"] .mega-menu__panel[data-panel="solutions"],
.site-header[data-menu="opensource"] .mega-menu__panel[data-panel="opensource"],
.site-header[data-menu="academy"] .mega-menu__panel[data-panel="academy"],
.site-header.menu-open:not([data-menu]) .mega-menu__panel[data-panel="products"],
.site-header:has(.mega-trigger[data-menu="products"]:hover) .mega-menu__panel[data-panel="products"],
.site-header:has(.mega-trigger[data-menu="solutions"]:hover) .mega-menu__panel[data-panel="solutions"],
.site-header:has(.mega-trigger[data-menu="opensource"]:hover) .mega-menu__panel[data-panel="opensource"],
.site-header:has(.mega-trigger[data-menu="academy"]:hover) .mega-menu__panel[data-panel="academy"] {
  display: flex;
}

.mega-menu__visual {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  color: white;
  background: var(--ink);
  border-radius: 0 0 0 18px;
}

.mega-menu__visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 25%, rgba(14, 26, 43, 0.82));
}

.mega-menu__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Görselin üzerindeki slogan, açık olan bölüme göre değişir; panellerle
   aynı seçici deseni kullanır (hover ve tıklama yolları birlikte). */
.mega-menu__visual strong {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  z-index: 1;
  display: none;
  font-size: 20px;
  line-height: 1.15;
}

.site-header[data-menu="products"] .mega-menu__visual strong[data-slogan="products"],
.site-header[data-menu="solutions"] .mega-menu__visual strong[data-slogan="solutions"],
.site-header[data-menu="opensource"] .mega-menu__visual strong[data-slogan="opensource"],
.site-header[data-menu="academy"] .mega-menu__visual strong[data-slogan="academy"],
.site-header.menu-open:not([data-menu]) .mega-menu__visual strong[data-slogan="products"],
.site-header:has(.mega-trigger[data-menu="products"]:hover) .mega-menu__visual strong[data-slogan="products"],
.site-header:has(.mega-trigger[data-menu="solutions"]:hover) .mega-menu__visual strong[data-slogan="solutions"],
.site-header:has(.mega-trigger[data-menu="opensource"]:hover) .mega-menu__visual strong[data-slogan="opensource"],
.site-header:has(.mega-trigger[data-menu="academy"]:hover) .mega-menu__visual strong[data-slogan="academy"] {
  display: block;
}

.mega-menu__content {
  display: block;
  width: 100%;
  max-width: 1200px;
  padding: 30px 32px;
}

.mega-menu__panel {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.mega-menu__panel h2 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mega-menu__panel>a {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.mega-menu__panel>a:hover,
.mega-menu__panel>a:focus-visible {
  color: var(--magenta-deep);
}

/* Logolu ürün satırı (logo eklendiğinde kendiliğinden devreye girer) */
.mega-menu__panel[data-panel="products"]>a:has(img) {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 8px 0;
}

.mega-menu__panel[data-panel="products"] img {
  width: 92px;
  max-height: 32px;
  object-fit: contain;
  object-position: left center;
}

.mega-menu__panel[data-panel="products"] span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

@media (max-width: 640px) {
  .mega-menu {
    top: 100%;
    right: 0;
    width: 100%;
    min-height: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0 0 16px 16px;
  }

  /* Mobilde mega menü yerine çekmece menü kullanılır */
  .site-header.menu-open .mega-menu {
    display: none;
  }

  .site-header.menu-open .mobile-menu {
    display: block;
  }

  .mega-menu__visual {
    min-height: 120px;
  }

  .mega-menu__visual strong {
    font-size: 17px;
  }

  .mega-menu__content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 18px 26px;
  }

  .mega-menu__products>a {
    grid-template-columns: 84px 1fr;
  }
}

/* Hidden on mobile — the hamburger takes over */
.topnav__right {
  display: none;
}

.hamburger {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.hamburger i {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Menü açıkken hamburger → çarpı */
.site-header.menu-open .hamburger i:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.site-header.menu-open .hamburger i:nth-child(2) {
  opacity: 0;
}

.site-header.menu-open .hamburger i:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* =========================================================
   MOBILE MENU — main.js tarafından üretilir. İki panelli ray:
   ana liste ↔ alt menü, yatay kaydırma ile geçiş.
   ========================================================= */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  width: 100%;
  height: calc(100vh - 100%);
  height: calc(100dvh - 100%);
  overflow: hidden;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.mobile-menu__track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.3s ease;
}

.mobile-menu.is-sub .mobile-menu__track {
  transform: translateX(-50%);
}

.mobile-menu__pane {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  padding: 6px var(--header-pad) 28px;
}

.mobile-menu__item.is-active {
  color: var(--cyan-text);
}

.mobile-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}

.mobile-menu__item svg,
.mobile-menu__back svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}

.mobile-menu__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: -4px;
  padding: 14px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.mobile-menu__sub-body h2 {
  margin: 6px 0 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.mobile-menu__sub-body a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Çekmece açıkken sayfa kaymasın */
html.menu-lock,
html.menu-lock body {
  overflow: hidden;
}

/* Kilit sırasında html scroll'u kapandığı için position:sticky header
   akıştaki yerine döner ve sayfa kaydırılmışsa ekran dışında kalırdı
   (hamburger ve çekmece menü de onunla birlikte kaybolurdu).
   Kilit süresince header'ı sabitliyor, içeriği de header payı kadar
   kaydırarak yerinde tutuyoruz. Ana sayfada header zaten fixed. */
html.menu-lock .page:not(.page--home) .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

html.menu-lock .page:not(.page--home) {
  padding-top: var(--header-h, 88px);
}

@media (prefers-reduced-motion: reduce) {

  .mobile-menu__track,
  .hamburger i {
    transition: none;
  }
}

/* ----- Brand mark ----- */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand .dots {
  display: inline-grid;
  grid-template-columns: 6px 6px;
  gap: 3px;
  margin-left: 4px;
  align-self: flex-start;
  padding-top: 4px;
}

.brand .dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.brand .dots i:nth-child(1) {
  background: var(--yellow);
}

.brand .dots i:nth-child(2) {
  background: var(--magenta);
}

.brand .dots i:nth-child(3) {
  background: var(--cyan);
}

.brand .dots i:nth-child(4) {
  background: var(--ink);
}

/* ----- Pills / buttons ----- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.pill:hover {
  transform: translateY(-1px);
}

.pill-dark {
  background: var(--ink);
  color: white;
}

.pill-magenta {
  background: var(--magenta);
  color: white;
}

.pill-magenta:hover {
  background: var(--magenta-deep);
}

.pill-cyan {
  background: var(--cyan);
  color: white;
}

.pill-ghost {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
}

.pill .arrow {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pill .arrow svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.pill .play {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  color: var(--magenta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pill .play svg {
  width: 8px;
  height: 8px;
}

/* Beyaz daire içinde, butonun kendi rengini alan ikon (banner butonları).
   Renk .pill varyantından geliyor, ikon fill: currentColor kullanıyor. */
.pill .ico-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pill .ico-badge svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.pill-dark .ico-badge {
  color: var(--ink);
}

.pill-magenta .ico-badge {
  color: var(--magenta);
}

.pill-cyan .ico-badge {
  color: var(--cyan);
}

/* ----- Section primitives ----- */
.section {
  padding: 48px 0;
}

.section-title {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 24px;
}

.eyebrow {
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--cyan);
  margin-bottom: 22px;
  line-height: 1.4;
  padding: 0 12px;
}

.eyebrow em {
  font-family: "Montserrat", system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  color: var(--talia-turquoise);
  margin-right: 4px;
  font-size: 2ch;
}

.eyebrow__gradient {
  background: linear-gradient(90deg,
      var(--talia-turquoise),
      var(--dark-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ----- HERO / SLIDER (full width) ----- */
.hero {
  --hero-height: 560px;
  /* Banner içeriği ile üstteki oval kıvrım arasındaki nefes payı.
     Telefonda daha geniş: görselin öznesi alt yarıda kalıyor. */
  --hero-top-gap: 56px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, #cde7f6 0%, #9fc8e2 45%, #5b8bb2 85%),
    #6a9bc5;
  min-height: var(--hero-height);
  height: var(--hero-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 18px 60px;
  text-align: center;
  padding: 0;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
  height: 100%;
}

.hero-swiper .swiper-slide {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* İçerik referanstaki gibi üst bölümde. Taban, header'ın gerçek
     yüksekliği + altındaki beyaz oval kıvrımın sarkma payı + nefes payı
     (--hero-top-gap) ile hesaplanır; header yüksekliği değiştiğinde
     banner içeriği onunla birlikte kayar, kıvrımın altında kalmaz. */
  padding: max(calc(var(--header-h, 88px) + var(--oval-drop, 28px) + var(--hero-top-gap, 20px)), calc(var(--hero-height) * 0.17)) 24px 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Banner içeriği (_temp/banner.png)
   Logo / başlık / alt başlık / butonlar — her biri opsiyonel. Dikey boşluk
   `gap` ile verildiği için eksik parçalar boşluk bırakmaz. ----- */
.hero-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1.05vw, 20px);
  max-width: 1100px;
  width: 100%;
}

.hero-slide__logo {
  width: clamp(120px, 12vw, 230px);
  height: auto;
}

.hero-slide__title {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(32px, 4.7vw, 90px);
  letter-spacing: -0.01em;
  margin: 0;
  background: linear-gradient(90deg,
      #ffd208 0%,
      #c6e03e 28%,
      #6fd75c 52%,
      #33d5b4 78%,
      #1fe3ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-slide__sub {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1.15vw, 22px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  max-width: 44ch;
}

/* Koyu fotoğraflı slaytlar için: <div class="hero-slide on-dark"> */
.hero-slide.on-dark .hero-slide__sub {
  color: #fff;
}

.hero-slide__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(4px, 0.6vw, 12px);
}

.hero-slide__cta .pill {
  height: clamp(40px, 2.6vw, 50px);
  padding: 0 clamp(16px, 1.35vw, 26px);
  font-size: clamp(12px, 0.9vw, 17px);
  gap: clamp(8px, 0.7vw, 14px);
}

.hero-slide__cta .ico-badge {
  width: clamp(20px, 1.6vw, 30px);
  height: clamp(20px, 1.6vw, 30px);
}

.hero-slide__cta .ico-badge svg {
  width: clamp(9px, 0.7vw, 13px);
  height: clamp(9px, 0.7vw, 13px);
}

/* Telefonda butonlar yan yana sığmıyor: alt alta, ortalanmış.
   align-items olmadan sütun yönünde pill'ler tam genişliğe esnerdi. */
@media (max-width: 640px) {
  .hero-slide__cta {
    flex-direction: column;
    align-items: center;
  }
}

/* ----- PRODUCT CARDS ----- */
.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.product-card {
  border-radius: var(--radius-lg);
  padding: 24px 18px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.product-card.yellow {
  background: var(--card-yellow);
}

.product-card.blue {
  background: var(--card-blue);
}

.product-card.pink {
  background: var(--card-pink);
}

.product-card__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--cyan);
  letter-spacing: -0.01em;
  max-width: 220px;
}

.product-card__logo svg {
  max-height: 50px;
  width: 100%
}

.product-card__copy {
  color: var(--ink-soft);
  font-size: 13px;
  max-width: 100%;
  line-height: 1.55;
}

/* ----- Dashboard preview ----- */
.preview {
  margin: 40px auto 0;
  max-width: 100%;
  padding: 0 4px;
}

.preview__shot {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(14, 26, 43, 0.35);
  background: #f6f7fa;
  border: 1px solid var(--line);
}

.preview__shot img {
  width: 100%;
  height: auto;
}

.preview__bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 14px;
  background: #eef0f4;
  border-bottom: 1px solid var(--line);
}

.preview__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d4d6db;
}

.preview__bar i:nth-child(1) {
  background: #ff6058;
}

.preview__bar i:nth-child(2) {
  background: #febc2e;
}

.preview__bar i:nth-child(3) {
  background: #29c640;
}

.preview__bar span {
  margin-left: 14px;
  font-size: 9px;
  color: #8a93a3;
  font-family: ui-monospace, monospace;
}

.dash {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  background: white;
}

.dash__side {
  display: none;
  background: #f6f7fa;
  border-right: 1px solid var(--line);
  padding: 16px 14px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.dash__side h5 {
  margin: 14px 0 6px;
  text-transform: uppercase;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.dash__side ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dash__side li {
  padding: 5px 8px;
  border-radius: 6px;
}

.dash__side li.active {
  background: var(--cyan);
  color: white;
}

.dash__main {
  padding: 12px;
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto 1fr;
}

.dash__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.stat {
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat .n {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}

.stat .l {
  font-size: 8px;
  color: var(--muted);
  font-weight: 600;
}

.stat.s1 {
  background: #ffe7e6;
}

.stat.s2 {
  background: #fff1dc;
}

.stat.s3 {
  background: #d8f3ec;
}

.stat.s4 {
  background: #e6e1ff;
}

.stat.s5 {
  background: #ffe8f0;
}

.dash__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: white;
  font-size: 11px;
}

.panel h6 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink);
}

.donut {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) 0 38%,
      var(--magenta) 38% 62%,
      var(--yellow) 62% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 8px auto;
}

.donut::before {
  content: "620";
  font-family: "Montserrat", system-ui, sans-serif;
  background: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--ink);
  font-size: 13px;
}

.table {
  display: grid;
  gap: 4px;
  font-size: 10px;
}

.table .tr {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 4px;
  padding: 6px 4px;
  border-bottom: 1px solid #eef0f4;
  font-size: 9px;
}

.table .th {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
}

.table .tr> :nth-child(4),
.table .tr> :nth-child(5),
.table .tr> :nth-child(6) {
  display: none;
}

.table .pill-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  background: #d8f3ec;
  color: #0a7a5e;
  font-weight: 700;
}

.table .pill-tag.warn {
  background: #fff1dc;
  color: #a05a00;
}

.table .pill-tag.bad {
  background: #ffe7e6;
  color: #b41818;
}

/* ----- Promo band ----- */
.promo {
  display: grid;
  grid-template-columns: 1fr;
  margin: -28px 14px 0;
  max-width: none;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  box-shadow: 0 18px 40px -20px rgba(14, 26, 43, 0.25);
}

.promo>div {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.promo .left {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(45deg, #0a2540 0 10px, #0e2c4a 10px 20px);
  color: white;
  position: relative;
  align-items: center;
  justify-content: flex-end;
}

.promo .right {
  background: var(--cyan);
  color: white;
  align-items: center;
  text-align: center;
  justify-content: flex-end;
}

.promo h2 {
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  max-width: 100%;
}

/* ----- Solutions (dark band) -----
   Full-bleed band with the ACTIVE card centred. Layout rule: one and a half
   narrow cards show on each side of it, which fixes the featured width —
   stage = 1.5C + 2G  +  F  +  2G + 1.5C  =>  F = stage - 3C - 4G.
   --sol-vw is written by the script from the slider's client width (100vw would
   include the scrollbar and overflow). The track is looped, so both sides
   always have cards to show. */
.solutions {
  --sol-vw: 100vw;
  --sol-stage: min(var(--sol-vw), 1980px);
  --sol-gap: 12px;
  --sol-pad: 18px;
  --sol-card-w: 240px;
  --sol-card-h: 285px;
  --sol-featured-w: 285px;
  --sol-featured-h: 396px;
  --sol-radius: 22px;
  /* Ease-OUT: tıklama anında hemen hızlanır, sonda yumuşar. Simetrik
     cubic-bezier(.4,0,.2,1) yavaş başladığı için ilk ~80ms'de kart
     yerinde büyüyor ama kayma fark edilmiyordu; takılma hissi bundandı. */
  --sol-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --sol-speed: 0.55s;

  background: var(--ink-band);
  color: white;
  margin: 36px 0 0;
  padding: 48px 0 36px;
}

.solutions .section-title {
  color: white;
  padding: 0 var(--sol-pad);
  margin-bottom: 28px;
}

/* Height is pinned to the tallest (active) card so the band does not breathe
   while the cards animate between the two sizes. */
.sol-slider {
  overflow: hidden;
  position: relative;
  height: var(--sol-featured-h);
  /* Yatay hareket şeride, dikey kaydırma tarayıcıya. Bu olmadan telefonda
     tarayıcı jesti devralıp pointercancel gönderiyor ve parmakla kaydırma
     hiç çalışmıyordu. */
  touch-action: pan-y;
  cursor: grab;
}

.solutions.is-dragging .sol-slider {
  cursor: grabbing;
}

/* Sürüklerken şerit parmağı birebir takip eder: geçiş kapalı, metin seçimi
   kapalı (masaüstünde kartların yazısı seçilmesin). */
.solutions.is-dragging {
  user-select: none;
}

.solutions.is-dragging .sol-track {
  transition: none;
}

/* Measurement probes — carry the two card widths but never transition, so the
   script reads correct values even if a resize lands mid-animation. */
.sol-probe {
  position: absolute;
  width: var(--sol-card-w);
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.sol-probe--wide {
  width: var(--sol-featured-w);
}

.sol-track {
  display: flex;
  align-items: flex-start;
  gap: var(--sol-gap);
  transition: transform var(--sol-speed) var(--sol-ease);
  will-change: transform;
}

/* Kopyalar arası sessiz atlama ve ilk kurulum sırasında hiçbir şey animasyon
   almamalı — yoksa kart yeni yerine eski boyutuyla oturup sonra büyüyor. */
.solutions.is-instant .sol-track,
.solutions.is-instant .sol-card,
.solutions.is-instant .sol-card *,
.solutions.is-instant .sol-card__media::after {
  transition: none !important;
}

.sol-card {
  width: var(--sol-card-w);
  height: var(--sol-card-h);
  flex-shrink: 0;
  border-radius: var(--sol-radius);
  position: relative;
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  transition:
    width var(--sol-speed) var(--sol-ease),
    height var(--sol-speed) var(--sol-ease);
}

.sol-card.is-active {
  width: var(--sol-featured-w);
  height: var(--sol-featured-h);
  padding: 24px 22px 28px;
}

/* Photo layer. Each card sets --sol-bg; if the file is missing the card's own
   gradient below shows through, so the section still reads while art is pending. */
.sol-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--sol-bg, none);
  background-repeat: no-repeat;
  /* Dar kartta görsel yüksekliği kaplar ve sağa yaslanır; kartlar geniş
     fotoğraflar olduğu için soldan kırpılır. */
  background-size: auto 100%;
  background-position: right center;
}

/* Aktif kartta alanı tamamen doldurur */
.sol-card.is-active .sol-card__media {
  background-size: cover;
}

/* Two scrims cross-fade instead of one gradient morphing (gradients do not
   interpolate): a bottom scrim always on, plus a left-leaning one for the
   active card, where the copy sits on the left half. */
.sol-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
      rgba(8, 14, 24, 0.15) 0%,
      rgba(8, 14, 24, 0.25) 55%,
      rgba(8, 14, 24, 0.6) 100%);
}

/* Dar kartta başlık fotoğrafın tam ortasında kalıyor; okunurluk için ek
   karartma. Aktif kartta sönerek kayboluyor — gradient'ler interpolate
   olmadığı için gradient değiştirmek yerine opacity cross-fade. */
.sol-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
  transition: opacity var(--sol-speed) var(--sol-ease);
  background: linear-gradient(180deg,
      rgba(8, 14, 24, 0.15) 0%,
      rgba(8, 14, 24, 0.36) 55%,
      rgba(8, 14, 24, 0.46) 100%);
}

.sol-card.is-active::before {
  opacity: 0;
}

.sol-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--sol-speed) var(--sol-ease);
  background: linear-gradient(100deg,
      rgba(6, 12, 22, 0.85) 0%,
      rgba(6, 12, 22, 0.6) 45%,
      rgba(6, 12, 22, 0.15) 100%);
}

.sol-card.is-active .sol-card__media::after {
  opacity: 1;
}

.sol-card h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
  transition: font-size var(--sol-speed) var(--sol-ease);
}

.sol-card.is-active h3 {
  font-size: 21px;
}

/* Copy + CTA collapse to nothing when the card is not active. Because the card
   is centred, the title drifts to the middle as they collapse and back to the
   top as they expand — no un-animatable justify-content swap needed. */
.sol-card__mid,
.sol-card__cta {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--sol-speed) var(--sol-ease),
    opacity calc(var(--sol-speed) * 0.6) var(--sol-ease),
    margin var(--sol-speed) var(--sol-ease),
    flex-grow var(--sol-speed) var(--sol-ease);
}

.sol-card__mid {
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sol-card.is-active .sol-card__mid {
  flex-grow: 1;
  max-height: 420px;
  opacity: 1;
  margin: 12px 0 14px;
}

.sol-card.is-active .sol-card__cta {
  max-height: 80px;
  opacity: 1;
}

.sol-card__logo {
  width: 128px;
  height: auto;
  margin-bottom: 10px;
}

.sol-card__sub {
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.92);
}

.sol-card .pill {
  align-self: flex-start;
}

/* Gradient fallbacks, used until the photographs are dropped in */
.sol-card.g1 {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(45deg, #122a47 0 10px, #16345a 10px 20px);
}

.sol-card.g2 {
  background: linear-gradient(160deg, #6e4ec9 0%, #2a2750 100%);
}

.sol-card.g3 {
  background: linear-gradient(160deg, #c2477e 0%, #2b1735 100%);
}

.sol-card.g4 {
  background: linear-gradient(160deg, #2dc1a0 0%, #14483d 100%);
}

/* Arrows sit just past the right edge of the centred active card */
.solutions__nav {
  display: flex;
  justify-content: flex-start;
  max-width: fit-content;
  gap: 12px;
  /* Öne çıkan kartın sağ kenarından sonraki boşluk. Kart aralığı (--sol-gap)
     kadar bırakınca oklar kartın köşesine yapışık görünüyordu. */
  --sol-nav-gap: 34px;
  /* Oklar öne çıkan kartın sağında durur; dar ekranda kartın sağında yer
     kalmayınca viewport'u taşırmasın diye kenar boşluğu içeride tutulur
     (o durumda şerit zaten kartların altına iniyor). */
  margin: 16px 0 0 min(calc((var(--sol-stage) + var(--sol-featured-w)) / 2 + var(--sol-nav-gap)),
      calc(var(--sol-stage) - var(--sol-pad) - 2 * 36px - 12px));
  position: relative;
  z-index: 9;
  pointer-events: none;
}

.solutions__nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
  pointer-events: auto;
}

.solutions__nav button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Respect users who ask for less motion: keep the state change, drop the slide */
@media (prefers-reduced-motion: reduce) {
  .solutions {
    --sol-speed: 0.01s;
  }
}

/* ----- Partners ----- */
.partners {
  padding: 40px 0;
}

.partners h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  margin: 0 0 22px;
}

/* Oklar track'in dışında: [prev] [swiper] [next] */
.partners__slider {
  display: flex;
  align-items: center;
  gap: 4px;
}

.partners-swiper {
  flex: 1;
  min-width: 0;
}

/* Swiper'ın varsayılan ok görünümü korunuyor, sadece akışa alınıyor */
.partners__arrow {
  position: static;
  margin-top: 0;
  flex-shrink: 0;
}

.partners-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.partners-swiper img {
  width: 100%;
  max-width: 140px;
  height: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.partners-swiper .swiper-slide:hover img {
  opacity: 1;
}

/* ----- Testimonial / CTA ----- */
.t-section {
  background: var(--paper-2);
  padding: 48px 0;
}

.t-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

.testimonial {
  background: white;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 8px 20px -16px rgba(14, 26, 43, 0.2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testimonial .name-mark {
  height: 28px;
  width: auto;
  align-self: flex-start;
}

.testimonial p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.testimonial .who {
  margin-top: auto;
}

.testimonial .who b {
  display: block;
  font-weight: 800;
}

.testimonial .who span {
  font-size: 13px;
  color: var(--muted);
}

.cta-card {
  border-radius: 22px;
  padding: 28px 22px;
  color: white;
  background:
    radial-gradient(120% 100% at 0% 100%, #4f2bd9 0%, transparent 60%),
    linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  justify-content: center;
}

.cta-card h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.01em;
}

.cta-card p {
  margin: 0;
  font-size: 13px;
  opacity: 0.92;
}

.cta-card .pill {
  align-self: center;
}

/* ----- Academy / posts ----- */
/* .posts bir Swiper: kart sayısı ve aralık index.html'deki
   postsSwiper ayarlarından gelir (mobil 1, tablet/masaüstü 3). */
.post {
  border-radius: 18px;
  background: white;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: auto;
  /* swiper-slide'ın %100 yüksekliği yerine içerik kadar; wrapper eşitler */
}

.post__img {
  height: 150px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.post__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post__body h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  color: var(--ink);
}

.post__body p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.posts__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.posts__nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.posts__nav button.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* Tüm kartlar sığıyorsa (watchOverflow) okları tamamen gizle */
.posts__nav:has(.swiper-button-lock) {
  display: none;
}

/* ----- Footer (full width, inner max-width via .wrap) ----- */
.foot {
  background: var(--ink);
  color: white;
  padding: 40px 0 32px;
  margin-top: 24px;
}

.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* mobil/tablet: marka bloğu üstte, menü altta */
  gap: 32px;
}

/* Menü kırılımları */
.foot__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 18px;
}

.foot .brand {
  display: inline-block;
}

.foot .brand img {
  width: 96px;
  height: auto;
}

.foot__col h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13px;
  color: var(--cyan);
  margin: 0 0 10px;
  font-weight: 700;
}

/* Menü sütunlarının altında tek satır: Kurumsal · İletişim · Destek · EN.
   .foot__menu içinde olduğu için Çözümler sütunuyla aynı hizadan başlar. */
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 600;
  color: #c8d0dc;
}

.foot__links a:hover {
  color: white;
}

.foot__col a {
  display: block;
  font-size: 12px;
  color: #c8d0dc;
  padding: 3px 0;
}

.foot .social {
  display: flex;
  gap: 12px;
  margin: 16px 0 22px;
}

.foot .social a {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.foot__addr {
  font-size: 12px;
  color: #c8d0dc;
  line-height: 1.6;
}

.foot__addr b {
  color: white;
}

/* Footer'ın en altındaki yasal şerit: telif + KVKK / çerez / gizlilik.
   .foot__grid'in dışında, bölümün tam genişliğinde durur. */
.foot__legal {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.foot__legal .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}

.foot__legal small {
  font-size: 12px;
  color: #8e99a9;
}

.foot__legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.foot__legal__links a {
  font-size: 12px;
  font-weight: 600;
  color: #c8d0dc;
}

.foot__legal__links a:hover {
  color: white;
}

/* =========================================================
   SUB-PAGE shell (Contact, About)
   ========================================================= */

/* Sub-pages reuse the exact shared header/footer markup from index.html.
   Since there is no hero behind the bar here, it flows in-page (sticky)
   instead of overlaying, and gets a hairline to separate it from content. */
.page .site-header {
  position: sticky;
  border-bottom: 1px solid var(--line);
}

/* Ana sayfa: header slider üzerinde sabit ve çizgisiz */
.page--home .site-header {
  position: fixed;
  border-bottom: 0;
}

.site-header .topnav__util a.is-active,
.site-header .topnav__nav a.is-active {
  color: var(--cyan-text);
}

/* Solid top nav for sub-pages (no transparent hero overlay) */
.subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
}

.subnav .topnav__nav a {
  transition: color 0.15s ease;
}

.subnav .topnav__nav a:hover,
.subnav .topnav__nav a.is-active {
  color: var(--cyan-deep);
}

/* Compact hero used on sub-pages */
.subhero {
  position: relative;
  padding: 56px 18px 60px;
  text-align: center;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(0, 181, 216, 0.1), transparent 70%),
    linear-gradient(180deg, #f7fbfd 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}

.subhero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cyan-text);
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid #cce9f1;
  background: white;
  border-radius: 999px;
  margin-bottom: 18px;
}

.subhero__eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta);
}

.subhero h1 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 16px;
  background: linear-gradient(120deg,
      var(--ink) 0%,
      var(--cyan-deep) 60%,
      var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subhero p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 14px;
  color: var(--ink-soft);
}

/* =========================================================
   CONTACT page
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

.contact-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: #cce9f1;
  box-shadow: 0 14px 28px -20px rgba(14, 26, 43, 0.18);
}

.contact-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-card .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card.k1 .ico {
  background: var(--card-yellow);
  color: #8a6b00;
}

.contact-card.k2 .ico {
  background: var(--card-blue);
  color: var(--cyan-deep);
}

.contact-card.k3 .ico {
  background: var(--card-pink);
  color: var(--magenta-deep);
}

.contact-card.k4 .ico {
  background: #e6e1ff;
  color: #4f2bd9;
}

.contact-card .ico svg {
  width: 20px;
  height: 20px;
}

.contact-card h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  color: var(--ink);
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.contact-card a.link {
  margin-top: auto;
  font-weight: 700;
  font-size: 15px;
  color: var(--cyan-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.contact-card a.link:hover {
  color: var(--magenta);
}

.contact-split {
  display: grid;
  /* minmax(0,…): 1fr'in min-content tabanı, uzun <option> metni olan
     <select> ve dosya alanlarında sütunu ekrandan taşıracak kadar
     genişletiyordu (destek formu, dar ekran). */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.form {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0;
}

.form .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Zorunlu alanlarda etikete kırmızı yıldız. İşaretleme değişmeden, alanın
   required özniteliğinden türetilir; ekran okuyucular zorunluluğu zaten
   required'dan bildirdiği için yıldız yalnızca görsel. */
.field:has(input[required], select[required], textarea[required])>label::after {
  content: " *";
  color: var(--magenta-deep);
  font-weight: 800;
}

/* Hata durumu main.js tarafından .is-invalid ile işaretlenir: kullanıcı
   alandan bir şey yazıp çıkınca ya da gönderim denemesinde. Boş form ilk
   açılışta kırmızıya boyanmaz. */
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select {
  border-color: var(--magenta-deep);
  background: #fff6f9;
}

.field.is-invalid input:focus,
.field.is-invalid textarea:focus,
.field.is-invalid select:focus {
  box-shadow: 0 0 0 4px rgba(225, 29, 103, 0.14);
}

.field input,
.field textarea,
.field select {
  font: inherit;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--cyan);
  background: white;
  box-shadow: 0 0 0 4px rgba(0, 181, 216, 0.12);
}

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

/* Alanın hemen altındaki uyarı (main.js › setFieldError). Gönderimde
   eksik alanların hepsi aynı anda işaretlenir. */
.field__error {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--magenta-deep);
}

/* Turnstile alanı: gömülü çerçeve yüklenene kadar yer tutar, yoksa
   düğmeler widget gelince aşağı zıplıyor. */
.cf-turnstile {
  min-height: 65px;
}

/* Gönderim koruması mesajı (main.js › GÖNDERİM KORUMASI) */
.form__error,
.form__note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.form__error {
  border: 1px solid rgba(225, 29, 103, 0.35);
  background: #fff6f9;
  color: var(--magenta-deep);
  font-weight: 600;
}

.form__note--warn {
  border: 1px solid rgba(255, 180, 34, 0.5);
  background: #fff9ec;
  color: #7a5200;
}

/* Form altındaki yasal bağlantılar */
.form .actions small a,
.demo-panel__body small a {
  color: var(--cyan-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form .actions small a:hover,
.demo-panel__body small a:hover {
  color: var(--ink);
}

.form .actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}

.form .actions small {
  color: var(--muted);
  font-size: 12px;
}

.form .actions .pill {
  justify-content: center;
}

/* Side panel with map + info */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.map {
  position: relative;
  flex: 1;
  min-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 50%,
      rgba(0, 181, 216, 0.18),
      transparent 70%),
    linear-gradient(135deg, #eaf3f8 0%, #d8e6ee 100%);
  border: 1px solid var(--line);
}

/* FAQ for contact (compact) */
.faq {
  display: grid;
  gap: 10px;
  margin-top: 48px;
}

.faq h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  text-align: center;
}

.faq-list {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

.faq-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--cyan-deep);
  transition: transform 0.2s;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   ABOUT page
   ========================================================= */

/* Story split */
.story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.story h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.story p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

/* Düz metin bloğu (ör. Hakkımızda > İnsan Kaynakları) */
.prose {
  max-width: 760px;
  margin: 0 auto;
}

.prose p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.prose p:last-child {
  margin-bottom: 0;
}

.story .quote {
  border-left: 3px solid var(--cyan);
  padding-left: 16px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin-top: 18px;
}

.story__art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
    repeating-linear-gradient(135deg, #1b2a44 0 14px, #243a5e 14px 28px);
}

.story__art .ph-label {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 3px 10px;
  border-radius: 6px;
}

.story__art .floating-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: white;
  color: var(--ink);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 18px 40px -22px rgba(14, 26, 43, 0.6);
}

.story__art .floating-badge .big {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--cyan-deep);
}

.story__art .floating-badge .lbl {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* Stats row */
.stats-row {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.stat-block {
  text-align: left;
  padding-right: 0;
  border-right: 0;
}

.stat-block:last-child {
  border-right: 0;
}

.stat-block .n {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.stat-block .n sup {
  font-size: 22px;
  color: var(--cyan);
  font-weight: 700;
}

.stat-block .l {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Values */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.value-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.value-card .num {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 40px;
  color: var(--paper-3);
  line-height: 1;
  letter-spacing: -0.02em;
}

.value-card h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.value-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.value-card.v1 {
  background: var(--card-yellow);
  border-color: transparent;
}

.value-card.v2 {
  background: var(--card-blue);
  border-color: transparent;
}

.value-card.v3 {
  background: var(--card-pink);
  border-color: transparent;
}

.value-card.v1 .num {
  color: rgba(0, 0, 0, 0.08);
}

.value-card.v2 .num {
  color: rgba(0, 0, 0, 0.08);
}

.value-card.v3 .num {
  color: rgba(0, 0, 0, 0.08);
}

/* Team grid */
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.team-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.team-card .ph {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(45deg, #1b2a44 0 12px, #243a5e 12px 24px);
  position: relative;
}

.team-card .ph-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
}

.team-card.t2 .ph {
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(45deg, #2a1b44 0 12px, #3e2459 12px 24px);
}

.team-card.t3 .ph {
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(45deg, #1b3f44 0 12px, #245e58 12px 24px);
}

.team-card.t4 .ph {
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(45deg, #443a1b 0 12px, #5e4a24 12px 24px);
}

.team-card .body {
  padding: 12px 14px 16px;
}

.team-card b {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  display: block;
  color: var(--ink);
}

.team-card span {
  font-size: 12px;
  color: var(--muted);
}

/* Timeline */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 16px 0;
}

.timeline::before {
  content: "";
  display: none;
  position: absolute;
  left: 4%;
  right: 4%;
  top: 70px;
  height: 2px;
  background: linear-gradient(90deg,
      var(--yellow),
      var(--cyan),
      var(--magenta));
  border-radius: 2px;
  z-index: 0;
}

.tl-step {
  position: relative;
  z-index: 1;
  padding-top: 48px;
}

.tl-step .year {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}

.tl-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: 14px;
  height: 14px;
  background: white;
  border: 3px solid var(--cyan);
  border-radius: 50%;
}

.tl-step h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
}

.tl-step p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* =========================================================
   TABLET — ≥ 641px
   ========================================================= */
@media (min-width: 641px) {
  .wrap {
    padding: 0 24px;
  }

  /* Oval: geniş ekranda daha yayvan kavis (mobilde %300 / -%100) */
  .hero-oval:before {
    width: 200%;
    left: -50%;
  }

  /* header */
  .site-header {
    --header-pad: 24px;
    --header-pad-y: 14px;
  }

  .topnav__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .hamburger {
    display: none;
  }

  .brand {
    font-size: 24px;
  }

  .pill {
    height: 44px;
    padding: 0 22px;
    font-size: 14px;
  }

  .section {
    padding: 64px 0;
  }

  .section-title {
    font-size: 28px;
    margin-bottom: 32px;
  }

  .eyebrow {
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.5;
    padding: 0;
  }

  /* hero */
  .hero {
    --hero-height: 560px;
    --hero-top-gap: 20px;
  }

  /* products */
  .products {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .product-card {
    padding: 28px 18px 26px;
    min-height: 200px;
  }

  .product-card__logo {
    font-size: 24px;
  }

  .product-card__logo .pad {
    font-size: 18px;
  }

  .product-card__copy {
    font-size: 12px;
    max-width: 270px;
  }

  /* dashboard */
  .preview {
    padding: 0 16px;
  }

  .dash {
    grid-template-columns: 140px 1fr;
    min-height: 320px;
  }

  .dash__side {
    display: block;
  }

  .dash__main {
    padding: 16px;
    gap: 14px;
  }

  .dash__stats {
    gap: 6px;
  }

  .stat {
    padding: 10px 12px;
  }

  .stat .n {
    font-size: 18px;
  }

  .stat .l {
    font-size: 9px;
  }

  .dash__row {
    grid-template-columns: 1fr 1fr;
  }

  .panel {
    padding: 12px;
  }

  .donut {
    width: 90px;
    height: 90px;
  }

  .donut::before {
    width: 56px;
    height: 56px;
    font-size: 14px;
  }

  .table .tr {
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 6px;
    font-size: 10px;
  }

  .table .tr> :nth-child(4),
  .table .tr> :nth-child(5),
  .table .tr> :nth-child(6) {
    display: revert;
  }

  .preview__bar span {
    font-size: 11px;
  }

  /* promo */
  .promo {
    margin: -36px 24px 0;
    max-width: 100%;
    border-radius: 18px;
  }

  .promo>div {
    padding: 18px 22px;
  }

  .promo h2 {
    font-size: 14px;
  }

  /* solutions */
  .solutions {
    --sol-gap: 16px;
    --sol-pad: 24px;
    --sol-card-w: 250px;
    --sol-card-h: 320px;
    --sol-featured-w: 430px;
    --sol-featured-h: 380px;
    --sol-radius: 24px;
    padding: 64px 0 44px;
    margin: 48px 0 0;
  }

  .solutions .section-title {
    margin-bottom: 40px;
  }

  /* Oklar tablet ve masaüstünde kart şeridinin sağına taşınır; telefonda
     olduğu gibi kartların altında kalır.

     Konum translateX yerine sol boşluğa yazılıyor: sabit bir itme, kart
     boyları sabit olan tablette ve dar masaüstünde (1025-1400px) okları
     ekranın dışına taşırıp yatay kaydırma açıyordu. Aynı min() sınırı
     hem istenen konumu hem de sağ kenar payını koruyor:
       1. terim → öne çıkan kartın sağı + boşluk + itme (42px = çiftin yarısı)
       2. terim → şeridin sağ kenarından --sol-pad kadar içeride son konum */
  .solutions__nav {
    margin-top: -40px;
  }

  .sol-card {
    padding: 26px;
  }

  .sol-card.is-active {
    padding: 28px 30px 32px;
  }

  .sol-card h3 {
    font-size: 22px;
  }

  .sol-card.is-active h3 {
    font-size: 24px;
  }

  .sol-card__logo {
    width: 140px;
    margin-bottom: 12px;
  }

  .sol-card__sub {
    font-size: 13px;
  }

  /* partners */
  .partners {
    padding: 48px 0;
  }

  .partners h2 {
    font-size: 22px;
    margin-bottom: 28px;
  }



  /* testimonial / cta */
  .t-section {
    padding: 64px 0;
  }

  .t-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 8px;
  }

  .testimonial {
    padding: 24px;
    gap: 18px;
  }

  .cta-card {
    padding: 28px 24px;
  }

  .cta-card h3 {
    font-size: 24px;
  }

  .cta-card p {
    font-size: 14px;
  }

  /* academy */
  .post__img {
    height: 130px;
  }

  .post__body {
    padding: 16px 16px 20px;
  }

  .post__body h3 {
    font-size: 15px;
  }

  .post__body p {
    font-size: 12px;
  }

  /* footer */
  .foot {
    padding: 48px 0 36px;
  }

  .foot__cols {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
  }

  .foot__col h2 {
    font-size: 14px;
    margin-bottom: 14px;
  }

  .foot__col a {
    font-size: 13px;
    padding: 4px 0;
  }

  .foot__addr {
    line-height: 1.7;
  }

  /* sub-pages */
  .subnav {
    padding: 14px 24px;
  }

  .subnav .topnav__right {
    gap: 6px;
  }

  .subhero {
    padding: 64px 24px 72px;
  }

  .subhero h1 {
    font-size: 48px;
  }

  .subhero p {
    font-size: 15px;
  }

  .subhero__eyebrow {
    font-size: 14px;
  }

  /* contact */
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 40px;
  }

  .form {
    padding: 28px;
    gap: 18px;
  }

  .form h2 {
    font-size: 22px;
  }

  .form .row {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .form .actions {
    flex-direction: row;
    align-items: center;
  }

  .map {
    min-height: 320px;
  }

  .faq h2 {
    font-size: 24px;
  }

  .faq-item {
    padding: 18px 22px;
  }

  .faq-item summary {
    font-size: 16px;
  }

  /* about */
  .story h2 {
    font-size: 28px;
  }

  .story p {
    font-size: 15px;
  }

  .story__art .floating-badge {
    padding: 14px 18px;
    bottom: 22px;
    left: 22px;
  }

  .story__art .floating-badge .big {
    font-size: 28px;
  }

  .stats-row {
    padding: 28px 24px;
    gap: 24px;
  }

  .stat-block .n {
    font-size: 44px;
  }

  .values {
    grid-template-columns: 1fr 1fr;
  }

  .value-card {
    padding: 28px 26px;
  }

  .value-card .num {
    font-size: 50px;
  }

  .team-card .body {
    padding: 16px 18px 20px;
  }

  .timeline {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 32px 0;
  }

  .tl-step {
    padding-top: 60px;
  }

  .tl-step::after {
    top: 38px;
  }

  .tl-step .year {
    font-size: 22px;
  }
}

/* =========================================================
   DESKTOP — ≥ 1025px
   ========================================================= */
@media (min-width: 1025px) {
  .wrap {
    padding: 0 32px;
  }

  /* header */
  .site-header {
    --header-pad: 32px;
    --header-pad-y: 12px;
  }

  .topnav__util {
    gap: 22px;
    font-size: 14px;
  }

  .topnav__nav {
    --nav-pad: 16px;
    font-size: 16px;
  }

  .brand {
    font-size: 28px;
  }

  .section {
    padding: 40px 0;
  }

  .section-title {
    font-size: 36px;
    margin-bottom: 48px;
  }

  .eyebrow {
    font-size: 32px;
    margin-bottom: 40px;
  }

  /* hero */
  .hero {
    --hero-height: 640px;
  }

  /* products */
  .products {
    gap: 28px;
  }

  .product-card {
    padding: 38px 28px 36px;
    min-height: 230px;
  }

  .product-card__logo {
    font-size: 30px;
  }

  .product-card__logo .pad {
    font-size: 22px;
  }

  .product-card__copy {
    font-size: 14px;
  }

  /* dashboard */
  .preview {
    max-width: 980px;
  }

  .dash {
    grid-template-columns: 180px 1fr;
    min-height: 360px;
  }

  .dash__stats {
    gap: 10px;
  }

  .stat .n {
    font-size: 22px;
  }

  .stat .l {
    font-size: 10px;
  }

  .donut {
    width: 110px;
    height: 110px;
  }

  .donut::before {
    width: 70px;
    height: 70px;
    font-size: 16px;
  }

  /* promo */
  .promo {
    grid-template-columns: 1fr 1fr;
    margin: -52px auto 0;
    max-width: 920px;
  }

  .promo>div {
    padding: 22px 28px;
  }

  /* solutions
     Narrow card is ~17% of the stage; the featured width is whatever is left
     once one and a half narrow cards fit on each side. Heights are the
     _temp/hizmet-cozum.png ratios, cut 25% then raised 15%
     (1.35 -> 1.164, 0.73 -> 0.6296). */
  .solutions {
    --sol-gap: 24px;
    --sol-pad: 32px;
    --sol-card-w: min(calc(var(--sol-stage) * 0.17), 340px);
    --sol-card-h: calc(var(--sol-card-w) * 1.164);
    --sol-featured-w: min(calc(var(--sol-stage) - 3 * var(--sol-card-w) - 4 * var(--sol-gap)),
        900px);
    --sol-featured-h: calc(var(--sol-featured-w) * 0.6296);
    padding: 80px 0 56px;
    margin: 64px 0 0;
  }

  .solutions .section-title {
    font-size: 38px;
    margin-bottom: 64px;
  }

  /* Alt boşluk yanlardan biraz daha geniş. Yüzde değil vw: yüzde padding,
     kartın değil track'in genişliğine göre çözülürdü. */
  .sol-card.is-active {
    padding: clamp(26px, 2.88vw, 56px);
    padding-bottom: clamp(30px, 3.4vw, 66px);
  }

  .sol-card h3 {
    font-size: 25px;
  }

  .sol-card.is-active h3 {
    font-size: 30px;
  }

  .sol-card__logo {
    width: clamp(110px, 7vw, 140px);
    margin-bottom: 14px;
  }

  .sol-card__sub {
    font-size: 14px;
  }

  /* partners */
  .partners {
    padding: 56px 0;
  }

  .partners h2 {
    font-size: 26px;
    margin-bottom: 36px;
  }




  /* testimonial / cta */
  .t-section {
    padding: 88px 0;
  }

  .t-grid {
    gap: 24px;
    padding: 0;
  }

  .testimonial {
    padding: 32px;
  }

  .testimonial .name-mark {
    height: 32px;
    align-self: flex-start;
  }

  .testimonial p {
    font-size: 14px;
  }

  .cta-card {
    padding: 36px 32px;
  }

  .cta-card h3 {
    font-size: 30px;
  }

  /* academy */
  .post__img {
    height: 170px;
  }

  .post__body {
    padding: 22px 22px 26px;
  }

  .post__body h3 {
    font-size: 18px;
  }

  .post__body p {
    font-size: 13px;
  }

  /* footer */
  .foot {
    padding: 56px 0 40px;
  }

  /* Masaüstü: sol sütun logo + adres, sağ sütun menü */
  .foot__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 4fr);
    gap: 32px;
  }

  .foot__cols {
    gap: 32px;
  }

  .foot .brand img {
    width: 112px;
  }

  .foot__addr {
    font-size: 13px;
  }

  /* sub-pages */
  .subnav {
    padding: 18px 48px;
  }

  .subhero {
    padding: 88px 24px 96px;
  }

  .subhero h1 {
    font-size: 64px;
  }

  .subhero p {
    font-size: 16px;
  }

  /* contact */
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 56px;
  }

  .contact-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 36px;
  }

  .form {
    padding: 36px;
  }

  .form h2 {
    font-size: 26px;
  }

  .map {
    min-height: 280px;
  }

  .faq {
    margin-top: 64px;
  }

  .faq h2 {
    font-size: 28px;
  }

  /* about */
  .story {
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
  }

  .story h2 {
    font-size: 36px;
  }

  .stats-row {
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 32px;
  }

  .stat-block {
    padding-right: 16px;
    border-right: 1px solid var(--line);
  }

  .stat-block:last-child {
    border-right: 0;
  }

  .stat-block .n {
    font-size: 56px;
  }

  .values {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .team {
    grid-template-columns: repeat(4, 1fr);
  }

  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .timeline::before {
    display: block;
  }

  .tl-step {
    padding-top: 90px;
  }

  .tl-step::after {
    top: 64px;
  }

  .tl-step .year {
    font-size: 28px;
  }
}

@media (min-width: 1600px) {
  .hero {
    --hero-height: 800px;
  }
}

/* =========================================================
   PRODUCT PAGE — talia-*.html ürün sayfası şablonu
   Yan menü + içerik; mobilde yan menü yatay kaydırılabilir şerit olur.
   ========================================================= */
.product-hero {
  padding: 40px 0 44px;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(0, 181, 216, 0.1), transparent 70%),
    linear-gradient(180deg, #f7fbfd 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}

.product-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.product-hero__logo {
  height: 40px;
  width: auto;
  margin-bottom: 18px;
}

.product-hero h1 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--ink);
}

.product-hero p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 560px;
}

.product-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-hero__cta--center {
  justify-content: center;
}

.product-hero__art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
    repeating-linear-gradient(135deg, #1b2a44 0 14px, #243a5e 14px 28px);
}

.product-hero__art .ph-label,
.product-diagram .ph-label,
.product-shot .ph-label {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 3px 10px;
  border-radius: 6px;
}

.product-hero__art .floating-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: white;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 12px 30px -18px rgba(14, 26, 43, 0.5);
}

.product-hero__art .floating-badge .big {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--cyan-deep);
}

.product-hero__art .floating-badge .lbl {
  font-size: 12px;
  color: var(--muted);
}

/* ----- Layout: yan menü + içerik ----- */
.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 40px;
  padding-top: 0;
}

/* Mobil / tablet: header altına yapışan çubuk; dokununca liste açılır
   (hamburger menüye benzer). Açma düğmesi product.js tarafından eklenir. */
.product-side__sentinel {
  grid-column: 1 / -1;
  /* grid hücresi işgal etmesin */
  height: 1px;
  margin-bottom: -1px;
}

/* Çubuk header'a yapışınca dekoratif oval çubuğun üstüne binmesin */
@media (max-width: 1024px) {
  .page:has(.product-side.is-stuck) .oval-bottom {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
}

.product-side {
  position: sticky;
  top: var(--header-h, 88px);
  z-index: 5;
  min-width: 0;
  margin: 0 -18px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.product-side__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}

.product-side__toggle small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.product-side__toggle::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.product-side.is-open .product-side__toggle::after {
  transform: translateY(2px) rotate(225deg);
}

.product-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  flex-direction: column;
  padding: 4px 18px 18px;
  background: white;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 32px -24px rgba(14, 26, 43, 0.45);
}

.product-side.is-open .product-nav {
  display: flex;
}

.product-nav a {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.product-nav a:hover {
  color: var(--ink);
}

.product-nav a.is-active {
  color: var(--cyan-deep);
}

.product-nav .product-side__cta {
  align-self: flex-start;
  margin-top: 16px;
  padding: 0 18px;
  border-bottom: 0;
  color: white;
}

.product-main {
  min-width: 0;
}

/* ----- Bölümler ----- */
.product-section {
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h, 88px) + 64px);
}

.product-section:last-child,
.product-section--cta {
  border-bottom: 0;
}

.product-section h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}

.product-section .product-section__sub {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 32px 0 14px;
  color: var(--ink);
}

.product-section h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 6px;
  color: var(--ink);
}

.product-section p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.product-section .lead {
  font-size: 15px;
  margin-bottom: 22px;
}

.product-section .muted {
  color: var(--muted);
}

.product-section .muted a {
  color: var(--cyan-deep);
  font-weight: 600;
}

/* Genel bakış: değer önerisi */
.product-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.product-highlight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}

.product-highlight b {
  font-size: 14px;
  color: var(--ink);
}

.product-highlight span,
.product-scenario span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.product-problems {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Nasıl çalışır: adım akışı */
.product-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  counter-reset: step;
}

.product-flow li {
  position: relative;
  padding: 18px 18px 18px 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.product-flow__num {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: white;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);
}

.product-flow li p {
  font-size: 13px;
}

.product-scenarios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.product-scenario {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--card-blue);
}

.product-scenario b {
  font-size: 14px;
  color: var(--ink);
}

/* Özellikler */
.product-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.product-features li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 16px 44px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: white;
}

.product-features li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 4px var(--card-pink);
}

.product-features b {
  font-size: 14px;
  color: var(--ink);
}

.product-features span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Kullanım senaryoları */
.product-cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.product-case {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--paper-2);
}

.product-case p {
  font-size: 13px;
}

.product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-chips span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.product-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 32px;
}

.product-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.product-checks li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.product-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--cyan-deep);
  border-bottom: 2px solid var(--cyan-deep);
  transform: rotate(-45deg);
}

/* Mimari */
.product-diagram {
  position: relative;
  min-height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  color: white;
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
    repeating-linear-gradient(135deg, #1b2a44 0 14px, #243a5e 14px 28px);
}

.product-diagram__flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.product-diagram__flow span {
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.product-diagram__flow span:nth-child(3) {
  background: var(--cyan-deep);
  border-color: transparent;
}

.product-diagram__flow i {
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}

/* Ekran görüntüleri */
.product-shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.product-shots figure {
  margin: 0;
}

.product-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.product-shot:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px rgba(14, 26, 43, 0.5);
}

/* Alt sayfa hero'su: sadece başlık ve kısa açıklama */
.product-hero--compact {
  padding: 32px 0 36px;
}

.product-hero--compact h1 {
  font-size: 28px;
}

.product-hero--compact p {
  margin-bottom: 0;
}

.product-hero__back {
  display: inline-block;
}

/* ----- Lightbox (ekran görüntüsü büyütme) ----- */
html.lightbox-open,
html.lightbox-open body {
  overflow: hidden;
}

.lightbox[hidden] {
  display: none;
  /* .lightbox'ın display:flex'i UA [hidden] kuralını ezmesin */
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 24px;
  background: rgba(14, 26, 43, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  text-align: center;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  background: var(--ink);
}

.lightbox__caption {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 26px;
  line-height: 1;
  transition: background 0.15s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__close {
  top: 12px;
  right: 12px;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: 8px;
}

.lightbox__next {
  right: 8px;
}

@media (min-width: 641px) {
  .lightbox {
    padding: 64px 72px 32px;
  }

  .lightbox__nav {
    width: 48px;
    height: 48px;
    font-size: 32px;
  }

  .lightbox__prev {
    left: 16px;
  }

  .lightbox__next {
    right: 16px;
  }
}

.product-shots figcaption {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Dokümanlar: her doküman bir satır; tür rozeti dosya biçimine göre renklenir */
.product-docs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.product-doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: white;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.product-doc:hover {
  border-color: var(--cyan);
  transform: translateY(-1px);
}

.product-doc__type {
  flex: none;
  min-width: 48px;
  height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--doc-bg, var(--paper-2));
  color: var(--doc-fg, var(--ink-soft));
}

.product-doc__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-doc__body b {
  font-size: 14px;
  color: var(--ink);
}

.product-doc__body small {
  font-size: 12px;
  color: var(--muted);
}

.product-doc__dl {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan-deep);
}

.product-doc__dl::after {
  content: " ↓";
}

.product-doc--pdf {
  --doc-bg: #fee4e2;
  --doc-fg: #d92d20;
}

.product-doc--word {
  --doc-bg: #dbeafe;
  --doc-fg: #1d4ed8;
}

.product-doc--excel {
  --doc-bg: #dcfce7;
  --doc-fg: #15803d;
}

.product-doc--ppt {
  --doc-bg: #ffedd5;
  --doc-fg: #c2410c;
}

.product-doc--zip {
  --doc-bg: var(--paper-3);
  --doc-fg: var(--ink-soft);
}

/* SSS ve CTA */
.product-section .faq-list {
  max-width: none;
}

.product-section--cta .cta-card p {
  color: rgba(255, 255, 255, 0.85);
}

.product-section--cta .cta-card h3 {
  margin: 0;
  font-size: 26px;
}

@media (min-width: 641px) {
  .product-hero {
    padding: 56px 0 60px;
  }

  .product-hero h1 {
    font-size: 40px;
  }

  .product-highlights,
  .product-problems,
  .product-cases,
  .product-features,
  .product-shots,
  .product-scenarios,
  .product-two {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-flow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .product-hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }

  .product-hero h1 {
    font-size: 46px;
  }

  .product-hero--compact h1 {
    font-size: 34px;
  }

  .product-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    padding-top: 8px;
  }

  /* Masaüstü: yapışkan dikey liste, açma düğmesi gizli */
  .product-side {
    align-self: start;
    top: calc(var(--header-h, 88px) + 24px);
    margin: 0;
    padding: 40px 0 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }

  .product-side__toggle {
    display: none;
  }

  .product-nav,
  .product-side.is-open .product-nav {
    display: flex;
    position: static;
    padding: 0;
    gap: 2px;
    background: none;
    border-bottom: 0;
    border-left: 1px solid var(--line);
    box-shadow: none;
  }

  .product-nav a {
    border-radius: 0 10px 10px 0;
    padding: 9px 14px;
    font-size: 13px;
    margin-left: -1px;
    border-bottom: 0;
    border-left: 2px solid transparent;
  }

  .product-nav a.is-active {
    border-left-color: var(--cyan-deep);
  }

  .product-nav .product-side__cta {
    align-self: stretch;
    justify-content: center;
    margin: 22px 0 0 14px;
    padding: 0 16px;
    border-left: 0;
    border-radius: 999px;
  }

  .product-section {
    padding: 48px 0;
    scroll-margin-top: calc(var(--header-h, 88px) + 8px);
  }

  .product-highlights,
  .product-problems,
  .product-cases {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-cases {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-flow {
    grid-template-columns: repeat(4, 1fr);
  }

  .product-flow li {
    padding: 64px 18px 18px;
  }

  .product-flow__num {
    left: 18px;
    top: 18px;
  }

  .product-shots {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* =========================================================
   DEMO PANEL — sağdan açılan demo talep formu (product.js üretir)
   ========================================================= */
html.demo-open,
html.demo-open body {
  overflow: hidden;
}

.demo-panel[hidden],
.demo-panel__form[hidden],
.demo-panel__done[hidden] {
  display: none;
  /* display:flex kuralları UA [hidden]'ı ezmesin */
}

.demo-panel {
  position: fixed;
  inset: 0;
  z-index: 110;
}

.demo-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 26, 43, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.demo-panel__box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: -24px 0 48px -24px rgba(14, 26, 43, 0.5);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.demo-panel.is-open .demo-panel__backdrop {
  opacity: 1;
}

.demo-panel.is-open .demo-panel__box {
  transform: none;
}

.demo-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
}

.demo-panel__head h3,
.demo-panel__done h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}

.demo-panel__head p,
.demo-panel__done p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.demo-panel__close {
  flex: none;
  width: 36px;
  height: 36px;
  margin: -6px -8px 0 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  background: var(--paper-2);
}

.demo-panel__close:hover {
  background: var(--paper-3);
}

.demo-panel__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.demo-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-panel__body .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.demo-panel__body small {
  font-size: 12px;
  color: var(--muted);
}

/* Alt çubuk: kaydırmadan bağımsız, hep görünür */
.demo-panel__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: white;
}

.demo-panel__done {
  padding: 40px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.demo-panel__done .pill {
  margin-top: 12px;
}

@media (min-width: 641px) {
  .demo-panel__box {
    width: min(600px, 100%);
  }

  .demo-panel__body .row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1025px) {
  .demo-panel__box {
    width: 680px;
  }

  .demo-panel__head,
  .demo-panel__body,
  .demo-panel__foot {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .demo-panel__backdrop,
  .demo-panel__box {
    transition: none;
  }
}

/* =========================================================
   SOLUTION PAGE — çözüm sayfası ekleri (ürün sayfası şablonunu kullanır)
   ========================================================= */
.solution-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-deep);
}

.product-hero--solution h1,
.product-hero .product-hero__copy h1 {
  max-width: 640px;
}

/* Bileşen kartları */
.solution-components {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.solution-component {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.solution-component img {
  height: 32px;
  width: auto;
  align-self: flex-start;
}

.solution-component h3 {
  margin: 4px 0 0;
}

.solution-component p {
  font-size: 13px;
  flex: 1 1 auto;
}

.solution-component__tag {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--card-yellow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.solution-component--service {
  background: var(--paper-2);
  border-color: transparent;
}

.solution-component__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan-deep);
}

/* Yedi adımlı süreç: daha sıkı kartlar */
.product-flow--compact li {
  padding: 16px 16px 16px 60px;
}

.product-flow--compact li p {
  font-size: 12px;
}

/* İlgili içerikler */
.solution-posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.solution-posts .post__img {
  height: 140px;
}

.solution-more {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
}

.solution-more a {
  color: var(--cyan-text);
}

@media (min-width: 641px) {

  .solution-components,
  .solution-posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1025px) {
  .product-flow--compact {
    grid-template-columns: repeat(4, 1fr);
  }

  .product-flow--compact li {
    padding: 60px 16px 16px;
  }
}

/* =========================================================
   SHARE — paylaş düğmesi ve açılır kanal listesi (product.js üretir)
   ========================================================= */
.share {
  position: relative;
}

.share__btn svg {
  flex: none;
}

.share__menu[hidden],
.share__backdrop[hidden],
.share__head {
  display: none;
}

.share__backdrop {
  display: none;
}

@media (max-width: 640px) {
  .share__backdrop:not([hidden]) {
    display: block;
  }
}

.share__backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(6, 11, 20, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.share__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: 0 24px 48px -24px rgba(14, 26, 43, 0.45);
}

.share__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}

.share__item:hover {
  background: var(--paper-2);
}

.share__badge {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: white;
  background: var(--ink-soft);
}

.share__item--linkedin .share__badge {
  background: #0a66c2;
}

.share__item--x .share__badge {
  background: #000000;
}

.share__item--whatsapp .share__badge {
  background: #25d366;
}

.share__item--email .share__badge {
  background: var(--cyan-deep);
}

.share__copy .share__badge,
.share__native .share__badge {
  background: var(--paper-3);
  color: var(--ink);
}

.product-hero__cta--center .share__menu {
  left: auto;
  right: 0;
}

/* =========================================================
   SECTION KIT — renkli/dinamik iç sayfa bileşenleri
   Ürün, çözüm, açık kaynak vb. tüm iç sayfalarda kullanılabilir.
   Kartların rengi `--tone` (tek renk) ya da `--from`/`--to`
   (degrade) değişkenleriyle satır içinde verilir.
   Davranışlar: /assets/js/main.js (reveal, sayaç, tabset, jumpnav)
   ========================================================= */

:root {
  --violet: #6d5cff;
  --violet-deep: #4c37e0;
  --green: #12c48b;
  --green-deep: #0a8f66;
  --amber: #ffb422;
  --night: #0a1120;
  /* Açık zeminde metin için AA'yı geçen koyu varyantlar (normal metin 4.5:1) */
  --cyan-text: #06718a;
  --violet-text: #4b3fd4;
  --shadow-soft: 0 18px 40px -26px rgba(11, 20, 36, 0.55);
  --shadow-deep: 0 30px 70px -40px rgba(11, 20, 36, 0.7);
}

/* ----- Bölüm iskeleti ----- */
.sec {
  position: relative;
  padding: 52px 0;
}

.sec--tint {
  background:
    radial-gradient(70% 60% at 8% 0%, rgba(109, 92, 255, 0.08), transparent 60%),
    radial-gradient(60% 60% at 95% 20%, rgba(0, 181, 216, 0.1), transparent 60%),
    linear-gradient(180deg, #f8fbfd 0%, #ffffff 100%);
}

.sec--dark {
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(109, 92, 255, 0.35), transparent 60%),
    radial-gradient(60% 80% at 90% 100%, rgba(0, 181, 216, 0.28), transparent 60%),
    var(--night);
  color: #e8eef7;
}

.sec-head {
  margin: 0 0 28px;
}

.sec-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sec-head h2 {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sec--dark .sec-head h2 {
  color: #fff;
}

.sec-head p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.sec--dark .sec-head p {
  color: rgba(232, 238, 247, 0.75);
}

/* Bölüm etiketi (chip). Bölüm başlığını tekrar etmek için değil,
   bölümü sınıflandırmak için kullanılır. */
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: rgba(0, 181, 216, 0.1);
  color: var(--cyan-text);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sec-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(0, 181, 216, 0.18);
}

.sec-eyebrow--violet {
  background: rgba(109, 92, 255, 0.12);
  color: color-mix(in srgb, var(--violet) 50%, var(--ink));
}

.sec-eyebrow--magenta {
  background: rgba(255, 61, 127, 0.12);
  color: color-mix(in srgb, var(--magenta) 50%, var(--ink));
}

.sec-eyebrow--green {
  background: rgba(18, 196, 139, 0.14);
  color: color-mix(in srgb, var(--green) 50%, var(--ink));
}

/* Koyu zeminler (koyu bölüm ve hero) için okunur varyant */
.sec--dark .sec-eyebrow,
.page-hero .sec-eyebrow {
  background: rgba(255, 255, 255, 0.1);
  color: #7ee7ff;
}

/* Başlık içinde tek bir kelimeyi degrade renklendirmek için */
.txt-grad {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 55%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   PAGE HERO — koyu, hareketli iç sayfa banner'ı
   ========================================================= */
.page-hero {
  position: relative;
  /* overflow:hidden YOK — paylaş menüsü gibi açılır kutular hero dışına
     taşabilmeli. Dekoratif katmanlar .page-hero__bg içinde kırpılıyor.
     z-index, yapışkan .jumpnav (12) üzerinde kalsın diye 13. */
  z-index: 13;
  padding: 44px 0 56px;
  background:
    radial-gradient(70% 70% at 12% 10%, rgba(109, 92, 255, 0.5), transparent 62%),
    radial-gradient(60% 70% at 88% 0%, rgba(0, 181, 216, 0.42), transparent 60%),
    radial-gradient(50% 60% at 70% 100%, rgba(255, 61, 127, 0.3), transparent 62%),
    linear-gradient(170deg, #0d1730 0%, #0a1120 60%, #070d18 100%);
  color: #fff;
}

/* Aura ve grid dokusu burada kırpılır; hero'nun kendisi kırpmaz. */
.page-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-hero--compact {
  padding: 36px 0 40px;
}

/* Hareketli ışık lekeleri */
.page-hero__aura {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(28% 34% at 20% 30%, rgba(0, 181, 216, 0.5), transparent 70%),
    radial-gradient(26% 30% at 78% 22%, rgba(109, 92, 255, 0.55), transparent 70%),
    radial-gradient(24% 28% at 55% 85%, rgba(255, 61, 127, 0.4), transparent 70%);
  filter: blur(10px);
  animation: hero-aura 18s ease-in-out infinite alternate;
}

@keyframes hero-aura {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }

  50% {
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }

  100% {
    transform: translate3d(-2%, 4%, 0) scale(1.03);
  }
}

/* İnce teknik grid dokusu */
.page-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(75% 65% at 50% 35%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 35%, #000 0%, transparent 78%);
}

.page-hero__inner {
  position: relative;
  display: grid;
  gap: 32px;
  align-items: center;
}

.page-hero__logo {
  height: 38px;
  width: auto;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}

/* Beyaza boyama, dolgulu rozeti olan logolarda (ör. TaliaDomain) rozeti
   düz beyaz bloğa çeviriyor. Bu logolar kendi renkleriyle kalır. */
.page-hero__logo--brand {
  filter: none;
}

.page-hero--compact .page-hero__logo {
  height: 30px;
  margin-bottom: 14px;
  transition: opacity 0.15s ease;
}

.page-hero--compact a:hover .page-hero__logo {
  opacity: 0.75;
}

.page-hero h1 {
  margin: 0 0 16px;
  font-weight: 800;
  font-size: clamp(30px, 6.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.page-hero--compact h1 {
  font-size: clamp(26px, 5vw, 34px);
  margin-bottom: 10px;
}

.page-hero__lead {
  margin: 0 0 24px;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(232, 238, 247, 0.78);
}

.page-hero--compact .page-hero__lead {
  margin-bottom: 18px;
  font-size: 14px;
}

.page-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Koyu zeminde hayalet düğme ve paylaş menüsü */
.page-hero .pill-ghost,
.page-hero .share__btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.page-hero .pill-ghost:hover,
.page-hero .share__btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.page-hero .share__menu {
  color: var(--text);
}

.page-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.page-hero__stat b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #7ee7ff, #b7a8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-hero__stat span {
  font-size: 11.5px;
  color: rgba(232, 238, 247, 0.6);
}

/* ----- Hero görseli: cam panel içinde şema -----
   İçindeki SVG sayfaya özeldir; çerçeve, başlık ve lejant ortaktır. */
.hero-panel {
  position: relative;
  overflow: hidden;
  padding: 22px 18px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-deep);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 238, 247, 0.55);
}

.hero-panel__title i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(18, 196, 139, 0.2);
  animation: hero-panel-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-panel-pulse {
  50% {
    box-shadow: 0 0 0 9px rgba(18, 196, 139, 0);
  }
}

.hero-panel svg {
  width: 100%;
  height: auto;
}

.hero-panel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.hero-panel__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(232, 238, 247, 0.85);
}

.hero-panel__legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* =========================================================
   JUMPNAV — yapışkan sayfa/bölüm şeridi
   Tek satır iki eşit yarıya bölünür:
     SOL  .jumpnav__pages    → kardeş sayfalar (mobilde açılır menü)
     SAĞ  .jumpnav__sections → bölüm bağlantıları (#id), kaydırılabilir
   Aktif bölüm ve kaydırma davranışı main.js tarafından yürütülür.
   ========================================================= */
.jumpnav {
  position: sticky;
  /* Yapışınca header altındaki dekoratif ovalin (--oval-drop) hemen altına
     oturur. Arada kalan o kadarlık şerit ::before ile çubuğun kendi
     zeminiyle doldurulur; böylece içerik oradan görünmez ve çubuğun
     akıştaki yüksekliği hiç değişmez (yapışma anında zıplama olmaz). */
  top: calc(var(--header-h, 88px) + var(--oval-drop, 28px));
  z-index: 12;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.jumpnav.is-stuck::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--oval-drop, 28px) * -1);
  height: var(--oval-drop, 28px);
  background: inherit;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Doldurulan şeritle çubuk arasında çizgi görünmesin */
.jumpnav.is-stuck {
  border-top-color: transparent;
}

.jumpnav__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ----- SOL: kardeş sayfalar ----- */
.jumpnav__pages {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
}

/* Açılır menü düğmesi yalnızca dar ekranda görünür */
.jumpnav__toggle {
  display: none;
}

.jumpnav__pagelist {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jumpnav__pagelist a {
  flex: none;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.jumpnav__pagelist a:hover {
  background: var(--paper-2);
}

.jumpnav__pagelist a.is-active,
.jumpnav__pagelist a.is-active:hover {
  color: #fff;
  background: linear-gradient(100deg, var(--cyan-text), var(--violet-text));
}

/* Şeridin sağ ucundaki eylem grubu: paylaş + demo/görüşme düğmesi */
.jumpnav__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
}

/* Şeritteki düğmeler .jumpnav a kuralından etkilenmesin. Renk yalnızca
   dolgulu düğmeye verilir; paylaş düğmesi (.pill-ghost) kendi rengini korur. */
.jumpnav .pill {
  flex: none;
  height: 34px;
  font-weight: 600;
}

.jumpnav .pill-magenta,
.jumpnav .pill-magenta:hover {
  color: #fff;
}

.jumpnav .pill-magenta:hover {
  background: var(--magenta-deep);
}

.jumpnav__pagelist .pill {
  margin-left: 4px;
}

/* ----- SAĞ: bölüm bağlantıları ----- */
.jumpnav__sections {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 50%;
  min-width: 0;
  justify-content: flex-end;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}

/* Kardeş sayfa grubu olmayan sayfalarda şerit satırı tek başına kullanır */
.jumpnav__sections--solo {
  flex: 1 1 auto;
  justify-content: flex-start;
  border-left: 0;
  padding-left: 0;
}

.jumpnav__strip {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.jumpnav__strip::-webkit-scrollbar {
  display: none;
}

.jumpnav__strip.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.jumpnav__strip a {
  flex: none;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.jumpnav__strip a:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.jumpnav__strip a.is-active {
  color: var(--cyan-text);
  background: rgba(0, 181, 216, 0.12);
}

/* Sade kaydırma okları — yalnızca şerit taştığında görünür */
.jumpnav__arrow {
  display: none;
  flex: none;
  width: 22px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition:
    color 0.18s ease,
    opacity 0.18s ease;
}

.jumpnav__arrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
}

.jumpnav__arrow--prev::before {
  transform: translateX(1px) rotate(-135deg);
}

.jumpnav__arrow--next::before {
  transform: translateX(-1px) rotate(45deg);
}

.jumpnav__sections.has-overflow .jumpnav__arrow {
  display: inline-flex;
}

.jumpnav__arrow:not(:disabled):hover {
  color: var(--ink);
}

.jumpnav__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Bölümler header + oval + şeridin altında kalmasın.
   --jumpnav-h şeridin gerçek yüksekliğidir (main.js yazar); telefonda şerit
   iki satıra düştüğü için sabit bir değer yetmiyor. */
.sec[id] {
  scroll-margin-top: calc(var(--header-h, 88px) + var(--oval-drop, 28px) + var(--jumpnav-h, 54px) + 16px);
}

/* ----- Dar ekran: sol grup açılır menüye döner ----- */
@media (max-width: 1024px) {
  .jumpnav__inner {
    gap: 10px;
  }

  /* Tablette satırın yarısı düğme için fazla geniş kalıyor; sınırlayıp
     artan yeri bölüm şeridine bırakıyoruz. Telefonda %50 zaten bu
     değerin altında kaldığı için sınır devreye girmez. */
  .jumpnav__pages {
    max-width: 260px;
  }

  .jumpnav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 12px;
    text-align: left;
    background: var(--paper-2);
    border: 1px solid var(--line);
  }

  .jumpnav__toggle>span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
  }


  .jumpnav__toggle::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border: solid var(--muted);
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .jumpnav__pages.is-open .jumpnav__toggle::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .jumpnav__pagelist {
    display: none;
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 3;
    flex-direction: column;
    align-items: stretch;
    min-width: 230px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
  }

  .jumpnav__pages.is-open .jumpnav__pagelist {
    display: flex;
  }

  .jumpnav__pagelist a {
    padding: 10px 12px;
    border-radius: 10px;
  }

  .jumpnav__pagelist .pill {
    width: 100%;
    margin: 4px 0 0;
    justify-content: center;
  }
}

/* ----- Telefon: daha alçak üst bar ----- */
@media (max-width: 640px) {

  /* Alçalan bara oranla oval de küçülür: kutu 32px, sarkma 32 - 12 = 20px.
     Yapışkan şerit, slider boşluğu ve bölüm hedefleri bunu okur. */
  :root {
    --oval-h: 32px;
    --oval-drop: 20px;
  }

  .site-header {
    --header-pad-y: 8px;
  }

  .brand svg {
    width: 75px;
    height: 40px;
  }

  /* Telefonda şerit: sayfa menüsü + bölüm şeridi yan yana, eylemler alt satırda. */
  .jumpnav__inner {
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 8px;
  }

  .jumpnav__pages {
    flex: 0 1 46%;
    max-width: 46%;
  }

  /* Sarma, esnemeden önce hipotetik boyuta göre karar verilir; şeridin
     basis'i 0 olmazsa içeriği geniş olduğu için alt satıra düşer. */
  .jumpnav__sections {
    flex: 1 1 0%;
    min-width: 0;
  }

  .jumpnav__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* =========================================================
   ICON GRID — kısa fayda/kabiliyet kutucukları
   ========================================================= */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.icon-tile {
  position: relative;
  padding: 18px 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.icon-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--tone, var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.icon-tile:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

.icon-tile:hover::before {
  transform: scaleX(1);
}

.icon-tile__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 14px;
  color: var(--tone, var(--cyan));
  background: color-mix(in srgb, var(--tone, var(--cyan)) 12%, white);
}

.icon-tile__badge svg {
  width: 21px;
  height: 21px;
}

.icon-tile b {
  display: block;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.35;
}

/* Yalnızca sınıfsız metin span'i; ikon kutucuğunu kapsamaz */
.icon-tile>span:not([class]) {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* =========================================================
   ISSUE CARDS — numaralı problem kartları
   ========================================================= */
.issue-grid {
  display: grid;
  gap: 14px;
}

.issue-card {
  position: relative;
  padding: 24px 20px 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.issue-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--tone, var(--cyan));
  opacity: 0.08;
  transition: transform 0.35s ease;
}

.issue-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.issue-card:hover::after {
  transform: scale(1.35);
}

.issue-card__num {
  position: relative;
  display: inline-block;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tone, var(--cyan));
  opacity: 0.35;
}

.issue-card h3 {
  position: relative;
  margin: 10px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.issue-card p {
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

.issue-card__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--tone, var(--cyan)) 50%, var(--ink));
  background: color-mix(in srgb, var(--tone, var(--cyan)) 12%, white);
}

/* =========================================================
   GRADIENT CARDS — degrade dolgulu yetenek kartları
   --from / --to ile renklendirilir.
   ========================================================= */
.grad-grid {
  display: grid;
  gap: 14px;
}

.grad-card {
  position: relative;
  padding: 26px 22px;
  border-radius: var(--radius);
  color: #fff;
  overflow: hidden;
  background: linear-gradient(150deg, var(--from, var(--cyan)), var(--to, var(--cyan-deep)));
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease;
}

.grad-card:hover {
  transform: translateY(-4px);
}

.grad-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(70% 70% at 80% 10%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 80% 10%, #000, transparent 75%);
  pointer-events: none;
}

.grad-card__ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.grad-card__ico svg {
  width: 22px;
  height: 22px;
}

.grad-card h3 {
  position: relative;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.grad-card p {
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   FACT CARDS — koyu bant üzerinde vurgu kartları
   ========================================================= */
.fact-grid {
  display: grid;
  gap: 14px;
}

.fact-card {
  position: relative;
  padding: 22px 20px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.fact-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone, var(--cyan));
}

.fact-card b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tone, var(--cyan));
  margin-bottom: 10px;
}

.fact-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(232, 238, 247, 0.8);
}

.fact-card small {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(232, 238, 247, 0.45);
}

/* =========================================================
   STEP GRID — numaralı akış adımları
   ========================================================= */
.step-grid {
  position: relative;
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-card {
  position: relative;
  z-index: 1;
  /* masaüstündeki bağlantı çizgisi kartın altında kalsın */
  padding: 26px 22px 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

.step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(140deg, var(--from, var(--cyan)), var(--to, var(--cyan-deep)));
  box-shadow: 0 10px 24px -14px var(--to, var(--cyan-deep));
}

.step-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.step-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

.step-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.step-card__meta span {
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
}

/* =========================================================
   RAIL — dikey numaralı süreç listesi
   Adım sayısı fazla olduğunda (5+) step-grid yerine kullanılır.
   ========================================================= */
.rail {
  position: relative;
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0 0 0 52px;
  list-style: none;
}

.rail::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet), var(--magenta), var(--amber));
  opacity: 0.4;
}

.rail-item {
  position: relative;
}

.rail-item__num {
  position: absolute;
  left: -52px;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(140deg, var(--from, var(--cyan)), var(--to, var(--cyan-deep)));
  box-shadow: 0 10px 22px -14px var(--to, var(--cyan-deep));
}

.rail-item h3 {
  margin: 8px 0 7px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.rail-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

/* =========================================================
   TABSET — sekmeli içerik (main.js sürer)
   ========================================================= */
.tabset {
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.tabset__bar {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.tabset__bar button {
  flex: 1;
  padding: 11px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.tabset__bar button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(100deg, var(--cyan-text), var(--violet-text));
  box-shadow: 0 10px 22px -14px var(--violet);
}

.tabset__panel {
  padding: 24px 20px;
  display: grid;
  gap: 20px;
}

.tabset__panel[hidden] {
  display: none;
}

.tabset__panel h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.tabset__panel p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* =========================================================
   NODE CHAIN — düğüm → ok → düğüm şeridi
   ========================================================= */
.node-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(60% 100% at 0% 50%, rgba(0, 181, 216, 0.1), transparent 70%),
    var(--paper-2);
}

.node-chain__node {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 6px 16px -12px rgba(11, 20, 36, 0.6);
}

.node-chain__node i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone, var(--cyan));
}

.node-chain__arrow {
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  position: relative;
  overflow: hidden;
}

.node-chain__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  animation: chain-slide 1.8s ease-in-out infinite;
}

@keyframes chain-slide {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* =========================================================
   FEATURE GRID — ikonlu özellik kartları
   ========================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-card {
  position: relative;
  padding: 18px 16px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone, var(--cyan)) 8%, white), #fff);
}

.feature-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(140deg, var(--tone, var(--cyan)), color-mix(in srgb, var(--tone, var(--cyan)) 55%, var(--night)));
}

.feature-card__ico svg {
  width: 17px;
  height: 17px;
}

.feature-card b {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.feature-card>span:not([class]) {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* =========================================================
   CASE GRID — kullanım senaryosu kartları
   ========================================================= */
.case-grid {
  display: grid;
  gap: 12px;
}

.case-card {
  position: relative;
  padding: 22px 20px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.case-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--tone, var(--cyan)), transparent);
}

.case-card h3 {
  margin: 6px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.case-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

/* Kart üstünde ürün logosu (çözüm bileşenleri gibi kullanımlar için) */
.case-card img {
  height: 26px;
  width: auto;
  margin: 6px 0 14px;
}

.case-card__tag {
  display: inline-flex;
  align-items: center;
  margin: 6px 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--tone, var(--cyan)) 50%, var(--ink));
  background: color-mix(in srgb, var(--tone, var(--cyan)) 12%, white);
}

.case-card__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--tone, var(--cyan)) 50%, var(--ink));
}

.case-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   CHIP ROW — renkli etiket şeridi (sektör, teknoloji vb.)
   ========================================================= */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.chip-row span:hover {
  transform: translateY(-2px);
  color: var(--violet-deep);
  border-color: color-mix(in srgb, var(--violet) 45%, white);
}

.chip-row span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone, var(--cyan));
}

/* =========================================================
   LANE BOARD — koyu zeminde sütunlu mimari şeması
   ========================================================= */
.lane-board {
  position: relative;
  padding: 26px 20px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(109, 92, 255, 0.28), transparent 60%),
    radial-gradient(60% 80% at 85% 100%, rgba(0, 181, 216, 0.25), transparent 60%),
    var(--night);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.lane-board__grid {
  display: grid;
  gap: 14px;
}

.lane-card {
  padding: 18px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lane-card b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
  margin-bottom: 10px;
}

.lane-card b i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--tone, var(--cyan));
}

.lane-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.lane-card li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(232, 238, 247, 0.75);
}

.lane-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--tone, var(--cyan));
}

.lane-board__note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(232, 238, 247, 0.65);
}

.lane-board__note b {
  color: #fff;
}

.lane-board__note a {
  color: #7ee7ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   DUO + CHECK LIST — iki sütunlu liste panelleri
   ========================================================= */
.duo {
  display: grid;
  gap: 22px;
}

.duo-card {
  padding: 24px 20px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
}

.duo-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.duo-card h3 svg {
  width: 20px;
  height: 20px;
  color: var(--tone, var(--cyan));
  flex: none;
}

/* Panel başında ürün logosu */
.duo-card>img {
  height: 26px;
  width: auto;
  margin-bottom: 14px;
}

/* İş ortaklığı / rozet şeridi */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.logo-row img {
  height: 72px;
  width: auto;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.logo-row img:hover {
  transform: translateY(-3px);
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--tone, var(--green)) 14%, white);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--tone, var(--green));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* =========================================================
   METRIC GRID — sayaçlı rakam kartları ([data-count])
   ========================================================= */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.metric-card {
  padding: 22px 16px;
  border-radius: var(--radius);
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.metric-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  margin-bottom: 12px;
  color: var(--tone, var(--cyan));
  background: color-mix(in srgb, var(--tone, var(--cyan)) 20%, transparent);
}

.metric-card__ico svg {
  width: 18px;
  height: 18px;
}

.metric-card b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.metric-card>span:not([class]) {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(232, 238, 247, 0.65);
}

/* =========================================================
   SHOT GRID — ekran görüntüsü galerisi (lightbox: product.js)
   ========================================================= */
.shot-grid {
  display: grid;
  gap: 16px;
}

.shot-grid figure {
  margin: 0;
}

.shot-card {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.shot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, color-mix(in srgb, var(--tone, var(--cyan)) 55%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.shot-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

.shot-card:hover::after {
  opacity: 0.18;
}

.shot-card img {
  width: 100%;
  height: auto;
}

.shot-card__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 20, 36, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.shot-grid figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

/* =========================================================
   DOC GRID — indirilebilir doküman kartları
   ========================================================= */
.doc-grid {
  display: grid;
  gap: 12px;
}

.doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.doc-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

.doc-card__type {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(140deg, var(--tone, var(--cyan)), color-mix(in srgb, var(--tone, var(--cyan)) 55%, var(--night)));
}

.doc-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.doc-card__body b {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
}

.doc-card__body small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.doc-card__dl {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--tone, var(--cyan)) 50%, var(--ink));
  background: color-mix(in srgb, var(--tone, var(--cyan)) 12%, white);
}

.doc-card__dl::after {
  content: "";
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

/* =========================================================
   QA LIST — açılır soru/cevap listesi
   ========================================================= */
.qa-list {
  display: grid;
  gap: 10px;
}

.qa-item {
  position: relative;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.qa-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone, var(--cyan));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s ease;
}

.qa-item[open] {
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

.qa-item[open]::before {
  transform: scaleY(1);
}

.qa-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.qa-item summary::-webkit-details-marker {
  display: none;
}

.qa-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: solid var(--tone, var(--cyan));
  border-width: 0 2px 2px 0;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.25s ease;
}

.qa-item[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.qa-item p {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* =========================================================
   CTA BAND — degrade kapanış bloğu
   ========================================================= */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 40px 22px;
  border-radius: var(--radius-lg);
  text-align: center;
  color: #fff;
  background:
    radial-gradient(70% 120% at 15% 0%, rgba(109, 92, 255, 0.6), transparent 60%),
    radial-gradient(70% 120% at 90% 100%, rgba(255, 61, 127, 0.45), transparent 60%),
    linear-gradient(140deg, #0e1c38, #0a1120);
  box-shadow: var(--shadow-deep);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}

.cta-band h2 {
  position: relative;
  margin: 0 0 12px;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cta-band p {
  position: relative;
  margin: 0 auto 24px;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(232, 238, 247, 0.78);
}

.cta-band__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.cta-band__actions .pill-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.cta-band__links {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12.5px;
}

.cta-band__links a {
  color: rgba(232, 238, 247, 0.8);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cta-band__links a:hover {
  color: #fff;
}

/* =========================================================
   REVEAL + READ PROGRESS (main.js)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}

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

.read-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
  pointer-events: none;
}

/* =========================================================
   SECTION KIT — TABLET ≥ 641px
   ========================================================= */
@media (min-width: 641px) {
  .sec {
    padding: 64px 0;
  }

  .sec-head h2 {
    font-size: 30px;
  }

  .page-hero {
    padding: 56px 0 68px;
  }

  .page-hero--compact {
    padding: 44px 0 48px;
  }

  .icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .issue-grid,
  .case-grid,
  .fact-grid,
  .grad-grid,
  .step-grid,
  .shot-grid,
  .doc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tabset__panel {
    padding: 28px 26px;
  }

  .duo {
    grid-template-columns: repeat(2, 1fr);
  }

  .lane-board {
    padding: 32px 28px;
  }

  .lane-board__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta-band {
    padding: 52px 40px;
  }

  .cta-band h2 {
    font-size: 30px;
  }
}

/* =========================================================
   SECTION KIT — MASAÜSTÜ ≥ 1025px
   ========================================================= */
@media (min-width: 1025px) {
  .sec {
    padding: 80px 0;
  }

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

  .sec-head h2 {
    font-size: 36px;
  }

  .sec-head p {
    font-size: 15px;
  }

  .page-hero {
    padding: 52px 0 56px;
  }

  .page-hero--compact {
    padding: 64px 0 44px;
  }

  .page-hero__inner {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 52px;
  }

  .page-hero--compact .page-hero__inner {
    grid-template-columns: 1fr;
  }

  .page-hero__logo {
    height: 46px;
  }

  .page-hero--compact .page-hero__logo {
    height: 34px;
  }

  .icon-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  .issue-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .grad-grid,
  .fact-grid,
  .case-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .rail {
    max-width: 780px;
  }

  /* Adımlar tek sırada; aralarında bağlantı çizgisi */
  .step-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .step-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 6%;
    right: 6%;
    top: 46px;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta), var(--amber));
    opacity: 0.45;
  }

  .feature-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  .tabset__panel {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 34px 32px;
  }

  .duo {
    gap: 28px;
  }

  .duo-card {
    padding: 30px 28px;
  }

  .metric-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }

  .metric-card b {
    font-size: 34px;
  }

  .shot-grid,
  .doc-grid {
    gap: 20px;
  }

  .cta-band {
    padding: 64px 56px;
  }

  .cta-band h2 {
    font-size: 38px;
  }

  /* Sütun sayısı düzeltmeleri — altı/yedi kartlı kümeler için.
     Temel kuralların tamamından sonra gelmeli ki onları ezebilsin. */
  .grad-grid--3,
  .fact-grid--3,
  .case-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================
   SECTION KIT — HAREKET AZALTMA
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

  .page-hero__aura,
  .hero-panel__title i,
  .node-chain__arrow::after {
    animation: none !important;
  }

  /* Yalnızca hareketliyken anlamı olan öğeler (akan paketler vb.) */
  .motion-only {
    display: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .read-progress {
    display: none;
  }
}

/* =========================================================
   LIST KIT — listeleme sayfaları için ortak bileşenler
   (Akademi videoları/yazıları/eğitimleri, ürün listesi vb.)
   Kart gövdesi mevcut .post bileşenini kullanır; buradaki
   eklemeler onu bağlantıya, meta satırına ve sayfalamaya açar.
   Davranışlar: main.js › "LIST KIT"
   ========================================================= */

/* ----- Kart ızgarası ----- */
.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Bağlantı olan kart (a.post) */
.post--link {
  color: inherit;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.post--link:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-soft, 0 18px 40px -26px rgba(11, 20, 36, 0.55));
}

.post--link .post__img {
  transition: transform 0.4s ease;
}

.post--link:hover .post__img {
  transform: scale(1.04);
}

.post__img {
  overflow: hidden;
}

/* Etiket + tarih satırı */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.post__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone, var(--cyan)) 50%, var(--ink));
  background: color-mix(in srgb, var(--tone, var(--cyan)) 12%, white);
}

.post__more {
  margin-top: auto;
  padding-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--tone, var(--cyan)) 50%, var(--ink));
}

.post--link:hover .post__more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Video kartı: kapak üzerinde oynat rozeti */
.post__img--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 20, 36, 0.05), rgba(11, 20, 36, 0.55));
}

.post__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--magenta);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px -12px rgba(11, 20, 36, 0.8);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.post__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent currentColor;
}

.post--link:hover .post__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

.post__duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 20, 36, 0.72);
}

/* ----- Liste araç çubuğu (sonuç sayısı / açıklama) ----- */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--muted);
}

.list-toolbar b {
  color: var(--ink);
}

/* Filtre yoksa da kullanılabilen etiket şeridi */
.list-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.list-filter button {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.list-filter button:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.list-filter button[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(100deg, var(--cyan-text), var(--violet-text));
}

/* ----- Sayfalama (main.js üretir) ----- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}

.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.pager__btn:hover:not(:disabled):not([aria-current="page"]) {
  background: var(--paper-2);
}

.pager__btn[aria-current="page"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(100deg, var(--cyan-text), var(--violet-text));
}

.pager__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pager__gap {
  padding: 0 4px;
  color: var(--muted);
}

.pager__info {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* Sayfalamada gizlenen kart */
.is-paged-out {
  display: none !important;
}

/* ----- Boş durum ----- */
.list-empty {
  padding: 40px 20px;
  border-radius: var(--radius, 22px);
  border: 1px dashed var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

/* =========================================================
   PLIST — ürün listesi (galeri değil, tanıtım satırları)
   ========================================================= */
.plist {
  display: grid;
  gap: 18px;
}

.plist-item {
  display: grid;
  gap: 0;
  border-radius: var(--radius-lg, 32px);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.plist-item:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-soft, 0 18px 40px -26px rgba(11, 20, 36, 0.55));
}

.plist-item__media {
  position: relative;
  min-height: 190px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--tone, var(--cyan)) 22%, transparent), transparent 65%),
    var(--paper-2);
  background-size: cover;
  background-position: center;
}

.plist-item__media .ph-label {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  color: #fff;
  background: rgba(11, 20, 36, 0.5);
}

.plist-item__body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plist-item__logo {
  height: 30px;
  width: auto;
}

.plist-item__kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone, var(--cyan)) 50%, var(--ink));
  background: color-mix(in srgb, var(--tone, var(--cyan)) 12%, white);
}

.plist-item__body h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.plist-item__body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.plist-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plist-item__tags span {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
}

.plist-item__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* =========================================================
   VIDEO MODAL — YouTube açılır oynatıcı (main.js sürer)
   ========================================================= */
.video-modal[hidden] {
  display: none;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 11, 20, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-modal.is-open {
  opacity: 1;
}

.video-modal__box {
  position: relative;
  width: min(1040px, 100%);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-modal.is-open .video-modal__box {
  transform: none;
}

.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__title {
  margin: 14px 2px 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.video-modal__close {
  position: absolute;
  top: -46px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.18s ease;
}

.video-modal__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.video-open,
.video-open body {
  overflow: hidden;
}

/* =========================================================
   LIST KIT — TABLET ≥ 641px
   ========================================================= */
@media (min-width: 641px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .plist-item {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .plist-item__media {
    min-height: 100%;
  }

  .plist-item__body {
    padding: 28px 26px;
  }

  .video-modal__close {
    top: -48px;
  }
}

/* =========================================================
   LIST KIT — MASAÜSTÜ ≥ 1025px
   ========================================================= */
@media (min-width: 1025px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .card-list--wide {
    grid-template-columns: repeat(2, 1fr);
  }

  .plist {
    gap: 24px;
  }

  .plist-item__body {
    padding: 34px 32px;
    gap: 14px;
  }

  .plist-item__body h3 {
    font-size: 19px;
  }
}

/* =========================================================
   LIST KIT — HAREKET AZALTMA
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

  .post--link,
  .post--link .post__img,
  .post__play,
  .plist-item,
  .video-modal,
  .video-modal__box {
    transition: none !important;
  }

  .post--link:hover,
  .post--link:hover .post__img,
  .plist-item:hover {
    transform: none;
  }
}

/* Şeridin hemen ardından gelen bölüm fold'a yaklaşsın (kaydırma ipucu) */
.jumpnav+.sec {
  padding-top: 40px;
}

/* Kısa masaüstü ekranlarda (ör. 1366x768) hero fold'u tamamen doldurmasın;
   şerit ve ilk bölüm başlığı ilk açılışta görünür kalsın. */
@media (min-width: 1025px) and (max-height: 880px) {
  .page-hero {
    padding: 64px 0 40px;
  }

  .page-hero__logo {
    height: 38px;
    margin-bottom: 12px;
  }

  .page-hero h1 {
    font-size: clamp(28px, 5vw, 36px);
    margin-bottom: 12px;
  }

  .page-hero__lead {
    margin-bottom: 18px;
    font-size: 14px;
  }

  .page-hero__stats {
    margin-top: 16px;
    padding-top: 12px;
  }

  .jumpnav+.sec {
    padding-top: 34px;
  }
}

/* Çok kısa masaüstü ekranlar (720p ve altı) için bir kademe daha */
@media (min-width: 1025px) and (max-height: 760px) {
  .page-hero {
    padding: 64px 0 44px;
  }

  .page-hero__logo {
    height: 32px;
    margin-bottom: 10px;
  }

  .page-hero h1 {
    font-size: clamp(26px, 4.4vw, 32px);
  }

  .page-hero__lead {
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.6;
  }

  .page-hero__stats {
    margin-top: 12px;
    padding-top: 10px;
  }

  .jumpnav+.sec {
    padding-top: 44px;
  }

  /* Şema paneli kısa ekranda hero'nun yüksekliğini belirliyor */
  .hero-panel {
    padding: 14px 14px 12px;
  }

  .hero-panel__title {
    margin-bottom: 10px;
  }

  .hero-panel__legend {
    margin-top: 10px;
  }

  .hero-panel__legend span {
    padding: 4px 9px;
    font-size: 10.5px;
  }
}

/* ----- Dar ekran: paylaş menüsü alttan açılan panel olur ----- */
@media (max-width: 640px) {
  .share__menu {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 111;
    min-width: 0;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0 12px calc(14px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px -20px rgba(6, 11, 20, 0.5);
    animation: share-sheet 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes share-sheet {
    from {
      transform: translateY(100%);
    }
  }

  /* Başlık satırı: tutamaç + kapatma */
  .share__head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 4px 10px;
    background: white;
  }

  .share__head span {
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
  }

  .share__head::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    transform: translateX(-50%);
    background: var(--paper-3);
  }

  .share__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    background: var(--paper-2);
  }

  /* İki sütun; başlık satırı tam genişlikte kalır. */
  .share__menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
    align-content: start;
  }

  .share__head {
    grid-column: 1 / -1;
  }

  .share__item {
    padding: 12px 8px;
    font-size: 13px;
  }

  .share__head span {
    font-size: 14px;
  }

  .share__badge {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .share__menu {
    animation: none;
  }
}

/* =========================================================
   LEGAL — uzun metinli yasal sayfalar (KVKK aydınlatma metni,
   gizlilik politikası, çerez politikası).
   Tek sütun, okuma genişliği sınırlı; başlıklar numaralı.
   ========================================================= */
.legal {
  max-width: 820px;
  margin: 0 auto;
}

.legal__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.legal h2 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 34px 0 10px;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal h3 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 20px 0 6px;
}

.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}

.legal p {
  margin: 0 0 12px;
}

.legal ul,
.legal ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 6px;
}

.legal a {
  color: var(--cyan-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover {
  color: var(--ink);
}

/* Tablolar dar ekranda kendi içinde kaydırılır */
.legal__table {
  overflow-x: auto;
  margin: 0 0 16px;
}

.legal table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}

.legal th {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--paper-2);
}

/* Hukuk biriminin doldurması gereken alanlar — gözden kaçmasın */
.legal__todo {
  padding: 1px 7px;
  border-radius: 6px;
  background: #fff3cd;
  border: 1px dashed #b98900;
  color: #6b4f00;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Sayfa sonundaki kardeş belge bağlantıları */
.legal__more {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
}

@media (min-width: 641px) {
  .legal h2 {
    font-size: 21px;
  }
}

/* =========================================================
   BAŞA DÖN — sağ altta, sayfa kaydırılınca beliren düğme.
   İşaretlemesi main.js tarafından eklenir.
   Geniş ekranda içerik sütununun (1200px) biraz dışında durur;
   sütun kenar boşluğu yetmeyince 16px'e düşer.
   ========================================================= */
.to-top {
  position: fixed;
  z-index: 40;
  right: max(16px, calc((100% - 1200px) / 2 - 56px));
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(14, 26, 43, 0.5);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top svg {
  width: 20px;
  height: 20px;
}

.to-top:hover {
  color: var(--cyan-deep);
  border-color: var(--cyan);
}

/* Çekmece menü ya da demo paneli açıkken sayfa zaten kilitli */
html.demo-open .to-top,
html.menu-lock .to-top {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 640px) {
  .to-top {
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
  }

  .to-top svg {
    width: 17px;
    height: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}