/* ==========================================================================
   KAAN ROBOTİK — Tasarım Sistemi
   Tamamen koyu, kurumsal teknoloji dili. Beyaz zemin yoktur.
   Marka rengi logodan: #2b4c8f
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Zeminler — hepsi koyu, mavi alt tonlu */
  --bg:        #060a12;
  --bg-2:      #0a1020;
  --surface:   #0f1626;
  --surface-2: #151f33;
  --surface-3: #1c2941;

  /* Çizgiler */
  --line:   rgba(150, 176, 216, .12);
  --line-2: rgba(150, 176, 216, .22);
  --line-3: rgba(150, 176, 216, .34);

  /* Marka — logodan */
  --brand:      #2b4c8f;
  --brand-mid:  #3a63b8;
  --brand-lit:  #6193f0;
  --brand-pale: #a9c4fb;
  --brand-soft: rgba(97, 147, 240, .13);
  --brand-line: rgba(97, 147, 240, .32);

  /* RoboCari */
  --rc:      #16a35c;
  --rc-mid:  #12874c;
  --rc-lit:  #3ed687;
  --rc-soft: rgba(62, 214, 135, .12);
  --rc-line: rgba(62, 214, 135, .3);

  /* Metin */
  --fg:   #eef3fb;
  --fg-2: #a7b6cf;
  --fg-3: #71809b;

  --warn: #f0736a;

  /* Gölge ve parıltı */
  --sh:    0 4px 12px rgba(0, 0, 0, .45);
  --sh-lg: 0 24px 60px -24px rgba(0, 0, 0, .9);
  --glow-brand: 0 12px 34px -14px rgba(43, 76, 143, .95);
  --glow-rc:    0 12px 34px -14px rgba(18, 135, 76, .9);

  /* Ölçüler */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --wrap: 1260px;
  --wrap-narrow: 800px;
  --gutter: clamp(1.15rem, 3.5vw, 2.75rem);
  --sec-y: clamp(4rem, 7.5vw, 7rem);

  /* Tipografi */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --t-hero: clamp(2.3rem, 4.3vw, 3.7rem);
  --t-h1:   clamp(2.05rem, 3.9vw, 3.1rem);
  --t-h2:   clamp(1.68rem, 2.9vw, 2.4rem);
  --t-h3:   clamp(1.14rem, 1.6vw, 1.34rem);
  --t-h4:   1.04rem;
  --t-body: clamp(1rem, 1.02vw, 1.07rem);
  --t-sm:   .93rem;
  --t-xs:   .8rem;

  --label: .735rem;
  --label-track: .14em;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
  --header-h: 78px;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100svh;
}

img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.028em;
}
h1 { line-height: 1.06; letter-spacing: -.035em; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
strong, b { color: var(--fg); font-weight: 700; }
small { color: var(--fg-3); }

:focus-visible { outline: 2px solid var(--brand-lit); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: var(--brand); color: #fff; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 999;
  background: var(--brand); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--r-sm); font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 14px; }

/* --------------------------------------------------------------------------
   3. YERLEŞİM
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sec-y); position: relative; }
.section-sm { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.section-line { border-top: 1px solid var(--line); }

/* Değişken zemin — bölümleri ayırır, hepsi koyu */
.section-alt {
  background: var(--bg-2); position: relative; isolation: isolate; overflow: clip;
  border-block: 1px solid var(--line);
}
/* Doku: eğik ince çizgiler (ızgara DEĞİL) */
.section-alt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(115deg,
    rgba(150, 176, 216, .055) 0 1px, transparent 1px 14px);
  mask-image: radial-gradient(ellipse 80% 75% at 78% 12%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 78% 12%, #000 0%, transparent 72%);
}
.section-alt::after {
  content: ""; position: absolute; inset: auto auto -40% -12%; width: 55%; height: 120%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 48% 48% at 30% 70%, rgba(43, 76, 143, .3), transparent 70%);
}

.grid { display: grid; gap: clamp(1.15rem, 2vw, 1.85rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: .5rem; } .gap { gap: 1rem; } .gap-lg { gap: 1.75rem; }

.sec-head { max-width: 56ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.sec-head.center { margin-inline: auto; text-align: center; max-width: 66ch; }
.sec-head h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }
.sec-head p { color: var(--fg-2); font-size: 1.08rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--label); font-weight: 700;
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--brand-lit); margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; flex: none;
}

.gradient-text { color: var(--brand-lit); }

/* --------------------------------------------------------------------------
   4. BUTONLAR
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.6rem; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--line-2);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .18s var(--ease-io), border-color .18s var(--ease-io), color .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: linear-gradient(180deg, var(--brand-mid), var(--brand));
  border-color: var(--brand-mid); color: #fff; box-shadow: var(--glow-brand);
}
.btn-primary:hover { background: linear-gradient(180deg, #4571c9, var(--brand-mid)); border-color: #4571c9; }

.btn-robocari {
  background: linear-gradient(180deg, var(--rc), var(--rc-mid));
  border-color: var(--rc); color: #fff; box-shadow: var(--glow-rc);
}
.btn-robocari:hover { background: linear-gradient(180deg, #1cba6a, var(--rc)); }

.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--brand-line); color: #fff; }

.btn-light { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-light:hover { background: #fff; border-color: #fff; }

.btn-lg { padding: 1.08rem 2.1rem; font-size: 1.01rem; }
.btn-sm { padding: .6rem 1.15rem; font-size: .86rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .93rem; color: var(--brand-lit);
  transition: gap .22s var(--ease), color .18s;
}
.link-arrow:hover { gap: .8rem; color: var(--brand-pale); }
.link-arrow svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   5. ROZET
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .95rem; border-radius: 100px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  font-size: var(--label); font-weight: 700; letter-spacing: .02em;
  color: var(--brand-pale);
}
.pill-robocari { background: var(--rc-soft); border-color: var(--rc-line); color: var(--rc-lit); }
.pill-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
.pill-live::before { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(6, 10, 18, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease-io), border-color .25s;
}
.header.is-stuck { background: rgba(6, 10, 18, .96); border-bottom-color: var(--line-2); }
.header .container { display: flex; align-items: center; gap: 1.25rem; }

/* Marka — koyu zemin olduğu için beyaz logo */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { display: none; }
.brand-logo-light { display: block; height: 42px; width: auto; }
.brand-mark, .brand-name { display: none; }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .1rem; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .82rem; border-radius: var(--r-sm);
  font-size: .93rem; font-weight: 600; color: var(--fg-2);
  transition: color .16s, background .16s;
}
.nav-link:hover { color: var(--fg); background: var(--surface-2); }
.nav-item.is-active > .nav-link { color: var(--fg); }
.nav-item.is-active > .nav-link::after {
  content: ""; position: absolute; left: .82rem; right: .82rem; bottom: -.42rem;
  height: 2px; border-radius: 2px; background: var(--brand-lit);
}
.nav-caret { width: 13px; height: 13px; opacity: .6; transition: transform .2s var(--ease); }
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + .7rem); left: 50%; translate: -50% 0;
  min-width: 335px; padding: .45rem;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown, .dropdown.is-open {
  opacity: 1; visibility: visible; transform: none;
}
.dropdown-link {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .72rem .8rem; border-radius: var(--r-sm);
  transition: background .16s;
}
.dropdown-link:hover { background: var(--surface-2); }
.dropdown-link .di {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-lit);
}
.dropdown-link .di svg { width: 17px; height: 17px; }
.dropdown-link b { display: block; font-size: .92rem; font-weight: 700; color: var(--fg); }
.dropdown-link small { display: block; color: var(--fg-3); font-size: .81rem; line-height: 1.45; }

.header-cta { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--fg-2);
  transition: border-color .16s, color .16s, background .16s;
}
.icon-btn:hover { border-color: var(--brand-line); color: var(--fg); background: var(--surface-2); }
.icon-btn svg { width: 19px; height: 19px; }
.theme-toggle { display: none; }

.burger { display: none; }
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 99;
  background: var(--bg); padding: 1rem var(--gutter) 3rem;
  overflow-y: auto; display: none; flex-direction: column;
}
.mobile-nav.is-open { display: flex; animation: slideDown .25s var(--ease); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mobile-nav a {
  padding: .95rem .2rem; border-bottom: 1px solid var(--line);
  font-size: 1.05rem; font-weight: 700; color: var(--fg);
}
.mobile-nav a.sub { padding-left: 1.2rem; font-size: .95rem; font-weight: 500; color: var(--fg-2); }
.mobile-nav .btn { margin-top: 1.5rem; }

@media (max-width: 1080px) {
  .nav, .header-cta .btn { display: none; }
  .burger { display: grid; }
}
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(150, 176, 216, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 176, 216, .055) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 75% 80% at 22% 10%, #000 5%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 22% 10%, #000 5%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; inset: -25% -15% auto auto; width: 68%; height: 145%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 68% 32%, rgba(43, 76, 143, .5), transparent 70%);
}
.hero-bg { display: none; }
.hero h1 { font-size: var(--t-hero); margin-bottom: 1.35rem; }
.hero-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--fg-2); max-width: 56ch; margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.75rem; }

.hero-grid {
  display: grid; gap: clamp(2.25rem, 4vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-visual { position: relative; }
.hero-visual img {
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg), 0 0 0 1px var(--line-2);
}
.hero-visual img[src$=".png"]:not([src*="ekran"]) {
  max-height: min(50vh, 460px); width: auto; margin-inline: auto;
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .85));
}
.hero-glow { display: none; }
.floaty { animation: none; }

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1.5rem 1.75rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.stat b {
  display: block; font-size: clamp(1.85rem, 2.8vw, 2.45rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1; color: var(--fg); white-space: nowrap;
}
.stat span { display: block; margin-top: .45rem; font-size: .87rem; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   8. KARTLAR
   -------------------------------------------------------------------------- */
.card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.3vw, 2rem); color: var(--fg-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .25s var(--ease-io), background .25s var(--ease-io);
}
.card-hover:hover {
  transform: translateY(-4px); background: var(--surface-2);
  border-color: var(--brand-line); box-shadow: var(--sh-lg);
}
.card-lift { box-shadow: var(--sh); }
.card-glass { background: var(--surface-2); }

.card-topline::before {
  content: ""; position: absolute; inset: -1px auto auto -1px; height: 2px; width: 0;
  border-radius: var(--r-md) 0 0 0;
  background: linear-gradient(90deg, var(--brand-lit), transparent);
  transition: width .4s var(--ease);
}
.card-hover.card-topline:hover::before { width: calc(100% + 2px); }

.card h3 { font-size: var(--t-h3); margin-bottom: .65rem; }
.card p { color: var(--fg-2); font-size: .97rem; }

.card-icon {
  width: 46px; height: 46px; border-radius: var(--r-sm); margin-bottom: 1.2rem;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-lit);
  border: 1px solid var(--brand-line);
  transition: background .25s, color .25s, border-color .25s;
}
.card-icon svg { width: 23px; height: 23px; stroke-width: 1.8; }
.card-icon.green { background: var(--rc-soft); color: var(--rc-lit); border-color: var(--rc-line); }
.card-hover:hover .card-icon { background: var(--brand); color: #fff; border-color: var(--brand); }
.card-hover:hover .card-icon.green { background: var(--rc); color: #fff; border-color: var(--rc); }

/* Ürün kartı */
.product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.product-media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background:
    radial-gradient(ellipse 65% 55% at 50% 38%, rgba(97, 147, 240, .14), transparent 70%),
    linear-gradient(175deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--line);
}
.product-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(to top, rgba(97, 147, 240, .09), transparent);
}
.product-media img {
  position: absolute; inset: 1.2rem; z-index: 1;
  width: calc(100% - 2.4rem); height: calc(100% - 2.4rem);
  max-width: none; object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .75));
  transition: transform .45s var(--ease);
}
.card-hover:hover .product-media img { transform: scale(1.05) translateY(-4px); }
.product-body { padding: 1.35rem clamp(1.2rem, 2vw, 1.55rem) 1.6rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.product-body h3 { margin: 0; font-size: 1.2rem; }
.product-body .link-arrow { margin-top: auto; align-self: flex-start; }
.product-spec { display: flex; flex-wrap: wrap; gap: .4rem; }
.product-spec span {
  font-size: .76rem; font-weight: 600; padding: .3rem .68rem; border-radius: 100px;
  background: var(--surface-3); color: var(--fg-2); border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   9. LİSTELER
   -------------------------------------------------------------------------- */
.check-list { display: grid; gap: .82rem; }
/* Madde metni akışta kalsın: <strong> ile açıklaması bölünmesin diye
   işaret kutucuğu konumlandırılır, satır blok olarak akar. */
.check-list li { position: relative; padding-left: 1.95rem; color: var(--fg-2); font-size: .99rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .18rem; width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236193f0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  border: 1px solid var(--brand-line);
}
.check-list.green li::before {
  background-color: var(--rc-soft); border-color: var(--rc-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ed687' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.split {
  display: grid; gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 355px), 1fr));
}
.split-media { position: relative; }
.split-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); box-shadow: var(--sh-lg), 0 0 0 1px var(--line);
}
.split-media::after { display: none; }
.split-media img[src*="ekran"], .split-media img[src*="kartlar"], .split-media img[src*="asistan"] {
  aspect-ratio: auto; object-fit: contain; background: var(--bg-2);
}
.split.reverse > :first-child { order: 2; }
@media (max-width: 780px) { .split.reverse > :first-child { order: 0; } }
.split h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }
.split p { color: var(--fg-2); margin-bottom: 1.15rem; }

/* --------------------------------------------------------------------------
   10. TABLOLAR
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
}
.spec-table, .compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec-table caption, .compare caption {
  text-align: left; font-size: var(--label); font-weight: 700;
  letter-spacing: var(--label-track); text-transform: uppercase; color: var(--fg-3);
  padding: 1rem 1.2rem .85rem;
}
.spec-table th, .spec-table td { padding: .85rem 1.2rem; text-align: left; border-top: 1px solid var(--line); }
.spec-table th { color: var(--fg-3); font-weight: 500; width: 46%; }
.spec-table td { font-weight: 700; color: var(--fg); }
.spec-table tbody tr:hover { background: var(--surface-2); }

.compare { min-width: 680px; }
.compare th, .compare td { padding: .9rem 1.1rem; border-top: 1px solid var(--line); text-align: center; }
.compare thead th {
  font-size: 1rem; font-weight: 800; color: var(--fg);
  background: var(--surface-2); border-top: 0; padding-block: 1.1rem;
}
.compare tbody th { text-align: left; font-weight: 600; color: var(--fg-3); font-size: .9rem; }
.compare td { color: var(--fg); font-weight: 600; }
.compare tbody tr:hover { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   11. FİYAT
   -------------------------------------------------------------------------- */
.price-grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); align-items: start; }
.price-card { position: relative; display: flex; flex-direction: column; gap: 1.15rem; }
.price-card.featured {
  border-color: var(--rc-line); background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--rc-line), var(--sh-lg); padding-top: 2.7rem;
}
.price-badge {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--rc), var(--rc-mid)); color: #fff;
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: .45rem .9rem; text-align: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.price-name { font-size: 1.18rem; font-weight: 800; color: var(--fg); }
.price-amount { display: flex; align-items: baseline; gap: .35rem; }
.price-amount b { font-size: 2.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--fg); }
.price-amount span { color: var(--fg-3); font-size: .93rem; }
.price-card ul { display: grid; gap: .65rem; flex: 1; }
.price-card ul li { display: flex; gap: .6rem; font-size: .93rem; color: var(--fg-2); align-items: flex-start; }
.price-card ul li svg { width: 16px; height: 16px; flex: none; margin-top: .25rem; color: var(--rc-lit); }

/* --------------------------------------------------------------------------
   12. SSS
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .7rem; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; transition: border-color .2s, background .2s;
}
.faq-item[open] { border-color: var(--brand-line); background: var(--surface-2); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  padding: 1.15rem 1.4rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.03rem; color: var(--fg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b6cf' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform .3s var(--ease), background-color .2s;
}
.faq-item[open] summary::after { transform: rotate(135deg); background-color: var(--brand-soft); }
.faq-item .faq-body { padding: 0 1.4rem 1.4rem; color: var(--fg-2); font-size: .98rem; max-width: 78ch; }
.faq-item .faq-body a { color: var(--brand-lit); font-weight: 600; }

/* --------------------------------------------------------------------------
   13. ŞERİT / ALINTI
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: scrollX 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }
.marquee-item {
  display: flex; align-items: center; white-space: nowrap;
  font-size: .95rem; font-weight: 700; color: var(--fg-3);
}

.quote {
  position: relative; padding-left: 1.6rem; border-left: 3px solid var(--brand-lit);
  font-size: 1.16rem; line-height: 1.55; color: var(--fg); font-weight: 500;
}
.quote-author { display: flex; align-items: center; gap: .85rem; margin-top: 1.4rem; }
.quote-author img, .quote-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--brand); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .9rem;
}
.quote-author b { display: block; font-size: .95rem; color: var(--fg); }
.quote-author small { color: var(--fg-3); font-size: .85rem; }

/* --------------------------------------------------------------------------
   14. SÜREÇ
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); counter-reset: step; }
.step { position: relative; padding-top: 3.4rem; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  width: 46px; height: 46px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-lit); border: 1px solid var(--brand-line);
  font-size: .95rem; font-weight: 800; letter-spacing: .02em;
}
.step::after {
  content: ""; position: absolute; top: 22px; left: 58px; right: -1rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
@media (max-width: 760px) { .step::after { display: none; } }
.step h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.step p { color: var(--fg-2); font-size: .95rem; }

/* --------------------------------------------------------------------------
   15. CTA BANDI
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3.5rem);
  text-align: center;
}
/* Doku: eş merkezli halkalar */
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-radial-gradient(circle at 50% 118%,
    rgba(150, 176, 216, .07) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(ellipse 80% 120% at 50% 110%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 120% at 50% 110%, #000 20%, transparent 78%);
}
.cta-band::after {
  content: ""; position: absolute; inset: auto -10% -70% -10%; height: 140%; z-index: -1;
  background: radial-gradient(ellipse 45% 60% at 50% 100%, rgba(43, 76, 143, .7), transparent 70%);
}
.cta-band h2 { font-size: var(--t-h2); margin-bottom: 1rem; }
.cta-band p { color: var(--fg-2); max-width: 58ch; margin: 0 auto 2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cta-band.green { border-color: var(--rc-line); }
.cta-band.green::after { background: radial-gradient(ellipse 45% 60% at 50% 100%, rgba(18, 135, 76, .65), transparent 70%); }

/* --------------------------------------------------------------------------
   16. SAYFA BAŞLIĞI
   -------------------------------------------------------------------------- */
.page-head {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.75rem, 5vw, 4.25rem);
  border-bottom: 1px solid var(--line);
}
/* Doku: yatay tarama çizgileri */
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: repeating-linear-gradient(180deg,
    rgba(150, 176, 216, .06) 0 1px, transparent 1px 9px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.page-head::after {
  content: ""; position: absolute; inset: -30% -8% auto auto; width: 58%; height: 175%; z-index: -1;
  background: radial-gradient(ellipse 48% 48% at 68% 40%, rgba(43, 76, 143, .45), transparent 70%);
}
.page-head h1 { font-size: var(--t-h1); margin-bottom: 1.1rem; max-width: 22ch; }
.page-head p { color: var(--fg-2); font-size: 1.09rem; max-width: 62ch; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .83rem; color: var(--fg-3); margin-bottom: 1.4rem;
}
.breadcrumb a:hover { color: var(--brand-lit); }
.breadcrumb li { display: flex; align-items: center; gap: .45rem; }
.breadcrumb li + li::before { content: "/"; opacity: .4; }
.breadcrumb [aria-current] { color: var(--fg-2); }

/* --------------------------------------------------------------------------
   17. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.form-row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.field { display: grid; gap: .45rem; }
.field label { font-size: .87rem; font-weight: 700; color: var(--fg); }
.field label .req { color: var(--warn); }
.field input, .field textarea, .field select {
  width: 100%; padding: .88rem 1rem; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-2); color: var(--fg);
  transition: border-color .18s, box-shadow .18s, background .18s; font-size: .97rem;
}
.field textarea { min-height: 155px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand-lit); background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(97, 147, 240, .16);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); opacity: .8; }
.field select option { background: #0f1626; color: #eef3fb; }
.field-note { font-size: .84rem; line-height: 1.6; color: var(--fg-3); }
.form-consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .87rem; color: var(--fg-3); }
.form-consent input { width: 17px; height: 17px; margin-top: .25rem; accent-color: var(--brand-lit); flex: none; }
.form-consent a { color: var(--brand-lit); font-weight: 600; }
.form-status { font-size: .93rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); display: none; }
.form-status.ok { display: block; background: var(--rc-soft); border: 1px solid var(--rc-line); color: var(--rc-lit); }
.form-status.err { display: block; background: rgba(240, 115, 106, .1); border: 1px solid rgba(240, 115, 106, .35); color: var(--warn); }

.contact-line { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line .ci {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-lit); border: 1px solid var(--brand-line);
}
.contact-line .ci svg { width: 19px; height: 19px; }
.contact-line b {
  display: block; font-size: .76rem; color: var(--fg-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .15rem;
}
.contact-line a, .contact-line span { color: var(--fg); font-size: 1rem; }
.contact-line a:hover { color: var(--brand-lit); }

.map-frame { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.map-frame iframe { width: 100%; height: 400px; border: 0; filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9); }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); color: var(--fg-3); padding-top: clamp(3.25rem, 6vw, 5rem); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(145px, 1fr)); padding-bottom: 3rem; }
.footer .brand-logo { display: none; }
.footer .brand-logo-light { display: block; height: 42px; width: auto; }
.footer h3, .footer h4 {
  font-size: var(--label); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--label-track); color: var(--fg); margin-bottom: 1.15rem;
}
.footer-links { display: grid; gap: .62rem; }
.footer-links a { color: var(--fg-3); font-size: .94rem; transition: color .16s; }
.footer-links a:hover { color: var(--brand-lit); }
.footer-about p { color: var(--fg-3); font-size: .94rem; margin: 1.15rem 0 1.5rem; max-width: 38ch; }
.social { display: flex; gap: .5rem; }
.social a {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--fg-2);
  transition: background .18s, color .18s, border-color .18s, transform .2s var(--ease);
}
.social a:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }
.footer-bottom {
  border-top: 1px solid var(--line); padding-block: 1.45rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--fg-3);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.footer-bottom a:hover { color: var(--brand-lit); }

/* --------------------------------------------------------------------------
   19. YÜZEN ÖĞELER
   -------------------------------------------------------------------------- */
.float-stack { position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 90; display: grid; gap: .6rem; }
.fab {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: var(--sh-lg); border: 0; transition: transform .25s var(--ease), background .18s;
}
.fab svg { width: 24px; height: 24px; }
.fab:hover { transform: scale(1.07) translateY(-2px); }
.fab-wa { background: #1aab54; color: #fff; }
.fab-top { background: var(--surface-3); color: var(--fg); border: 1px solid var(--line-2); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s; }
.fab-top.show { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   20. UZUN METİN
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; color: var(--fg-2); }
.prose h2 { font-size: 1.42rem; margin: 2.6rem 0 .9rem; }
.prose h3 { font-size: 1.1rem; margin: 1.9rem 0 .6rem; }
.prose p { margin-bottom: 1.05rem; }
.prose ul { list-style: none; padding-left: 0; margin-bottom: 1.15rem; display: grid; gap: .55rem; }
.prose ul li { padding-left: 1.5rem; position: relative; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-lit);
}
.prose ol { list-style: decimal; padding-left: 1.4rem; margin-bottom: 1.15rem; display: grid; gap: .55rem; }
.prose a { color: var(--brand-lit); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   21. BELİRME
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
[data-reveal][data-delay="5"] { transition-delay: .4s; }

/* --------------------------------------------------------------------------
   22. FOTOĞRAFLI KART / SEKTÖR / MOZAİK
   -------------------------------------------------------------------------- */
.media-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.media-card .media-figure { overflow: hidden; position: relative; }
.media-card > img, .media-figure > img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .5s var(--ease);
}
.card-hover.media-card:hover .media-figure > img { transform: scale(1.06); }
.media-card .media-body {
  padding: 1.3rem clamp(1.15rem, 2vw, 1.55rem) 1.5rem;
  display: flex; flex-direction: column; gap: .7rem; flex: 1;
}
.media-card .media-body h3 { font-size: 1.14rem; margin: 0; }
.media-card .media-body p { font-size: .94rem; }
.media-card .media-body .link-arrow { margin-top: auto; align-self: flex-start; padding-top: .3rem; }
.media-tag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: #0a1220; color: var(--fg);
  border: 1px solid var(--line-2);
  padding: .28rem .7rem; border-radius: 100px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.media-tag.rc { background: rgba(18, 135, 76, .85); border-color: var(--rc-line); color: #fff; }

.sector-card {
  position: relative; overflow: hidden; border-radius: var(--r-md); display: block;
  border: 1px solid var(--line); transition: border-color .25s, transform .3s var(--ease);
}
.sector-card:hover { border-color: var(--brand-line); transform: translateY(-3px); }
.sector-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.sector-card:hover img { transform: scale(1.07); }
.sector-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 10, 18, .95) 0%, rgba(6, 10, 18, .4) 45%, rgba(6, 10, 18, .05) 78%);
}
.sector-card b {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 1;
  color: var(--fg); font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em;
}

.hero-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.hero-mosaic figure {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--line-2), var(--sh-lg);
}
.hero-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-mosaic .m-wide { grid-column: span 2; }
.hero-mosaic .m-wide img { aspect-ratio: 16 / 7; object-position: center top; }
.hero-mosaic figure:not(.m-wide) img { aspect-ratio: 4 / 3; }
.hero-mosaic figcaption {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  background: #0a1220; color: var(--fg);
  border: 1px solid var(--line-2);
  padding: .26rem .68rem; border-radius: 100px;
  font-size: .71rem; font-weight: 700; letter-spacing: .03em;
}
.hero-mosaic .m-wide figcaption { bottom: auto; top: .7rem; right: .7rem; left: auto; }

.screenshot {
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sh-lg), 0 0 0 1px var(--line-2);
}
.screenshot img { width: 100%; display: block; }

/* --------------------------------------------------------------------------
   23. YARDIMCI
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.muted { color: var(--fg-3); }
.fg-2 { color: var(--fg-2); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.mono { font-family: var(--font-mono); font-size: .93em; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; } .mb-5 { margin-bottom: 3rem; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.hide { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 720px) { .hide-sm { display: none !important; } }
@media (min-width: 721px) { .only-sm { display: none !important; } }

/* --------------------------------------------------------------------------
   24. GERİYE DÖNÜK TAKMA ADLAR
   Sayfalarda satır içi var(--...) kullanımları var; eski isimler yeni
   koyu paletle eşlenir ki hiçbir yerde beyaz/koyu metin kazası olmasın.
   -------------------------------------------------------------------------- */
:root {
  --robocari: var(--rc); --robocari-2: var(--rc-lit);
  --brand-1: var(--brand-lit); --brand-2: var(--brand);
  --brand-400: var(--brand-lit); --brand-300: var(--brand-pale); --brand-100: var(--brand-soft);
  --brand-700: var(--brand); --brand-600: var(--brand-mid); --brand-pale-alias: var(--brand-pale);
  --navy-900: var(--bg); --navy-850: var(--bg-2); --navy-800: var(--surface); --navy-700: var(--surface-3);
  --ink: var(--fg); --ink-2: var(--fg-2); --ink-3: var(--fg-3);
  --on-dark: var(--fg); --on-dark-2: var(--fg-2); --on-dark-3: var(--fg-3);
  --gray-50: var(--bg-2); --gray-100: var(--surface); --gray-200: var(--line); --gray-300: var(--line-2);
  --white: var(--surface);
  --rc-600: var(--rc-mid); --rc-400: var(--rc-lit); --rc-100: var(--rc-soft);
  --paper: var(--bg); --paper-2: var(--bg-2); --paper-3: var(--surface);
  --rule: var(--line); --rule-ink: var(--line-2);
}

@media print {
  .header, .footer, .float-stack, .mobile-nav, .cta-band { display: none !important; }
  body, .card { background: #fff !important; color: #000 !important; }
  .card { border: 1px solid #999; break-inside: avoid; }
}

/* ==========================================================================
   25. HAREKET KATMANI — giriş animasyonları ve etkileşim
   ========================================================================== */

/* --- Hero giriş: sol sütun sırayla belirir ------------------------------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero-grid > div:first-child > * {
  animation: riseIn .85s var(--ease) both;
}
.hero-grid > div:first-child > *:nth-child(1) { animation-delay: .05s; }
.hero-grid > div:first-child > *:nth-child(2) { animation-delay: .17s; }
.hero-grid > div:first-child > *:nth-child(3) { animation-delay: .29s; }
.hero-grid > div:first-child > *:nth-child(4) { animation-delay: .41s; }
.hero-grid > div:first-child > *:nth-child(5) { animation-delay: .53s; }

/* --- Hero ışığı yavaşça sürüklensin ------------------------------------- */
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  50%  { transform: translate3d(-4%, 3%, 0) scale(1.12); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
}
.hero::after { animation: auroraDrift 16s var(--ease-io) infinite; }

/* --- Butonlarda ışık süpürmesi ------------------------------------------ */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%;
  width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn:hover::after { animation: sweep .75s var(--ease-io) forwards; }
@keyframes sweep {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* --- Kartta imleci izleyen ışık ----------------------------------------- */
.card-hover { --mx: 50%; --my: 0%; }
.card-hover::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .3s var(--ease-io);
  background: radial-gradient(340px circle at var(--mx) var(--my),
    rgba(97, 147, 240, .16), transparent 65%);
}
.card-hover:hover::after { opacity: 1; }
.card-hover > * { position: relative; z-index: 1; }

/* --- Scroll belirmesi biraz daha zengin --------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px) scale(.985); }
[data-reveal].in { opacity: 1; transform: none; }

/* --- Bölüm başlıklarının altında ince çizgi büyüsün ---------------------- */
.eyebrow::before { transition: width .6s var(--ease); }
.sec-head.in .eyebrow::before, .page-head .eyebrow::before { width: 34px; }

/* ==========================================================================
   26. HERO GÖRSELİ — ürün ağı (orbit)
   Fotoğraf yerine, şirketin çok ürünlü yapısını anlatan canlı bir şema.
   ========================================================================== */
.orbit {
  position: relative; width: 100%; max-width: 540px; margin-inline: auto;
  aspect-ratio: 1 / 1; isolation: isolate;
}

/* Halkalar ve bağlantı çizgileri */
.orbit-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-rings .ring { fill: none; stroke: var(--line-2); stroke-dasharray: 3 9; }
.orbit-rings .ring-1 { animation: spin 46s linear infinite; transform-origin: 50% 50%; }
.orbit-rings .ring-2 { animation: spin 64s linear infinite reverse; transform-origin: 50% 50%; }
.orbit-rings .ring-3 { animation: spin 92s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

.orbit-rings .spoke { fill: none; stroke: var(--brand-line); stroke-width: 1; }
.orbit-rings .halo { fill: none; stroke: var(--brand-lit); stroke-width: 1.5; opacity: .25; }

/* Çizgi üzerinde akan veri noktaları */
.orbit-rings .pulse { fill: var(--brand-lit); filter: drop-shadow(0 0 6px var(--brand-lit)); }

/* Merkez — marka çekirdeği */
.orbit-core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 34%; aspect-ratio: 1; border-radius: 22%;
  display: grid; place-items: center; padding: 7%;
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--brand-line);
  box-shadow: 0 0 0 10px rgba(97, 147, 240, .05), 0 22px 50px -18px rgba(0, 0, 0, .95);
  z-index: 2;
}
.orbit-core img { width: 100%; height: auto; }
.orbit-core::before {
  content: ""; position: absolute; inset: -12%; border-radius: 26%;
  border: 1px solid var(--brand-line); opacity: .55;
  animation: coreBreathe 4.5s var(--ease-io) infinite;
}
@keyframes coreBreathe {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(1.07); opacity: .16; }
}

/* Ürün düğümleri */
.orbit-node {
  position: absolute; z-index: 3; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem .5rem .55rem; border-radius: 100px;
  background: rgba(15, 22, 38, .92);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .95);
  font-size: .8rem; font-weight: 700; color: var(--fg); white-space: nowrap;
  animation: bob 7s var(--ease-io) infinite;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.orbit-node:hover { border-color: var(--brand-line); background: rgba(21, 31, 51, .96); }
.orbit-node i {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-lit);
}
.orbit-node i svg { width: 14px; height: 14px; }
.orbit-node.is-rc i { background: var(--rc-soft); color: var(--rc-lit); }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.orbit-node.n1 { left: 50%;   top: 6%;   animation-delay: 0s; }
.orbit-node.n2 { left: 93%;   top: 33%;  animation-delay: .9s; }
.orbit-node.n3 { left: 82%;   top: 78%;  animation-delay: 1.8s; }
.orbit-node.n4 { left: 20%;   top: 86%;  animation-delay: 2.6s; }
.orbit-node.n5 { left: 6%;    top: 32%;  animation-delay: 3.4s; }

@media (max-width: 560px) {
  .orbit-node { font-size: .7rem; padding: .38rem .62rem .38rem .4rem; }
  .orbit-node i { width: 21px; height: 21px; }
  .orbit-node i svg { width: 11px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-rings .ring, .orbit-node, .orbit-core::before, .hero::after,
  .hero-grid > div:first-child > * { animation: none !important; }
  .orbit-rings .pulse { display: none; }
}

/* Hero görseli JS'e bağlı olmadan, CSS ile belirir (ilk ekran hep dolu olsun) */
@keyframes orbitIn {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.hero-visual { animation: orbitIn 1.1s var(--ease) .3s both; }
@media (prefers-reduced-motion: reduce) { .hero-visual { animation: none; } }

/* Dar ekranda orbit düğümleri kenardan taşmasın */
@media (max-width: 700px) {
  .orbit { max-width: 400px; }
  .orbit-node.n1 { left: 50%; top: 8%; }
  .orbit-node.n2 { left: 80%; top: 30%; }
  .orbit-node.n3 { left: 76%; top: 76%; }
  .orbit-node.n4 { left: 26%; top: 84%; }
  .orbit-node.n5 { left: 19%; top: 30%; }
}

/* ==========================================================================
   27. HERO SAHNESİ — 3B perspektifte gerçek ürün ekranı
   Orbit'in yerini alır: RoboCari ekranı öne çıkar, robot önde durur,
   çevresinde canlı veri rozetleri belirir.
   ========================================================================== */
.stage {
  position: relative; width: 100%; max-width: 620px; margin-inline: auto;
  aspect-ratio: 1 / .92; perspective: 1400px; isolation: isolate;
}

/* Arkadaki ışık ve halka */
.stage-glow {
  position: absolute; inset: 6% 2% 14%; z-index: 0; border-radius: 50%;
  background: radial-gradient(ellipse 55% 55% at 55% 45%, rgba(97, 147, 240, .38), transparent 68%);
  filter: blur(26px); animation: stageGlow 9s var(--ease-io) infinite;
}
@keyframes stageGlow {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.09); }
}
.stage-ring {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: 86%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
  border: 1px dashed var(--line-2);
  animation: spin 70s linear infinite;
}
.stage-ring::after {
  content: ""; position: absolute; inset: 11%; border-radius: 50%;
  border: 1px dashed var(--line);
}

/* Ana kart — gerçek uygulama ekranı, 3B eğik */
.stage-card {
  position: absolute; left: 4%; top: 8%; width: 88%; z-index: 2;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(97, 147, 240, .1);
  transform: rotateY(-15deg) rotateX(7deg) rotate(-1.2deg);
  transform-style: preserve-3d;
  animation: stageFloat 11s var(--ease-io) infinite;
}
.stage-card img { width: 100%; display: block; }
@keyframes stageFloat {
  0%, 100% { transform: rotateY(-15deg) rotateX(7deg) rotate(-1.2deg) translateY(0); }
  50%      { transform: rotateY(-11deg) rotateX(4deg) rotate(-.4deg) translateY(-14px); }
}
/* Ekran üzerinde gezinen tarama ışığı */
.stage-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(97, 147, 240, .22) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: stageScan 6.5s var(--ease-io) infinite;
}
@keyframes stageScan {
  0%, 62% { transform: translateX(-100%); }
  92%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

/* Öne çıkan robot */
.stage-robot {
  position: absolute; left: -3%; bottom: -2%; z-index: 3;
  height: 62%; width: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .9));
  animation: robotFloat 8s var(--ease-io) infinite;
}
@keyframes robotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Canlı veri rozetleri */
.chip {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border-radius: 100px;
  background: #0f1626; border: 1px solid var(--line-2);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .95);
  font-size: .78rem; font-weight: 700; color: var(--fg); white-space: nowrap;
  animation: chipIn .8s var(--ease) both, chipBob 6s var(--ease-io) infinite;
}
.chip i {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-lit);
}
.chip i svg { width: 12px; height: 12px; }
.chip.is-rc i { background: var(--rc-soft); color: var(--rc-lit); }
.chip b { color: var(--rc-lit); }
@keyframes chipIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes chipBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.chip-1 { right: -1%;  top: 16%; animation-delay: .8s, 0s; }
.chip-2 { right: 4%;   top: 46%; animation-delay: 1.1s, 1.2s; }
.chip-3 { right: 10%;  bottom: 12%; animation-delay: 1.4s, 2.4s; }

@media (max-width: 620px) {
  .stage { max-width: 420px; aspect-ratio: 1 / 1; }
  .chip { font-size: .68rem; padding: .38rem .6rem; }
  .chip i { width: 18px; height: 18px; }
  .chip-1 { right: -3%; top: 12%; }
  .chip-2 { right: 0%; top: 45%; }
  .chip-3 { right: 4%; bottom: 16%; }
  .stage-robot { height: 54%; left: -6%; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-card, .stage-robot, .stage-glow, .stage-ring, .chip { animation: none !important; }
  .stage-card::after { display: none; }
}

/* ==========================================================================
   29. EK BÖLÜM DOKULARI — aynı desen her yerde olmasın
   Kullanım: <section class="section tex-dots"> gibi.
   ========================================================================== */
.tex-dots, .tex-trace, .tex-beam { position: relative; isolation: isolate; overflow: clip; }

/* Nokta matrisi */
.tex-dots::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 15% 20%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 15% 20%, #000, transparent 70%);
}

/* Devre yolu izleri */
.tex-trace::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(0deg, var(--line) 1px, transparent 1px);
  background-size: 180px 100%, 100% 120px;
  mask-image: linear-gradient(115deg, #000 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 55%);
}
.tex-trace::after {
  content: ""; position: absolute; inset: auto -5% -50% auto; width: 45%; height: 110%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 70% 30%, rgba(62, 214, 135, .16), transparent 70%);
}

/* Yandan gelen ışık huzmesi */
.tex-beam::before {
  content: ""; position: absolute; inset: -30% auto -30% -20%; width: 65%;
  z-index: -1; pointer-events: none; transform: skewX(-14deg);
  background: linear-gradient(90deg, rgba(97, 147, 240, .1), transparent 70%);
}

/* RoboCari menüde bir tık öne çıksın — kendi rengiyle işaretli */
.nav-link[href="/robocari/"] { color: var(--rc-lit); font-weight: 700; }
.nav-link[href="/robocari/"]:hover { color: #fff; background: var(--rc-soft); }
.nav-link[href="/robocari/"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rc-lit); flex: none; margin-right: .1rem;
  box-shadow: 0 0 0 3px var(--rc-soft);
  animation: pulse 2.6s var(--ease) infinite;
}
.nav-item.is-active > .nav-link[href="/robocari/"]::after { background: var(--rc-lit); }
.mobile-nav a[href="/robocari/"] { color: var(--rc-lit); }

/* Ekran görüntüleri asla kırpılmasın (split içinde de) */
.screenshot img, .split-media .screenshot img {
  aspect-ratio: auto !important; object-fit: contain !important;
  border-radius: 0; box-shadow: none; height: auto;
}

/* ==========================================================================
   30. HERO GÖRSELİ — teknoloji çekirdeği
   Tek bir ürünün çizimi değil, kurduğumuz teknolojinin haritası:
   ortada işlem çekirdeği, çevresinde robotik / bulut yazılım / güvenlik /
   ağ altyapısı düğümleri. Yörüngeler, veri akışı ve nabız canlıdır.
   ========================================================================== */
.techcore {
  position: relative; width: 100%; max-width: 560px; margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.techcore svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* Arka plan parıltısı */
.tc-glow {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 88%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(43, 76, 143, .5), transparent 62%),
    radial-gradient(circle at 74% 26%, rgba(18, 135, 76, .28), transparent 55%);
  filter: blur(34px);
}

/* Yörüngeler ve zemin ızgarası */
.tc-grid  { fill: none; stroke: var(--line); stroke-width: 1; }
.tc-orbit {
  fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 9;
  transform-origin: 260px 260px; animation: spin 76s linear infinite;
}
.tc-orbit.o2 { stroke-dasharray: 2 15; animation-duration: 120s; animation-direction: reverse; }
.tc-orbit.o3 { stroke: var(--line); stroke-dasharray: 1 12; animation-duration: 150s; }
.tc-arc {
  fill: none; stroke: var(--brand-lit); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 90 1370; opacity: .7;
  transform-origin: 260px 260px; animation: spin 22s linear infinite;
}
.tc-arc.a2 { stroke: var(--rc-lit); stroke-dasharray: 54 1370; opacity: .6;
             animation-duration: 34s; animation-direction: reverse; }

/* Yörüngedeki uydular */
.tc-sat { transform-origin: 260px 260px; animation: spin 30s linear infinite; }
.tc-sat.s2 { animation-duration: 46s; animation-direction: reverse; }
.tc-sat.s3 { animation-duration: 64s; }
.tc-sat circle { fill: var(--brand-lit); }
.tc-sat.rc circle { fill: var(--rc-lit); }

/* Çekirdek */
.tc-hex     { fill: rgba(15, 22, 38, .82); stroke: var(--brand-line); stroke-width: 1.4; }
.tc-hex-in  { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 5 7; }
.tc-chip    { fill: rgba(21, 31, 51, .95); stroke: var(--brand-lit); stroke-width: 2; }
.tc-chip-in { fill: var(--brand-soft); stroke: var(--brand-lit); stroke-width: 1.2; }
.tc-pin     { stroke: var(--brand-lit); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.tc-die     { fill: var(--brand-pale); opacity: .8; }
.tc-die.hot { fill: var(--rc-lit); opacity: 1; animation: tcBlink 2.4s var(--ease-io) infinite; }
@keyframes tcBlink { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.tc-pulse {
  fill: none; stroke: var(--brand-lit); stroke-width: 1.4; opacity: 0;
  animation: tcPulse 3.8s var(--ease-io) infinite;
}
.tc-pulse.p2 { animation-delay: 1.9s; }
@keyframes tcPulse {
  0%   { r: 62;  opacity: .5; }
  70%  { r: 140; opacity: 0; }
  100% { r: 140; opacity: 0; }
}

/* Veri akış hatları */
.tc-link { fill: none; stroke: var(--brand-line); stroke-width: 1.3; }
.tc-flow {
  fill: none; stroke: var(--brand-lit); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 14 96; animation: tcFlow 2.8s linear infinite;
}
.tc-flow.rc { stroke: var(--rc-lit); }
.tc-flow.d2 { animation-delay: .7s; }
.tc-flow.d3 { animation-delay: 1.4s; }
.tc-flow.d4 { animation-delay: 2.1s; }
@keyframes tcFlow { to { stroke-dashoffset: -110; } }

/* Düğümler */
.tc-node { animation: riseIn .85s var(--ease) both; }
.tc-node.n1 { animation-delay: .45s; }
.tc-node.n2 { animation-delay: .6s; }
.tc-node.n3 { animation-delay: .75s; }
.tc-node.n4 { animation-delay: .9s; }
.tc-node-bg { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.4; }
.tc-node-ring {
  fill: none; stroke: var(--brand-line); stroke-width: 1; opacity: .55;
  animation: tcBreathe 4.4s var(--ease-io) infinite;
}
.tc-node.n2 .tc-node-ring { animation-delay: 1.1s; }
.tc-node.n3 .tc-node-ring { animation-delay: 2.2s; }
.tc-node.n4 .tc-node-ring { animation-delay: 3.3s; }
@keyframes tcBreathe {
  0%, 100% { opacity: .22; }
  50%      { opacity: .8; }
}
.tc-ico { fill: none; stroke: var(--brand-lit); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tc-node.rc .tc-node-bg   { stroke: var(--rc-line); }
.tc-node.rc .tc-node-ring { stroke: var(--rc-line); }
.tc-node.rc .tc-ico       { stroke: var(--rc-lit); }
.tc-label { fill: var(--fg); font: 800 14px/1 var(--font); letter-spacing: -.01em; text-anchor: middle; }
.tc-sub   { fill: var(--fg-3); font: 700 10.5px/1 var(--font); letter-spacing: .1em; text-anchor: middle; }

@media (max-width: 620px) {
  .techcore { max-width: 380px; }
  .tc-label { font-size: 15px; }
  .tc-sub   { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-orbit, .tc-arc, .tc-sat, .tc-pulse, .tc-flow, .tc-node,
  .tc-node-ring, .tc-die.hot { animation: none !important; }
  .tc-pulse { display: none; }
}

/* ==========================================================================
   31. ROBOCARİ VİTRİNİ — ana sayfadaki ön muhasebe bölümü
   Sitenin en görünür bloğu: uygulamanın gerçek ekranı, özet kartlar,
   modül şeritleri ve yapay zekâ asistanı bir arada.
   ========================================================================== */
.rc-showcase { position: relative; overflow: hidden; }
.rc-showcase::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 8% 2%,  rgba(22, 163, 92, .17), transparent 62%),
    radial-gradient(ellipse 45% 55% at 95% 98%, rgba(22, 163, 92, .12), transparent 60%);
}
.rc-showcase > .container { position: relative; z-index: 1; }
.rc-showcase .eyebrow { color: var(--rc-lit); }
.rc-grad {
  background: linear-gradient(100deg, var(--rc-lit), #86f2bd 60%, var(--brand-pale));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Ana panel */
.rc-panel {
  display: grid; gap: clamp(1.6rem, 3.2vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  padding: clamp(1.25rem, 2.4vw, 2.2rem);
  border: 1px solid var(--rc-line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(22, 163, 92, .1), rgba(10, 16, 32, .78) 52%), var(--surface);
  box-shadow: var(--sh-lg);
}
@media (max-width: 900px) { .rc-panel { grid-template-columns: 1fr; } }
.rc-panel h3 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); margin-bottom: .9rem; }
.rc-panel > div { min-width: 0; }

/* Özet kartlar — uygulamanın ana ekranındaki rakamların aynısı */
.rc-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: .6rem; margin-bottom: 1.4rem;
}
/* Panel içinde dört kart 2×2 otursun — tek başına kalan kart olmasın */
.rc-panel .rc-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-kpi div {
  padding: .78rem .85rem; border-radius: var(--r-sm);
  background: rgba(6, 10, 18, .62); border: 1px solid var(--line);
}
.rc-kpi span {
  display: block; font-size: .68rem; font-weight: 700; color: var(--fg-3);
  letter-spacing: .08em; text-transform: uppercase;
}
.rc-kpi b {
  display: block; margin-top: .3rem; font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 800; letter-spacing: -.025em; color: var(--fg); white-space: nowrap;
}
.rc-kpi em { font-style: normal; font-size: .73rem; font-weight: 700; color: var(--rc-lit); }
.rc-kpi .neutral b { color: var(--fg-2); }

/* Tarayıcı çerçevesi — ekran görüntüsü gerçek uygulamadan */
.app-frame {
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-2);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(62, 214, 135, .14);
}
.app-bar {
  display: flex; align-items: center; gap: .38rem;
  padding: .55rem .8rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.app-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-3); flex: none; }
.app-bar i:first-child { background: #f0736a; }
.app-bar i:nth-child(2) { background: #e0b341; }
.app-bar i:nth-child(3) { background: var(--rc); }
.app-bar u {
  text-decoration: none; margin-left: .6rem; padding: .12rem .6rem; border-radius: 100px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: .71rem; font-weight: 700; color: var(--fg-3); letter-spacing: .02em;
}
.app-frame img { width: 100%; height: auto; display: block; }
.app-frame + .app-frame { margin-top: .75rem; }

.rc-caption { font-size: var(--t-xs); color: var(--fg-3); margin-top: .7rem; }

/* Modül şeridi */
.rc-mods {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
}
.rc-mods span {
  padding: .45rem .9rem; border-radius: 100px;
  background: var(--rc-soft); border: 1px solid var(--rc-line);
  color: var(--fg); font-size: .81rem; font-weight: 700;
}
.rc-mods span.more { background: var(--surface-2); border-color: var(--line-2); color: var(--fg-2); }

/* Üç destek kartı */
.rc-tri { margin-top: clamp(1.6rem, 2.6vw, 2.4rem); }
.rc-tri .media-tag { background: rgba(18, 135, 76, .88); border-color: var(--rc-line); color: #fff; }
.rc-tri .link-arrow { color: var(--rc-lit); }

/* ==========================================================================
   32. ÜRÜN SAHNESİ — robot detay sayfalarındaki büyük görsel
   Robot PNG'leri saydam ve dikeydir; kırpılmamalı, ezilmemeli.
   ========================================================================== */
.product-stage {
  position: relative; display: grid; place-items: center;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 60% 48% at 50% 34%, rgba(97, 147, 240, .16), transparent 68%),
    linear-gradient(175deg, var(--surface-2), var(--bg-2));
  overflow: hidden;
}
.product-stage::before {
  content: ""; position: absolute; left: 50%; bottom: 11%; translate: -50% 0;
  width: 62%; height: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .78), transparent 70%);
  filter: blur(7px);
}
.product-stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%; pointer-events: none;
  background: linear-gradient(to top, rgba(97, 147, 240, .09), transparent);
}
.product-stage img {
  position: relative; z-index: 1;
  width: auto; max-width: 100%;
  height: auto; max-height: min(62vh, 520px);
  aspect-ratio: auto; object-fit: contain;
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 26px 38px rgba(0, 0, 0, .8));
}
.product-stage .stage-tag {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  padding: .3rem .75rem; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line-2);
  font-size: .73rem; font-weight: 700; color: var(--fg-2); letter-spacing: .03em;
}
@media (max-width: 620px) { .product-stage img { max-height: 380px; } }

/* Saydam ürün PNG'leri hiçbir yerde kırpılmasın — güvenlik ağı */
.split-media img[src*="/urunler/"] {
  aspect-ratio: auto; object-fit: contain;
  width: auto; max-width: 100%; margin-inline: auto; display: block;
  max-height: min(62vh, 520px);
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 26px 38px rgba(0, 0, 0, .8));
}


/* --------------------------------------------------------------------------
   PERFORMANS — ekran dışındaki bölümler boşuna hesaplanmasın
   -------------------------------------------------------------------------- */
.section, .section-sm, .footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}
.hero, .page-head { content-visibility: visible; }

/* Sürekli dönen öğeleri kendi katmanına al — ana iş parçacığını yormasın */
.tc-orbit, .tc-arc, .tc-sat, .marquee-track { will-change: transform; }

/* ==========================================================================
   33. HAREKET KATMANI — "Kaan Robotik imzası"

   Tek kural: yalnızca transform ve opacity canlandırılır. Bu iki özellik
   ekran kartında çalışır; tarayıcı sayfa düzenini yeniden hesaplamaz, bu
   yüzden efektler eski telefonlarda bile takılmaz. Genişlik, blur, gölge
   ve renk animasyonu yoktur.

   İmleç efektleri yalnızca gerçek fare olan cihazlarda çalışır. Kullanıcı
   işletim sisteminde "hareketi azalt" seçtiyse tamamı kapanır.
   ========================================================================== */

/* --- 1) Üstte okuma rayı: sayfanın neresinde olduğunuzu gösterir -------- */
.rail { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 130; pointer-events: none; }
.rail i {
  display: block; height: 100%; transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--brand), var(--brand-lit) 45%, var(--rc-lit));
  will-change: transform;
}
.rail b {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rc-lit); box-shadow: 0 0 12px 2px rgba(62, 214, 135, .75);
  transform: translateX(calc(var(--p, 0) * (100vw - 8px)));
  opacity: calc(var(--p, 0) * 8); will-change: transform;
}

/* --- 2) Kartlar imleçle hafifçe eğilir ---------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .card-hover { --tx: 0deg; --ty: 0deg; --lift: 0px; }
  .card-hover,
  .card-hover:hover {
    transform: perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(var(--lift));
  }
  .card-hover:hover { --lift: -5px; }
  .card-hover.is-tilting { transition: transform .1s linear, box-shadow .3s var(--ease), border-color .25s; }
}

/* --- 3) Birincil butonlarda ışık süpürmesi ------------------------------ */
.btn-primary, .btn-robocari, .btn-light { position: relative; overflow: hidden; }
.btn-primary > *, .btn-robocari > *, .btn-light > * { position: relative; z-index: 1; }
.btn-primary::after, .btn-robocari::after, .btn-light::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: translateX(0) skewX(-16deg); pointer-events: none;
  transition: transform .8s var(--ease);
}
.btn-light::after { background: linear-gradient(100deg, transparent, rgba(43, 76, 143, .22), transparent); }
.btn-primary:hover::after, .btn-robocari:hover::after, .btn-light:hover::after {
  transform: translateX(390%) skewX(-16deg);
}

/* --- 4) Bağlantı okunun altında çizgi büyür ----------------------------- */
.link-arrow { position: relative; }
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 21px; bottom: -2px; height: 1px;
  background: currentColor; opacity: .45;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .38s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }

/* --- 5) Görseller perde açılır gibi belirir -----------------------------
   Varsayılan açık: perde yalnızca "henüz belirmemiş" bir bloğun içindeyken
   kapalıdır. Böylece betik çalışmasa da hiçbir görsel örtülü kalmaz. */
.media-figure, .app-frame { isolation: isolate; }
.media-figure::before, .app-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: var(--surface-2);
  transform-origin: 50% 100%; transform: scaleY(0);
  transition: transform .9s var(--ease);
}
[data-reveal]:not(.in) .media-figure::before,
[data-reveal]:not(.in) .app-frame::before,
[data-reveal]:not(.in).app-frame::before { transform: scaleY(1); }

/* Betik kapalıysa beliren bloklar da perdeler de devre dışı kalsın */
@media (scripting: none) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .media-figure::before, .app-frame::before { display: none; }
}

/* --- 6) Sektör kartlarında üst çizgi ve etiket ------------------------- */
.sector-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--brand-lit), var(--rc-lit));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease);
}
.sector-card:hover::before { transform: scaleX(1); }
.sector-card b { transition: transform .35s var(--ease); }
.sector-card:hover b { transform: translateY(-4px); }

/* --- 7) Süreç adımlarında akan veri darbesi ---------------------------- */
.step { overflow: hidden; }
.step .pulse {
  position: absolute; top: 19px; left: 58px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-lit); box-shadow: 0 0 10px 1px rgba(97, 147, 240, .8);
  opacity: 0; animation: stepPulse 4.2s var(--ease-io) infinite;
}
.step:nth-child(2) .pulse { animation-delay: .5s; }
.step:nth-child(3) .pulse { animation-delay: 1s; }
.step:last-child .pulse { display: none; }
@keyframes stepPulse {
  0%       { transform: translateX(0);     opacity: 0; }
  8%       { opacity: 1; }
  55%, 100% { transform: translateX(220px); opacity: 0; }
}
@media (max-width: 760px) { .step .pulse { display: none; } }

/* --- 8) WhatsApp düğmesinde nabız halkası ------------------------------ */
.fab { position: relative; }
.fab-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #1aab54; pointer-events: none;
  animation: fabPulse 3.6s var(--ease-io) infinite;
}
@keyframes fabPulse {
  0%        { transform: scale(1);   opacity: .7; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* --- 9) Hero sahnesi imleci hafifçe izler ------------------------------ */
.techcore {
  transform: translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 12px), 0);
  transition: transform .6s var(--ease);
}

/* --- 10) Kaydırmaya bağlı derinlik (tarayıcı destekliyorsa, JS'siz) ----
   animation-timeline ana iş parçacığında değil, kaydırma zamanlayıcısında
   çalışır; yani hiçbir kaydırma olayı dinlenmez. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 780px) {
    .split-media > img, .hero-mosaic img {
      animation: derinlik linear both;
      animation-timeline: view();
      animation-range: entry 8% exit 92%;
    }
    @keyframes derinlik {
      from { transform: translateY(16px); }
      to   { transform: translateY(-16px); }
    }
  }
}

/* --- 11) Tablo satırları imleçle aydınlanır ---------------------------- */
.spec-table tbody tr, .compare tbody tr { transition: background .2s var(--ease-io); }
.spec-table tbody tr:hover, .compare tbody tr:hover { background: var(--surface-2); }

/* --- Hareketi azalt: tamamı kapanır ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rail, .step .pulse, .fab-wa::after { display: none; }
  .media-figure::before, .app-frame::before { display: none; }
  .techcore { transform: none; }
  .card-hover { transform: none; }
  .card-hover:hover { transform: translateY(-4px); }
}

/* ==========================================================================
   34. YZ ASİSTAN SOHBETİ — fotoğraf değil, arayüzün kendisi
   Her ölçekte net kalır (görsel değil, metin), koyu/parlak dengesi site
   paletinden gelir. Animasyon yalnızca üç noktanın nabzıdır.
   ========================================================================== */
.chat {
  border: 1px solid var(--rc-line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(165deg, rgba(22, 163, 92, .1), rgba(10, 16, 32, .8) 55%), var(--surface);
  box-shadow: var(--sh-lg);
}
.chat-bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  background: rgba(6, 10, 18, .5);
}
.chat-ava {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--rc-soft); color: var(--rc-lit); border: 1px solid var(--rc-line);
}
.chat-ava svg { width: 20px; height: 20px; }
.chat-bar b { display: block; font-size: .92rem; color: var(--fg); }
.chat-bar small { display: block; font-size: .74rem; color: var(--fg-3); }
.chat-live {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--rc-lit); box-shadow: 0 0 0 4px var(--rc-soft);
  animation: pulse 2.6s var(--ease) infinite;
}

.chat-body { padding: 1.1rem 1rem 1rem; display: grid; gap: .8rem; }
.bubble { margin: 0; border-radius: var(--r-md); font-size: .93rem; line-height: 1.55; }
.bubble.ask {
  justify-self: end; max-width: 88%;
  padding: .65rem .95rem; border-bottom-right-radius: 4px;
  background: var(--surface-3); color: var(--fg); border: 1px solid var(--line-2);
}
.bubble.ans {
  justify-self: start; max-width: 96%;
  padding: .85rem .95rem; border-bottom-left-radius: 4px;
  background: rgba(6, 10, 18, .62); border: 1px solid var(--rc-line); color: var(--fg-2);
}
.bubble.ans > p { margin: 0 0 .7rem; color: var(--fg-2); font-size: .93rem; }
.bubble.ans strong { color: var(--rc-lit); }

.chat-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.chat-table th {
  text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-3); padding: 0 .5rem .4rem 0;
  border-bottom: 1px solid var(--line);
}
.chat-table td { padding: .42rem .5rem .42rem 0; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.chat-table tr:last-child td { border-bottom: 0; }
.chat-table td:nth-child(2) { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.chat-table td:last-child { color: var(--warn); white-space: nowrap; }
.chat-src { display: block; margin-top: .6rem; font-size: .72rem; color: var(--fg-3); }

.bubble.typing { display: inline-flex; gap: .3rem; padding: .9rem 1rem; }
.bubble.typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rc-lit); opacity: .35;
  animation: yaziyor 1.3s var(--ease-io) infinite;
}
.bubble.typing i:nth-child(2) { animation-delay: .18s; }
.bubble.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes yaziyor {
  0%, 60%, 100% { transform: translateY(0);    opacity: .3; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.chat-input {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 1rem 1rem; padding: .7rem .9rem;
  border: 1px solid var(--line-2); border-radius: 100px;
  background: rgba(6, 10, 18, .55); color: var(--fg-3); font-size: .88rem;
}
.chat-input svg { width: 17px; height: 17px; margin-left: auto; color: var(--rc-lit); }

@media (prefers-reduced-motion: reduce) {
  .bubble.typing i, .chat-live { animation: none; }
}

/* ==========================================================================
   35. GİRİŞ BÖLÜMÜ — modern katman
   Arka planda yavaşça salınan renk bulutları, istatistikler kart hâline
   geldi, butonların altına kısa güven şeridi eklendi. Bulutlar blur filtresi
   kullanmaz; yumuşaklık doğrudan degradeden gelir, bu yüzden ucuzdur.
   ========================================================================== */
.hero-aurora {
  position: absolute; inset: -12% -6% -18%; z-index: -1;
  display: block; pointer-events: none; overflow: hidden;
}
.hero-aurora span {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
}
.hero-aurora .a1 {
  width: 48vw; height: 48vw; left: 42%; top: -16%;
  background: radial-gradient(circle at 50% 50%, rgba(43, 76, 143, .55), transparent 66%);
  animation: aurora1 28s var(--ease-io) infinite alternate;
}
.hero-aurora .a2 {
  width: 36vw; height: 36vw; left: 63%; top: 32%;
  background: radial-gradient(circle at 50% 50%, rgba(22, 163, 92, .3), transparent 68%);
  animation: aurora2 34s var(--ease-io) infinite alternate;
}
.hero-aurora .a3 {
  width: 34vw; height: 34vw; left: -10%; top: 34%;
  background: radial-gradient(circle at 50% 50%, rgba(97, 147, 240, .2), transparent 70%);
  animation: aurora3 42s var(--ease-io) infinite alternate;
}
@keyframes aurora1 { to { transform: translate3d(-7%, 9%, 0)  scale(1.14); } }
@keyframes aurora2 { to { transform: translate3d(6%, -11%, 0) scale(1.2);  } }
@keyframes aurora3 { to { transform: translate3d(9%, -7%, 0)  scale(1.1);  } }

/* Başlıktaki vurgulu kelime gerçek degrade olsun */
.hero .gradient-text {
  background: linear-gradient(100deg, var(--brand-lit) 8%, #9ec2ff 46%, var(--rc-lit));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Butonların altındaki kısa güven şeridi */
.hero-marks {
  display: flex; flex-wrap: wrap; gap: .55rem 1.35rem;
  margin: -1.35rem 0 0; padding: 0; list-style: none;
}
.hero-marks li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 600; color: var(--fg-3);
}
.hero-marks li::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236193f0' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/* İstatistikler artık kart */
.hero .stat-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 452px; gap: .7rem;
  border-top: 0; padding-top: 2.4rem; margin-top: 0;
}
.hero .stat {
  padding: .95rem 1.05rem; border-radius: var(--r-sm);
  background: rgba(15, 22, 38, .58); border: 1px solid var(--line);
  transition: transform .3s var(--ease), border-color .25s var(--ease-io), background .25s;
}
.hero .stat:hover { transform: translateY(-3px); border-color: var(--brand-line); background: rgba(21, 31, 51, .7); }
.hero .stat b { font-size: clamp(1.55rem, 2.2vw, 2rem); margin-bottom: .28rem; }
.hero .stat span { font-size: .78rem; }

@media (max-width: 620px) {
  .hero-marks { gap: .45rem 1rem; }
  .hero .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora span { animation: none; }
}