/* NetaRota landing
   1. Değişkenler  2. Taban ve tipografi  3. Ortak parçalar
   4. Bölümler (sayfa sırasıyla)  5. Yardımcı sınıflar */

/* 1. Değişkenler ------------------------------------------------------- */

/* Tipografi ölçeği: mobil / tablet-laptop (≥768) / desktop (≥1440) */
:root {
  --font-head: Jost, Inter, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --fs-display-xl: 40px;
  --fs-display: 34px;
  --fs-h1: 30px;
  --fs-h2: 21px;
  --fs-h3: 18px;
  --fs-eyebrow: 13px;
  --fs-body-l: 17px;
  --fs-body: 16px;
  --fs-body-s: 15px;
  --fs-label: 15px;
  --fs-helper: 13px;
  --fs-caption: 13px;
  --fs-button: 15px;
  --fs-button-s: 14px;

  --navy: #0C2340;
  --navy-deep: #081A31;
  --navy-screen: #0B1D36;
  --navy-bar: #0E2442;
  --navy-hover: #163A66;
  --navy-soft: #23395A;
  --cream: #F0EEE9;
  --aqua: #B1E4E3;
  --aqua-hover: #CDEFEE;
  --aqua-light: #D6F2F1;
  --mint: #E9F6F5;
  --teal: #2A6F6D;
  --slate: #B1C2D6;
  --mist: #D9E1EA;
  --ink: #3E4C63;
  --grey: #55606E;
  --amber: #FFAD00;
  --green: #1F9D61;
  --white: #FFFFFF;

  --hero-height: max(640px, 100vh);
}

@media (min-width: 768px) {
  :root {
    --fs-display-xl: 60px;
    --fs-display: 46px;
    --fs-h1: 38px;
    --fs-h2: 22px;
    --fs-h3: 19px;
    --fs-body-l: 18px;
    --fs-body: 16px;
    --fs-helper: 14px;
    --fs-button: 16px;
  }
}

@media (min-width: 1440px) {
  :root {
    --fs-display-xl: 72px;
    --fs-display: 56px;
    --fs-h1: 44px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-eyebrow: 14px;
    --fs-body-l: 20px;
    --fs-body: 17px;
  }
}

/* 2. Taban ve tipografi ------------------------------------------------ */

body {
  margin: 0;
  background: var(--navy);
  font: 400 var(--fs-body)/1.55 var(--font-body);
  letter-spacing: -.01em;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }

.t-dxl { font: 600 var(--fs-display-xl)/1.02 var(--font-head); letter-spacing: -.025em; }
.t-d { font: 600 var(--fs-display)/1.05 var(--font-head); letter-spacing: -.02em; }
.t-h1 { font: 600 var(--fs-h1)/1.1 var(--font-head); letter-spacing: -.02em; }
.t-h2 { font: 600 var(--fs-h2)/1.25 var(--font-head); letter-spacing: -.015em; }
.t-h3 { font: 600 var(--fs-h3)/1.3 var(--font-head); letter-spacing: -.01em; }
.t-eb { font: 600 var(--fs-eyebrow)/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; }
.t-bl { font: 400 var(--fs-body-l)/1.55 var(--font-body); letter-spacing: -.01em; }
.t-b { font: 400 var(--fs-body)/1.55 var(--font-body); letter-spacing: -.01em; }
.t-bs { font: 400 var(--fs-body-s)/1.5 var(--font-body); letter-spacing: 0; }
.t-lb { font: 500 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0; }
.t-cap { font: 500 var(--fs-caption)/1.4 var(--font-body); letter-spacing: .01em; }
.t-btn { font: 600 var(--fs-button)/1 var(--font-body); letter-spacing: 0; }
.num { font-family: var(--font-head); font-variant-numeric: tabular-nums; }

/* 3. Ortak parçalar ---------------------------------------------------- */

.page { color: var(--cream); background: var(--navy); }

.section--navy { background: var(--navy); }
.section--cream { background: var(--cream); color: var(--navy); }
.section--aqua { background: var(--aqua); color: var(--navy); }

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 112px 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.section-inner--features { padding: 88px 24px 112px; }
.section-inner--benefits { gap: 96px; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section-head--captain { gap: 32px; }
.section-title { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.section-title--captain { flex: 1 1 520px; min-width: 0; max-width: 680px; }
.section-lead { max-width: 420px; }
.section-lead--wide { max-width: 440px; }
.section-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Butonlar */
.btn-t { color: var(--navy); background: var(--aqua); padding: 16px 24px; border-radius: 8px; }
.btn-t:hover { background: var(--aqua-hover); }
.btn-o { color: var(--cream); border: 1px solid rgba(240,238,233,0.3); background: rgba(12,35,64,0.45); padding: 16px 24px; border-radius: 8px; }
.btn-o:hover { border-color: rgba(240,238,233,0.55); }
.btn-o--light { color: var(--navy); border-color: rgba(12,35,64,0.3); background: transparent; }
.btn-o--light:hover { border-color: rgba(12,35,64,0.55); }
.btn-n { color: var(--cream); background: var(--navy); padding: 16px 24px; border-radius: 8px; }
.btn-n:hover { background: var(--navy-hover); }

.lnk { color: var(--slate); }
.lnk--mist { color: var(--mist); }
.lnk:hover { color: var(--aqua); }

/* Noktalar */
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot--amber { background: var(--amber); }
.dot--green { background: var(--green); }
.dot--lg { width: 7px; height: 7px; }
.dot--xl { width: 8px; height: 8px; }
.dot--live { width: 7px; height: 7px; background: var(--aqua); box-shadow: 0 0 0 4px rgba(177,228,227,0.25); }

/* Kartlar */
.card-row { display: flex; flex-wrap: wrap; gap: 16px; }
.card {
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(12,35,64,0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card--wide { flex: 2 1 560px; }
.card--narrow { flex: 1 1 320px; }
.card--half { flex: 1 1 520px; }
.card__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; }

.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.avatar--ring { box-shadow: 0 0 0 2px var(--aqua); }
.avatar--sm { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--navy); }

.icon-tile { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--navy); display: flex; align-items: center; justify-content: center; }

/* Panel görselini saran cihaz çerçevesi */
.mock-frame { position: relative; }
.mock-frame--hero { padding: 8px; border-radius: 22px; background: linear-gradient(180deg, rgba(240,238,233,0.14), rgba(240,238,233,0.04)); box-shadow: 0 60px 120px -40px rgba(0,0,0,0.6), 0 24px 48px -24px rgba(12,35,64,0.5); }
.mock-frame--panel { padding: 8px; border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12) 40%, rgba(12,35,64,0.25)); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 60px 110px -36px rgba(12,35,64,0.6), 0 20px 40px -20px rgba(12,35,64,0.45); }
.mock-frame--prep { padding: 7px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12) 40%, rgba(12,35,64,0.25)); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 50px 90px -30px rgba(12,35,64,0.6), 0 18px 36px -18px rgba(12,35,64,0.45); }
.mock-screen { overflow: hidden; background: var(--navy-screen); box-shadow: inset 0 0 0 1px rgba(240,238,233,0.10); }
.mock-frame--hero .mock-screen { border-radius: 15px; }
.mock-frame--panel .mock-screen { border-radius: 17px; }
.mock-frame--prep .mock-screen { border-radius: 16px; }
.mock-shot { width: 100%; height: auto; display: block; }

.win-dots { display: flex; gap: 7px; }
.win-dots span { width: 10px; height: 10px; border-radius: 50%; }
.win-dots span:nth-child(1) { background: #EC6A5E; }
.win-dots span:nth-child(2) { background: #F4BF4F; }
.win-dots span:nth-child(3) { background: #61C554; }
.win-dots--lg { align-items: center; gap: 8px; }
.win-dots--lg span { width: 11px; height: 11px; }

.panel-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; background: var(--navy-bar); border-bottom: 1px solid rgba(240,238,233,0.08); }
.panel-bar--prep { height: 38px; padding: 0 14px; }
.panel-bar__title { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 8px; background: rgba(240,238,233,0.06); color: var(--mist); }

.ground-shadow { position: absolute; left: 8%; right: 8%; bottom: -32px; height: 70px; background: radial-gradient(ellipse at center, rgba(12,35,64,0.45), rgba(12,35,64,0) 70%); filter: blur(14px); }
.ground-shadow--prep { left: 6%; right: 6%; bottom: -28px; height: 60px; filter: blur(12px); }

/* 4. Bölümler ---------------------------------------------------------- */

/* Üst menü */
.site-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
  border-bottom: 1px solid rgba(240,238,233,0.14);
}
.site-nav { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-nav__home { display: flex; align-items: center; padding: 6px 0; }
.site-nav__logo { height: 30px; width: auto; display: block; }
.site-nav__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.site-nav__sep { width: 1px; height: 24px; background: rgba(240,238,233,0.28); margin: 0 6px; }

.login-links { display: flex; align-items: center; gap: 16px; }
.login-sep { width: 1px; height: 14px; background: rgba(240,238,233,0.28); }
.login-link { position: relative; padding: 12px 2px; font-weight: 400; color: var(--white); }
.login-link::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 1px; background: var(--aqua); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.login-link:hover::after { transform: scaleX(1); }
.login-link:not(.login-link--captain):hover { color: var(--cream); }

.menu-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--cream); padding: 0; cursor: pointer; }
.menu-btn:hover { color: var(--aqua); }

/* Dümen simgesi: menü açılıp kapanırken döner */
.helm { transition: transform .8s cubic-bezier(.22,1,.36,1); transform-origin: 50% 50%; }
.menu-btn:hover .helm { transform: rotate(60deg); }
.helm-open.open { transform: rotate(240deg); }
.helm-close { transform: rotate(-240deg); }
.menu-panel.open .helm-close { transform: rotate(0deg); }
.menu-panel.open .menu-btn:hover .helm-close { transform: rotate(-60deg); }

/* Açılır menü */
.menu-backdrop { position: absolute; top: 0; left: 0; right: 0; height: 100vh; border: none; padding: 0; margin: 0; background: rgba(5,15,30,0.55); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.menu-backdrop.open { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.menu-panel { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-104%); visibility: hidden; transition: transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s linear .55s; }
.menu-panel.open { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.menu-sheet { width: 100%; background: rgba(15,42,76,0.78); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-radius: 0; box-shadow: 0 40px 80px -24px rgba(0,0,0,0.6); color: var(--cream); overflow: hidden; }
.menu-bar { max-width: 1200px; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid rgba(240,238,233,0.10); }
.menu-bar__logo { height: 30px; width: auto; display: block; padding: 6px 0; }
.menu-bar__actions { display: flex; align-items: center; gap: 18px; }
.menu-bar__sep { width: 1px; height: 20px; background: rgba(240,238,233,0.28); }
.menu-grid { max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: 40px 24px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px 32px; }
.menu-col { display: flex; flex-direction: column; gap: 12px; }
.menu-h { display: flex; align-items: center; gap: 10px; color: var(--cream); }
.menu-h:hover { color: var(--aqua); }
.menu-h--spaced { margin-top: 12px; }
.menu-h__mark { height: 13px; width: auto; display: block; flex: none; }
.menu-foot { width: 100%; background: var(--navy-deep); }
.menu-foot__inner { max-width: 1200px; margin: 0 auto; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; padding: 20px 24px; }

/* Menü altı: demo panelleri açılır listesi (yukarı açılır) */
.login-dd { position: relative; }
.login-dd__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(240,238,233,0.22); color: var(--white); cursor: pointer; list-style: none; }
.login-dd__btn::-webkit-details-marker { display: none; }
.login-dd__btn:hover { border-color: var(--aqua); }
.login-dd__chev { transition: transform .2s ease; }
.login-dd[open] .login-dd__chev { transform: rotate(180deg); }
.login-dd__list { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 200px; padding: 6px; border-radius: 12px; background: #0F2A4C; border: 1px solid rgba(240,238,233,0.14); box-shadow: 0 20px 40px -16px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.login-dd__item { padding: 10px 12px; border-radius: 8px; color: var(--white); font-weight: 400; }
.login-dd__item:hover { background: rgba(177,228,227,0.12); color: var(--aqua); }
.login-dd__sep { color: rgba(240,238,233,0.4); margin: 0 4px; }

.lang-switch { display: inline-flex; align-items: center; gap: 18px; font-weight: 400; }
.lang { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--slate); font-weight: 400; transition: color .2s ease; }
.lang svg { display: block; border-radius: 2px; opacity: .4; filter: grayscale(.8); transition: opacity .2s ease, filter .2s ease; }
.lang:hover { color: var(--cream); }
.lang:hover svg { opacity: .8; filter: none; }
.lang.is-active { color: var(--cream); font-weight: 600; }
.lang.is-active svg { opacity: 1; filter: none; }

/* Hero: lacivertten kreme geçiş */
.hero { position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--navy) 0, var(--navy) calc(100% - 300px), var(--cream) calc(100% - 300px)); }
.hero__video { position: absolute; top: 0; left: 0; width: 100%; height: var(--hero-height); object-fit: cover; display: block; background: var(--navy); }
.hero__scrim { position: absolute; top: 0; left: 0; right: 0; height: var(--hero-height); background: linear-gradient(180deg, rgba(12,35,64,0.85) 0px, rgba(12,35,64,0.45) 90px, rgba(12,35,64,0) 200px), radial-gradient(ellipse 55% 38% at 50% 42%, rgba(0,0,0,0.28), rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(12,35,64,0) 62%, var(--navy) 100%); }
.hero__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }

/* Giriş videosu bitmeden marina döngüsü üstüne erir, lacivert perde koyulaşır */
.hero__video--loop, .hero__dim { opacity: 0; transition: opacity 1.8s ease-in-out; }
.hero__video--loop.on, .hero__dim.on { opacity: 1; }
.hero__dim { position: absolute; top: 0; left: 0; right: 0; height: var(--hero-height); background: rgba(8,26,49,0.86); pointer-events: none; }

.hero-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 100%; box-sizing: border-box; min-height: var(--hero-height); padding-top: 72px; }
.hero-copy > * { opacity: 0; transform: translateY(28px); transition: opacity 1.2s cubic-bezier(.25,.1,.25,1), transform 1.2s cubic-bezier(.25,.1,.25,1); }
.hero-copy.is-in > * { opacity: 1; transform: none; }
.hero-copy.is-in > *:nth-child(2) { transition-delay: .18s; }
.hero-copy.is-in > *:nth-child(3) { transition-delay: .36s; }
.hero-copy > h1, .hero-copy > p { will-change: opacity, transform; }
.hero-title { max-width: 880px; padding-bottom: 0.08em; background: linear-gradient(100deg, var(--cream) 0%, var(--cream) 42%, var(--white) 47%, var(--aqua-light) 50%, var(--white) 53%, var(--cream) 58%, var(--cream) 100%); background-size: 260% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: heroGlint 7s ease-in-out 1.6s infinite; }
@keyframes heroGlint { 0% { background-position: 120% 0; } 50%, 100% { background-position: -20% 0; } }
.hero-accent { background: linear-gradient(100deg, var(--aqua) 0%, var(--aqua) 36%, #E6F8F7 43%, var(--white) 47%, var(--white) 53%, #E6F8F7 57%, var(--aqua) 64%, var(--aqua) 100%); background-size: 300% 100%; background-position: 130% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 14px rgba(177,228,227,0.18)); animation: heroGlintAccent 4.2s cubic-bezier(.45,0,.25,1) 1.8s infinite; }
@keyframes heroGlintAccent { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
.hero-lead { color: var(--cream); max-width: 640px; text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

.hero-mock { position: relative; width: 100%; margin-top: calc(-1 * clamp(48px, 10vh, 120px)); transform: translateY(56px); transition: transform 1.9s cubic-bezier(.65,0,.35,1); }
.hero-mock.lifted { transform: none; }
.hero-mock__glow { position: absolute; left: 8%; right: 8%; top: 12%; bottom: -6%; background: radial-gradient(ellipse at center, rgba(177,228,227,0.22), rgba(177,228,227,0) 70%); filter: blur(40px); }
.hero-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.hero-tag { padding: 8px 14px; border-radius: 999px; background: rgba(12,35,64,0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(240,238,233,0.22); color: var(--cream); }

.browser-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 12px; height: 44px; padding: 0 16px; background: var(--navy-bar); border-bottom: 1px solid rgba(240,238,233,0.08); }
.browser-bar__url { justify-self: center; width: 100%; max-width: 440px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 28px; border-radius: 8px; background: rgba(240,238,233,0.06); color: var(--slate); white-space: nowrap; overflow: hidden; }
.browser-bar__actions { justify-self: end; display: flex; align-items: center; gap: 14px; color: rgba(240,238,233,0.4); }

.platform-intro { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 48px 0 104px; }
.platform-intro__text { color: var(--ink); max-width: 640px; text-align: center; }
.first-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--navy); color: var(--aqua); font-weight: 600; letter-spacing: .02em; }
.first-badge img { height: 12px; width: auto; display: block; }

/* Neden NetaRota: manuel ve NetaRota karşılaştırması */
.neden { position: relative; overflow: hidden; background: var(--navy); }
.neden__bg { position: absolute; left: 0; top: -25%; width: 100%; height: 150%; object-fit: cover; object-position: 50% 40%; display: block; will-change: transform; transform: translate3d(0,0,0) scale(1.04); }
.neden__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, var(--navy) 0%, rgba(12,35,64,0.96) 30%, rgba(12,35,64,0.6) 58%, rgba(12,35,64,0.2) 82%, rgba(12,35,64,0.1) 100%); }
.neden__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 96px 24px; display: flex; flex-direction: column; gap: 40px; }
.neden__title { flex: 1 1 520px; min-width: 0; max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.neden__heading { text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.neden__lead { flex: 1 1 320px; min-width: 0; max-width: 420px; color: var(--mist); text-shadow: 0 1px 12px rgba(0,0,0,0.4); }

.cmp-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.cmp-card { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: rgba(240,238,233,0.04); border: 1px solid rgba(240,238,233,0.10); transition: border-color .3s ease, background .3s ease; }
.cmp-card:hover { border-color: rgba(177,228,227,0.32); background: rgba(240,238,233,0.07); }
.cmp-card__old { color: var(--slate); }
.cmp-card__old span { opacity: .75; }
.cmp-card:nth-child(2) .nr-panel::after, .cmp-card:nth-child(2) .nr-pulse::after { animation-delay: .6s; }
.cmp-card:nth-child(3) .nr-panel::after, .cmp-card:nth-child(3) .nr-pulse::after { animation-delay: 1.2s; }
.cmp-card:nth-child(4) .nr-panel::after, .cmp-card:nth-child(4) .nr-pulse::after { animation-delay: 1.8s; }

.nr-panel { position: relative; overflow: hidden; margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(177,228,227,0.18), rgba(177,228,227,0.05)); border: 1px solid rgba(177,228,227,0.24); }
.nr-panel::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, rgba(177,228,227,0) 0%, rgba(177,228,227,0.16) 50%, rgba(177,228,227,0) 100%); transform: skewX(-18deg); animation: nrSweep 7s ease-in-out infinite; pointer-events: none; }
@keyframes nrSweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.nr-panel__head { display: flex; flex-direction: column; gap: 2px; }
.nr-panel__brand { display: inline-flex; align-items: center; gap: 7px; color: var(--aqua); }
.nr-panel__brand img { height: 15px; width: auto; display: block; }
.nr-panel__ile { font-family: 'Italianno', cursive; font-size: 26px; line-height: 1; transform: translateY(1px); }
.nr-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px; border-radius: 999px; background: var(--aqua); color: var(--navy); font-weight: 600; }
.nr-pulse { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.nr-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--green); opacity: 0; animation: nrPulse 2.4s ease-out infinite; }
@keyframes nrPulse { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* Platform: A — kaptan eşleştirme */
.match-demo { background: var(--navy); color: var(--cream); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.match-demo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.match-demo__query { display: inline-flex; align-items: center; gap: 8px; color: var(--slate); }
.match-demo__tag { padding: 4px 10px; border-radius: 999px; background: rgba(177,228,227,0.14); color: var(--aqua); }
.match-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(240,238,233,0.05); }
.match-row--top { background: rgba(177,228,227,0.10); border: 1px solid rgba(177,228,227,0.45); }
.match-row--muted { opacity: 0.7; }
.match-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.match-row__initials { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(240,238,233,0.14); color: var(--cream); display: flex; align-items: center; justify-content: center; }
.match-row__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: var(--aqua); color: var(--navy); }
.card__text-narrow { max-width: 560px; }

/* Platform: B — canlı takip */
.live-map { position: relative; height: 296px; background: var(--navy); }
.live-map__svg { width: 100%; height: 100%; display: block; }
.live-map__badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--navy); color: var(--cream); }
.live-map__stats { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.live-stat { background: var(--white); color: var(--navy); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 6px 18px -8px rgba(12,35,64,0.35), 0 0 0 1px rgba(12,35,64,0.06); }

/* Platform: C — destek asistanı */
.chat-demo { background: var(--mint); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 248px; justify-content: center; }
.chat-demo__in { display: flex; gap: 10px; align-items: flex-end; }
.chat-demo__out { display: flex; justify-content: flex-end; }
.chat-demo__avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--cream); display: flex; align-items: center; justify-content: center; }
.chat-bubble { padding: 10px 14px; max-width: 80%; }
.chat-bubble--in { background: var(--white); color: var(--navy); border-radius: 14px 14px 14px 4px; box-shadow: 0 4px 12px -6px rgba(12,35,64,0.25); }
.chat-bubble--out { background: var(--navy); color: var(--cream); border-radius: 14px 14px 4px 14px; }
.chat-demo__note { display: flex; align-items: center; gap: 6px; color: var(--teal); margin-top: 4px; }

/* Platform: D — belge merkezi */
.card--docs { flex-direction: row; flex-wrap: wrap; }
.docs-copy { flex: 1 1 260px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.docs-visual { position: relative; flex: 1 1 320px; min-height: 320px; overflow: hidden; background: radial-gradient(circle at 68% 28%, #1A4272 0%, var(--navy) 62%); display: flex; align-items: center; justify-content: center; padding: 28px 28px 84px; }
.docs-visual__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(240,238,233,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(240,238,233,0.04) 1px, transparent 1px); background-size: 28px 28px; }
.docs-stack { position: relative; width: 210px; height: 220px; }
.doc-sheet { position: absolute; inset: 0; border-radius: 14px; }
.doc-sheet--back { background: rgba(240,238,233,0.08); border: 1px solid rgba(240,238,233,0.12); transform: translate(-34px, 14px) rotate(-11deg); }
.doc-sheet--mid { background: rgba(240,238,233,0.16); border: 1px solid rgba(240,238,233,0.16); transform: translate(30px, 6px) rotate(7deg); }
.doc-sheet--front { background: var(--cream); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55); padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.doc-sheet__head { display: flex; align-items: center; gap: 10px; }
.doc-sheet__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-sheet__lines { display: flex; flex-direction: column; gap: 8px; }
.doc-sheet__lines span { display: block; height: 7px; border-radius: 4px; background: rgba(12,35,64,0.10); }
.doc-sheet__lines span:nth-child(1) { width: 100%; }
.doc-sheet__lines span:nth-child(2) { width: 86%; }
.doc-sheet__lines span:nth-child(3) { width: 94%; }
.doc-sheet__lines span:nth-child(4) { width: 58%; }
.doc-sheet__status { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--aqua); color: var(--navy); }
.doc-shield { position: absolute; top: -20px; right: -22px; width: 58px; height: 58px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 7px rgba(177,228,227,0.18), 0 12px 24px -8px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.docs-tags { position: absolute; left: 16px; right: 16px; bottom: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.docs-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(240,238,233,0.08); border: 1px solid rgba(240,238,233,0.12); color: var(--cream); white-space: nowrap; }

/* Güven ve şeffaflık */
.benefit { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.benefit--reverse { flex-wrap: wrap-reverse; }
.benefit__copy { flex: 1 1 420px; min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
.benefit__media { flex: 1 1 480px; min-width: 0; }
.highlight { color: var(--aqua); font-weight: 600; }
.checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.checklist__item { display: flex; gap: 12px; align-items: flex-start; }
.checklist__item svg { flex: none; margin-top: 2px; }
.checklist__item span { color: var(--mist); }

.photo { position: relative; height: 480px; border-radius: 16px; overflow: hidden; }
.photo--shadow { box-shadow: 0 40px 80px -32px rgba(0,0,0,0.5); }
.photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo__img--captain { object-position: 60% 30%; }
.photo__img--sailboat { object-position: 45% 50%; }
.captain-badge { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; background: var(--white); color: var(--navy); padding: 12px 16px 12px 12px; border-radius: 12px; box-shadow: 0 16px 32px -12px rgba(12,35,64,0.45); }
.captain-badge__info { display: flex; flex-direction: column; gap: 2px; }

.status-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.status-step { padding: 8px 12px; border-radius: 6px; background: rgba(240,238,233,0.08); color: var(--mist); }
.status-step--current { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); }
.status-step--done { background: var(--aqua); color: var(--navy); }

/* Altyapı: 01 — telemetri */
.telemetry { position: relative; height: 280px; background: var(--navy); }
.telemetry__map { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; display: block; }
.alert-card { position: absolute; top: 16px; right: 16px; width: min(300px, 80%); background: var(--white); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 16px 32px -12px rgba(12,35,64,0.5); }
.alert-card__text { display: flex; flex-direction: column; gap: 2px; }
.telemetry__chips { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; }
.telemetry__chip { padding: 8px 12px; border-radius: 8px; background: var(--white); color: var(--navy); }
.telemetry__chip--live { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: var(--cream); }

/* Altyapı: 02 — eşleştirme */
.algo { height: 280px; box-sizing: border-box; background: var(--navy); color: var(--cream); padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.algo__row { display: flex; flex-wrap: wrap; gap: 8px; }
.algo__input { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(240,238,233,0.2); color: var(--mist); }
.algo__divider { display: flex; align-items: center; gap: 10px; color: var(--slate); }
.algo__divider span:not(.t-cap) { flex: 1; height: 1px; background: rgba(240,238,233,0.15); }
.algo__check { padding: 6px 12px; border-radius: 6px; background: rgba(177,228,227,0.14); color: var(--aqua); }
.algo__result { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--aqua); color: var(--navy); }
.algo__result-info { flex: 1; display: flex; flex-direction: column; }

/* Altyapı: 03 — dijital sörvey */
.survey { height: 280px; box-sizing: border-box; background: var(--mint); padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.survey__row { display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 10px; padding: 12px 14px; }
.survey__type { flex: none; padding: 4px 8px; border-radius: 6px; background: var(--navy); color: var(--cream); }
.survey__place { flex: 1; color: var(--navy); }
.survey__status { padding: 4px 8px; border-radius: 6px; background: var(--aqua); color: var(--navy); }
.survey__status--pending { display: inline-flex; align-items: center; gap: 6px; background: #EEF0F2; color: var(--ink); }
.survey__angles { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.survey__angle { padding: 4px 10px; border-radius: 999px; background: var(--white); color: var(--navy-soft); }
.survey__note { display: flex; align-items: center; gap: 6px; color: var(--teal); }

/* Altyapı: 04 — ödeme ve sigorta */
.payment { height: 280px; box-sizing: border-box; background: #F6F5F1; padding: 24px; display: flex; align-items: center; justify-content: center; }
.payment__card { width: min(380px, 100%); background: var(--white); border: 1px solid rgba(12,35,64,0.08); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 40px -24px rgba(12,35,64,0.35); }
.payment__head { display: flex; justify-content: space-between; align-items: center; }
.payment__rule { height: 1px; background: rgba(12,35,64,0.08); }
.payment__row { display: flex; justify-content: space-between; gap: 12px; }
.payment__status { padding: 2px 8px; border-radius: 6px; background: var(--aqua); color: var(--navy); }

/* Kimler için */
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.audience-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(240,238,233,0.10); min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
.audience-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.audience-card__img--owners { object-position: 60% 15%; }
.audience-card__img--fleet { object-position: 35% 30%; }
.audience-card__img--refit { object-position: 50% 30%; }
.audience-card__body { position: relative; padding: 28px; background: linear-gradient(to top, var(--navy) 55%, rgba(12,35,64,0)); display: flex; flex-direction: column; gap: 10px; }

/* Kaptan paneli */
.panel-showcase { position: relative; padding-bottom: 48px; }
.panel-showcase__stage { position: relative; perspective: 1800px; }
.weather-card { position: absolute; left: 32px; bottom: 0; width: min(340px, 62%); padding: 6px; border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,0.45), rgba(255,255,255,0.10) 40%, rgba(12,35,64,0.25)); box-shadow: 0 30px 60px -18px rgba(12,35,64,0.6); display: flex; flex-direction: column; }
.weather-card img { width: 100%; height: auto; display: block; border-radius: 11px; }
.prep { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.prep__copy { flex: 1 1 300px; min-width: 0; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.prep__visual { position: relative; flex: 2 1 560px; min-width: 0; perspective: 1600px; }
.captain-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.captain-feature { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--navy); padding-top: 20px; }

/* SSS */
.faq { max-width: 1200px; margin: 0 auto; padding: 112px 24px; display: flex; flex-wrap: wrap; gap: 64px; }
.faq__intro { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.faq__list { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(12,35,64,0.14); }
.faq__item { border-bottom: 1px solid rgba(12,35,64,0.14); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__answer { margin: 0 0 24px; color: var(--ink); max-width: 640px; }
.chev { flex: none; font-weight: 500; color: var(--teal); transition: transform .2s; }
.faq__item[open] .chev { transform: rotate(45deg); }

/* Çağrı bandı */
.cta-wrap { padding: 0 24px 112px; }
.cta { position: relative; max-width: 1200px; margin: 0 auto; border-radius: 24px; overflow: hidden; background-color: var(--navy); color: var(--cream); }
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cta__body { position: relative; padding: 96px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; background: radial-gradient(ellipse 60% 75% at 50% 50%, rgba(12,35,64,0.72), rgba(12,35,64,0.18)); }
.cta__title { max-width: 760px; }
.cta__lead { color: var(--mist); max-width: 560px; }
.cta__btn { margin-top: 8px; padding: 16px 28px; }
.cta__motto { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); margin-top: 8px; }

/* Başa dön */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 25; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(177,228,227,0.35); background: var(--navy); color: var(--aqua); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 28px -10px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .2s ease; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, background .2s ease; }
.to-top:hover { background: var(--navy-hover); }

/* Alt bilgi */
.site-foot { background: var(--navy-deep); }
.site-foot__inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px 32px; display: flex; flex-direction: column; gap: 56px; }
.site-foot__top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.site-foot__brand { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.site-foot__logo-wrap { display: flex; align-items: center; }
.site-foot__logo { height: 34px; width: auto; display: block; }
.site-foot__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; flex: 2 1 520px; }
.site-foot__col { display: flex; flex-direction: column; gap: 12px; }
.site-foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(240,238,233,0.10); color: var(--slate); }
.site-foot__legal { display: flex; flex-wrap: wrap; gap: 20px; }

/* Azaltılmış hareket tercihi */
@media (prefers-reduced-motion: reduce) {
  .helm, .menu-panel, .menu-backdrop, .hero-copy > * { transition: none; }
  .hero-copy > * { transform: none; }
  .hero-mock { transform: none; transition: none; }
  .hero-title, .hero-accent, .nr-pulse::after, .nr-panel::after { animation: none; }
  .hero__video--loop, .hero__dim { transition: none; }
}

/* 5. Yardımcı sınıflar ------------------------------------------------- */

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.c-navy { color: var(--navy); }
.c-navy-soft { color: var(--navy-soft); }
.c-cream { color: var(--cream); }
.c-aqua { color: var(--aqua); }
.c-teal { color: var(--teal); }
.c-slate { color: var(--slate); }
.c-mist { color: var(--mist); }
.c-ink { color: var(--ink); }
.c-grey { color: var(--grey); }
.c-white { color: var(--white); }
.c-amber { color: var(--amber); }