/* OtoParsel AI — tanıtım sitesi. scrollcraft.css jeton katmanının üstüne marka + sayfa stilleri.
   Motor sınıflarına ([data-sc-*], .sc-stage, .sc-copy) dokunulmaz; sadece kendi sınıflarımız. */

:root {
  --sc-canvas: #070a12;
  --sc-surface: #0d1424;
  --sc-ink: #f3f6fb;
  --sc-ink-soft: #9db0ca;
  --sc-accent: #E9A24A;
  --sc-accent-ink: #1B1204;
  --sc-font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --sc-font-text: "Manrope", system-ui, -apple-system, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --op-blue: #7AA2D6;
  --op-gold: #f59e0b;
  --op-line: rgba(148, 176, 214, 0.14);
  --op-card: rgba(13, 20, 36, 0.66);
  --op-radius: 22px;
  --op-maxw: 1240px;
  --op-gutter: clamp(1.25rem, 4vw, 3rem);
}

html { background: var(--sc-canvas); overflow-x: hidden; }   /* telefon: animasyonlu katmanlar (bulut/translate) kaydırma genişliğini büyütüp sayfayı sağa taşırıyordu; `clip` iOS 15'te yok → görünüm penceresine yayılan `hidden` (sticky bozulmaz) */
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in oklab, var(--sc-accent) 40%, transparent); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }

.op-serif { font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -0.015em; }
.op-serif em, .op-em { font-style: italic; color: var(--sc-accent); }
.op-mono { font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------------ nav -- */
.op-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.9rem var(--op-gutter);
  transition: background 320ms ease, backdrop-filter 320ms ease, border-color 320ms ease;
  border-bottom: 1px solid transparent;
}
.op-nav::before {
  content: ""; position: absolute; inset: 0 0 -1.6rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 16, 0.62), rgba(5, 8, 16, 0));
  transition: opacity 320ms ease;
}
.op-nav.is-solid::before { opacity: 0; }
.op-nav.is-solid {
  background: color-mix(in oklab, var(--sc-canvas) 74%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-color: var(--op-line);
}
.op-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.op-brand img { width: 30px; height: 30px; display: block; }
.op-brand b { font-family: var(--sc-font-text); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; }
.op-brand b i { font-style: normal; color: var(--sc-accent); font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.8em; margin-left: 0.28em; }
.op-links { display: flex; gap: 1.8rem; margin-left: auto; margin-right: 0.5rem; }
.op-links a { text-decoration: none; font-size: 0.86rem; color: var(--sc-ink-soft); transition: color 200ms; }
.op-links a:hover { color: var(--sc-ink); }

.op-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.72rem 1.3rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 0.9rem; letter-spacing: -0.005em;
  color: var(--sc-accent-ink);
  background: linear-gradient(180deg, #F5C27A, #E9A24A);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 10px 34px -10px rgba(233, 162, 74, 0.7);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms;
  border: 0; cursor: pointer; font-family: inherit;
}
.op-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,0.28) inset, 0 16px 44px -10px rgba(233, 162, 74, 0.9); }
.op-cta svg { width: 1em; height: 1em; transition: transform 220ms; }
.op-cta:hover svg { transform: translateX(3px); }
.op-cta--ghost { background: transparent; color: var(--sc-ink); box-shadow: 0 0 0 1px var(--op-line) inset; }
.op-cta--ghost:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.3) inset; }
.op-cta--sm { padding: 0.55rem 1.05rem; font-size: 0.82rem; }

/* ------------------------------------------------------ worldflight copy -- */
.op-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; }
.op-hero-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--sc-accent); }
.op-h1 { font-size: clamp(3.6rem, 2rem + 9.5vw, 10.5rem); line-height: 0.9; margin: 0; }
.op-h2 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem); line-height: 0.98; margin: 0; }
.op-lead { font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.3rem); color: #c3d2e8; max-width: 44ch; line-height: 1.55; margin: 1.4rem 0 0; }
.op-copy-tight { max-width: 40rem; }

.op-hud {
  position: absolute; left: var(--op-gutter); bottom: clamp(2rem, 7vh, 4rem);
  display: grid; gap: 0.35rem; padding: 0.9rem 1.15rem; border-radius: 14px;
  background: color-mix(in oklab, #050810 62%, transparent);
  border: 1px solid rgba(233, 162, 74, 0.28);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 40px -12px rgba(233, 162, 74, 0.45);
}
.op-hud b { font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; }
.op-hud span { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.op-hud i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; margin-right: 0.5rem; animation: op-pulse 1.6s ease-in-out infinite; }
@keyframes op-pulse { 50% { opacity: 0.35; } }

.op-finale .op-lead { margin-top: 1.2rem; }
.op-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* uçuş rotası rayı (sağ kenar) */
.op-rail {
  position: fixed; right: clamp(0.9rem, 2.4vw, 2.2rem); top: 50%; translate: 0 -50%; z-index: 65;
  display: grid; gap: 1.1rem; justify-items: end; transition: opacity 300ms;
}
.op-rail button {
  all: unset; cursor: default; display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--sc-font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(157, 176, 202, 0.5); transition: color 260ms;
}
.op-rail button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: all 260ms; }
.op-rail button.is-on { color: var(--sc-ink); }
.op-rail button.is-on::after { background: var(--sc-accent); border-color: var(--sc-accent); box-shadow: 0 0 14px var(--sc-accent); }
.op-rail.is-hidden { opacity: 0; pointer-events: none; }

/* --------------------------------------------- uçuş sonrası düz akış -- */
/* Sabit uçuş sahnesinin ÜSTÜNE kayarak gelir (opak zemin) — uçuşun bittiği yerde tek geçiş. */
.op-after {
  position: relative; z-index: 40;
  background:
    radial-gradient(1200px 600px at 78% -6%, rgba(233, 162, 74, 0.07), transparent 60%),
    radial-gradient(900px 500px at 8% 30%, rgba(122, 162, 214, 0.07), transparent 60%),
    var(--sc-canvas);
  border-top-left-radius: 34px; border-top-right-radius: 34px;
  box-shadow: 0 -40px 80px -30px rgba(0, 0, 0, 0.8);
  margin-top: -34px;
}
.op-wrap { width: 100%; max-width: var(--op-maxw); margin-inline: auto; padding-inline: var(--op-gutter); }
.op-section { padding-block: clamp(5rem, 11vw, 10rem); }
.op-kicker { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; }
.op-kicker::before { content: ""; width: 28px; height: 1px; background: var(--sc-accent); }
.op-title { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.8rem); line-height: 1; margin: 0; max-width: 18ch; text-wrap: balance; }
.op-sub { color: var(--sc-ink-soft); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.65; max-width: 52ch; margin: 1.4rem 0 0; }

/* Nasıl çalışır: yapışkan sağ kolon + kayan adımlar */
.op-how { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.op-how__steps { display: grid; }
.op-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 1rem; opacity: 0.38; transition: opacity 400ms; }
.op-step.is-on { opacity: 1; }
.op-step__n { font-family: var(--sc-font-mono); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--sc-accent); }
.op-step h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.02; margin: 0; letter-spacing: -0.015em; }
.op-step p { color: var(--sc-ink-soft); max-width: 40ch; line-height: 1.65; margin: 0; }
.op-how__stage { position: sticky; top: 12vh; aspect-ratio: 1440 / 900; max-height: 76vh; }
.op-shot {
  position: absolute; inset: 0; border-radius: var(--op-radius); overflow: hidden;
  border: 1px solid var(--op-line); background: var(--sc-surface);
  opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(233,162,74,0.05);
}
.op-shot.is-on { opacity: 1; transform: none; }
.op-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.op-shot--contain img { object-fit: contain; background: #050810; }
/* Adım 3: yatay (16:9) ve dikey (9:16) çıktı, kaydırınca sırayla açılır */
.op-shot--film { background: radial-gradient(70% 80% at 30% 40%, rgba(233,162,74,0.10), transparent 70%), #050810; }
.op-shot--film img { position: absolute; height: auto; object-fit: cover; border-radius: 14px; border: 1px solid rgba(148,176,214,0.22); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9); transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); opacity: 0; }
.op-shot--film .op-film__h { left: 3%; top: 14%; width: 60%; aspect-ratio: 16 / 9; transform: translateX(-6%) scale(0.96); }
.op-shot--film .op-film__v { right: 4%; bottom: 6%; height: 88%; width: auto; aspect-ratio: 9 / 16; transform: translateX(12%) scale(0.95); }
.op-shot--film.is-on .op-film__h { opacity: 1; transform: none; transition-delay: 120ms; }
.op-shot--film.is-on .op-film__v { opacity: 1; transform: none; transition-delay: 520ms; }
.op-shot figcaption { position: absolute; left: 1rem; bottom: 1rem; }

/* Bento */
.op-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.4rem, 2.4vw, 2.2rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 961px) { .op-bento { margin-inline: calc(-1 * clamp(0rem, 2.2vw, 2rem)); } }
.op-tile {
  position: relative; overflow: hidden; border-radius: var(--op-radius); padding: clamp(1.55rem, 2.7vw, 2.4rem);
  background: var(--op-card); border: 1px solid var(--op-line);
  display: flex; flex-direction: column; gap: 0.8rem; min-height: 16.2rem;
}
.op-tile:hover { border-color: rgba(233, 162, 74, 0.32); }
.op-tile h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
.op-tile p { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.6; max-width: 46ch; }
.op-tile--a { grid-column: span 7; min-height: 28rem; }
.op-tile--b { grid-column: span 5; }
.op-tile--c { grid-column: span 5; }
.op-tile--d { grid-column: span 7; }
.op-tile--e { grid-column: span 4; }
.op-tile--f { grid-column: span 4; }
.op-tile--g { grid-column: span 4; }
.op-tile__media { position: absolute; inset: 0; z-index: 0; }
.op-tile__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; transition: opacity 400ms, transform 800ms cubic-bezier(.2,.8,.2,1); }
.op-tile:hover .op-tile__media img { opacity: 0.8; transform: scale(1.03); }
.op-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,18,0.1) 0%, rgba(7,10,18,0.55) 55%, rgba(7,10,18,0.94) 100%); }
.op-tile > *:not(.op-tile__media) { position: relative; z-index: 1; }
.op-tile--a > .op-tile__spacer { flex: 1; }

/* danışman sesi çalıcı */
.op-voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: auto; }
.op-voice {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.8rem 0.55rem 0.55rem; border-radius: 14px; border: 1px solid var(--op-line); background: rgba(255,255,255,0.03);
  transition: border-color 220ms, background 220ms;
}
.op-voice:hover { border-color: rgba(233,162,74,0.4); background: rgba(233,162,74,0.06); }
.op-voice:focus-visible { outline: 2px solid var(--sc-accent); }
.op-voice img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; background: #101a30; flex: none; }
.op-voice b { display: block; font-size: 0.86rem; font-weight: 700; }
.op-voice small { display: block; color: var(--sc-ink-soft); font-size: 0.7rem; }
.op-voice .op-play { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sc-accent); color: var(--sc-accent-ink); flex: none; }
.op-voice .op-play svg { width: 11px; height: 11px; }
.op-voice.is-playing .op-play { background: #fff; }
.op-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto; }
.op-chip { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; padding: 0.38rem 0.7rem; border-radius: 999px; border: 1px solid var(--op-line); color: #bcd0ea; }

/* biçim maketleri */
.op-formats { display: flex; align-items: flex-end; gap: 1.2rem; margin-top: auto; }
.op-mock { border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: linear-gradient(160deg, #0f1a30, #08101f); position: relative; overflow: hidden; }
.op-mock--v { width: 72px; aspect-ratio: 9 / 16; }
.op-mock--h { width: 150px; aspect-ratio: 16 / 9; }
.op-mock img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }

/* Pin stüdyosu (model-viewer) */
.op-pin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.op-pin__stage {
  position: relative; border-radius: 32px; overflow: hidden; border: 1px solid var(--op-line);
  background: radial-gradient(60% 60% at 50% 42%, rgba(233,162,74,0.14), transparent 70%), linear-gradient(180deg, #0b1324, #060a14);
  aspect-ratio: 1 / 1.05;
}
.op-pin__stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.op-swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.op-sw {
  all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 14px -2px var(--c); border: 2px solid transparent; transition: transform 200ms, border-color 200ms;
  position: relative;
}
.op-sw:hover { transform: scale(1.12); }
.op-sw.is-on { border-color: #fff; transform: scale(1.14); }
.op-sw:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.op-sw--none { background: rgba(255,255,255,0.05); box-shadow: none; border-color: rgba(255,255,255,0.4); }
.op-sw--none::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: rgba(255,255,255,0.7); rotate: -45deg; }
.op-sw--none.is-on { border-color: #fff; }
.op-pin__tag { position: absolute; left: 1.2rem; top: 1.2rem; z-index: 2; }

/* Güven */
.op-trust { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.op-proofs { display: grid; gap: 0; border-top: 1px solid var(--op-line); }
.op-proof { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.6rem 1.2rem; padding: 1.7rem 0; border-bottom: 1px solid var(--op-line); }
.op-proof__n { font-family: var(--sc-font-mono); color: var(--sc-accent); font-size: 0.8rem; padding-top: 0.35rem; }
.op-proof h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.15rem + 1vw, 2.1rem); line-height: 1.1; }
.op-proof p { grid-column: 2; margin: 0; color: var(--sc-ink-soft); line-height: 1.65; max-width: 52ch; font-size: 0.95rem; }

/* Kitle ayrımı */
.op-audience { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.op-aud { border-radius: var(--op-radius); padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid var(--op-line); background: var(--op-card); display: grid; gap: 1rem; align-content: start; }
.op-aud--main { background: linear-gradient(160deg, rgba(233,162,74,0.10), rgba(59,130,246,0.06) 55%, rgba(13,20,36,0.6)); border-color: rgba(233,162,74,0.22); }
.op-aud h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); margin: 0; line-height: 1.02; }
.op-aud ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; color: #c3d2e8; font-size: 0.95rem; line-height: 1.55; }
.op-aud li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.6rem; }
.op-aud li::before { content: ""; width: 7px; height: 7px; margin-top: 0.5rem; border-radius: 2px; background: var(--sc-accent); rotate: 45deg; }

/* Fiyat */
.op-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.2vw, 2.8rem); margin-top: clamp(2.5rem, 6vw, 4rem); align-items: stretch; }
.op-plan { border-radius: var(--op-radius); border: 1px solid var(--op-line); background: var(--op-card); padding: clamp(1.5rem, 2.6vw, 2.2rem); display: grid; gap: 1.1rem; align-content: start; }
.op-plan--feat { border-color: rgba(233,162,74,0.4); background: linear-gradient(170deg, rgba(233,162,74,0.10), rgba(13,20,36,0.7) 60%); box-shadow: 0 30px 90px -40px rgba(233,162,74,0.5); }
.op-plan h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 2rem; margin: 0; }
.op-plan__price { font-family: var(--sc-font-display); font-size: 3.4rem; line-height: 1; letter-spacing: -0.02em; }
.op-plan__price small { font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--sc-ink-soft); margin-left: 0.4rem; text-transform: uppercase; }
.op-plan p { margin: 0; color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.6; }
.op-todo { font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--sc-dim, #9aa8c0); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 0.7rem 0.85rem; line-height: 1.6; }

/* SSS */
.op-faq { margin-top: clamp(2.2rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
.op-faq__col { border-top: 1px solid var(--op-line); }
.op-faq details { border-bottom: 1px solid var(--op-line); }
.op-faq summary { list-style: none; cursor: pointer; padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-family: var(--sc-font-display); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.2; }
.op-faq summary::-webkit-details-marker { display: none; }
.op-faq summary::after { content: "+"; font-family: var(--sc-font-mono); font-size: 1.4rem; color: var(--sc-accent); transition: rotate 260ms; flex: none; }
.op-faq details[open] summary::after { rotate: 45deg; }
.op-faq details p { margin: 0 0 1.6rem; color: var(--sc-ink-soft); line-height: 1.7; max-width: 56ch; }

/* Kapanış + alt bilgi */
.op-close { text-align: left; padding-block: clamp(6rem, 13vw, 11rem); position: relative; overflow: hidden; }
.op-close__art { position: absolute; z-index: 0; right: max(var(--op-gutter), 7vw); top: 50%; width: min(48vw, 660px); aspect-ratio: 16 / 10; transform: translateY(-50%); pointer-events: none; }
.op-close__art img { position: absolute; border-radius: 14px; border: 1px solid rgba(148,176,214,0.22); box-shadow: 0 50px 100px -30px rgba(0,0,0,0.95), 0 0 80px -20px rgba(233,162,74,0.25); object-fit: cover; }
.op-close__h { left: 0; top: 4%; width: 82%; aspect-ratio: 16 / 9; transform: rotate(-2deg); }
.op-close__v { right: 0; bottom: -4%; height: 90%; aspect-ratio: 9 / 16; transform: rotate(2.5deg); }
.op-close > .op-wrap { position: relative; z-index: 1; }
@media (min-width: 961px) and (max-width: 1180px) { .op-close__art { width: 42vw; } }
.op-close::before { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 90%; background: radial-gradient(50% 60% at 50% 100%, rgba(233,162,74,0.22), transparent 70%); pointer-events: none; }
.op-footer { border-top: 1px solid var(--op-line); padding: 3rem 0 3.4rem; }
.op-footer__grid { display: grid; grid-template-columns: 1.3fr 0.9fr 0.9fr 1fr 1.5fr; gap: 2.2rem; }
.op-footer p, .op-footer li, .op-footer a, .op-footer address { color: var(--sc-ink-soft); font-size: 0.86rem; line-height: 1.7; text-decoration: none; }
.op-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.op-footer a:hover { color: var(--sc-ink); }
.op-footer h4 { margin: 0 0 0.8rem; }
.op-legal { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--op-line); display: grid; gap: 0.5rem; }
.op-legal p { font-size: 0.76rem; color: rgba(157,176,202,0.75); max-width: 90ch; margin: 0; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 960px) {
  .op-links { display: none; }
  .op-how, .op-pin, .op-trust { grid-template-columns: 1fr; }
  /* mobil: görsel üstte yapışkan, adımlar altından kayar */
  .op-how__stage { order: -1; position: sticky; top: 72px; height: 40vh; z-index: 3; box-shadow: 0 0 0 14px var(--sc-canvas); }
  .op-step { min-height: 56vh; justify-content: flex-start; padding-top: 2.4rem; }
  .op-bento { grid-template-columns: 1fr; }
  .op-tile--a, .op-tile--b, .op-tile--c, .op-tile--d, .op-tile--e, .op-tile--f, .op-tile--g { grid-column: span 1; min-height: 14rem; }
  .op-audience, .op-plans, .op-footer__grid, .op-faq { grid-template-columns: 1fr; }
  .op-faq__col + .op-faq__col { border-top: 0; }
  .op-how__stage { aspect-ratio: auto; }
  .op-shot img { object-fit: contain; background: #050810; }
  .op-shot--film img { object-fit: cover; }
  .op-shot--film .op-film__h { left: 4%; top: 12%; width: 62%; }
  .op-shot--film .op-film__v { height: 80%; }
  .op-close__art { position: relative; right: auto; top: auto; transform: none; width: min(92vw, 520px); margin: 2.5rem auto 0; }
  .op-rail { display: none; }
  .op-hud { right: var(--op-gutter); }
}
@media (max-width: 560px) {
  .op-voices { grid-template-columns: 1fr; }
  .op-nav .op-cta { padding: 0.55rem 0.95rem; font-size: 0.8rem; }
  .op-after { border-top-left-radius: 24px; border-top-right-radius: 24px; margin-top: -24px; }
}
@media (prefers-reduced-motion: reduce) {
  .op-shot, .op-step, .op-tile__media img { transition: none; }
  .op-hud i { animation: none; }
}

/* ------------------------------------------------------------ yasal sayfalar */
.op-doc { max-width: 46rem; margin: 0 auto; padding: 7rem var(--op-gutter) 5rem; }
.op-doc__back { display: inline-flex; gap: .5rem; color: var(--sc-ink-soft); text-decoration: none; font-size: .9rem; margin-bottom: 2rem; }
.op-doc__back:hover { color: var(--sc-ink); }
.op-doc h1 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); line-height: 1.02; margin: 0 0 .8rem; letter-spacing: -.015em; }
.op-doc__meta { color: var(--sc-ink-soft); font-size: .85rem; margin-bottom: 2.4rem; }
.op-doc h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.6rem; margin: 2.4rem 0 .6rem; color: var(--sc-ink); }
.op-doc p, .op-doc li { color: var(--sc-ink-soft); line-height: 1.75; font-size: 1rem; }
.op-doc ul { margin: .4rem 0 0 1.2rem; }
.op-doc a { color: var(--sc-accent); }
.op-doc .op-note { margin-top: 2.4rem; padding: 1rem 1.2rem; border: 1px dashed rgba(245,158,11,.5); border-radius: 12px; color: #fcd34d; font-size: .88rem; }

/* ------------------------------------------------------------ kart hover / dokunma: yukarı kalkar, çekilince yerine döner */
.op-tile, .op-aud, .op-plan {
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out),
              translate 380ms cubic-bezier(.2, .9, .25, 1.15), border-color 300ms, box-shadow 380ms, background 300ms;
  will-change: translate;
}
@media (hover: hover) and (pointer: fine) {
  .op-tile:hover, .op-aud:hover, .op-plan:hover { translate: 0 -12px; border-color: rgba(233, 162, 74, 0.4); box-shadow: 0 36px 70px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(233, 162, 74, 0.2), 0 0 60px -24px rgba(233, 162, 74, 0.35); }
}
@media (hover: none) {
  .op-tile.is-pressed, .op-aud.is-pressed, .op-plan.is-pressed { translate: 0 -10px; border-color: rgba(233, 162, 74, 0.4); box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(233, 162, 74, 0.2); transition-duration: 620ms, 620ms, 160ms, 300ms, 160ms, 300ms; }
}
@media (prefers-reduced-motion: reduce) {
  .op-tile, .op-aud, .op-plan { transition: border-color 200ms; }
  .op-tile:hover, .op-aud:hover, .op-plan:hover, .op-tile.is-pressed, .op-aud.is-pressed, .op-plan.is-pressed { translate: none; }
}

.op-doc__nav { margin-top: 2rem; }
.op-rights { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--op-line); display: flex; align-items: center; gap: .55rem; color: var(--sc-ink-soft); font-size: .92rem; }
.op-rights .op-c { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--op-line); color: var(--sc-accent); font-size: .9rem; }
.op-rights sup { font-size: .72em; line-height: 0; vertical-align: super; margin-left: 1px; color: var(--sc-ink); font-weight: 600; }
.op-legal a { font-size: inherit; color: var(--sc-ink); text-underline-offset: 2px; }
.op-contact { display: grid; gap: .55rem; font-style: normal; }
.op-contact b { color: var(--sc-ink); font-weight: 600; }
.op-legal .op-rights { font-size: .88rem; }
.op-rights sup { font-size: .8em; }

/* ------------------------------------------------------------ iletişim kutusu */
.op-contact-lead { margin: 0 0 .8rem; }
.op-contact-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid rgba(233,162,74,.45); background: rgba(233,162,74,.08); color: var(--sc-ink); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background 200ms, border-color 200ms, translate 260ms; }
.op-contact-btn:hover { background: rgba(233,162,74,.16); border-color: var(--sc-accent); translate: 0 -2px; }
.op-contact-btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.op-dialog { border: 0; padding: 0; background: transparent; color: var(--sc-ink); max-width: min(560px, calc(100vw - 32px)); width: 100%; }
.op-dialog::backdrop { background: rgba(3,6,12,.78); backdrop-filter: blur(8px); }
.op-dialog__box { position: relative; border-radius: 20px; border: 1px solid rgba(148,176,214,.28); background: #0a1120; box-shadow: 0 40px 120px -20px rgba(0,0,0,.95); padding: clamp(22px, 4vw, 34px); }
.op-dialog h2 { margin: 0 0 .6rem; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); font-weight: 400; line-height: 1.05; }
.op-dialog h3 { margin: 1.2rem 0 .25rem; font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); font-weight: 500; }
.op-dialog p { margin: 0; color: #cbd8ec; line-height: 1.65; font-size: .96rem; }
.op-dialog__rule { margin-top: 1.4rem !important; padding-top: 1rem; border-top: 1px solid var(--op-line); color: var(--sc-ink-soft) !important; font-size: .84rem !important; }
.op-dialog a { color: var(--sc-accent); }
.op-dialog__x { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--op-line); background: transparent; color: var(--sc-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.op-dialog__x:hover { border-color: var(--sc-accent); }

/* ============================ AÇIK TEMA ============================
   Uçuş bölümü (videolar) her iki temada koyu kalır; uçuş sonrası içerik, alt bilgi, iletişim kutusu ve yasal sayfalar açılır. */
.op-theme { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--op-line); background: rgba(255,255,255,0.06); color: var(--sc-ink); cursor: pointer; margin-left: auto; margin-right: 0.6rem; transition: background 0.2s, border-color 0.2s; }
.op-theme:hover { border-color: rgba(233,162,74,0.6); background: rgba(255,255,255,0.12); }
.op-theme svg { grid-area: 1 / 1; }
html:not([data-theme="light"]) .op-theme__moon { display: none; } html[data-theme="light"] .op-theme__sun { display: none; }
.op-nav .op-links { margin-left: auto; } .op-nav .op-theme { margin-left: 0; }
html[data-theme="light"] .op-after,
html[data-theme="light"] .op-dialog__box,
html[data-theme="light"] body:not(:has([data-sc-mode="worldflight"])) {
  --sc-canvas: #F3F6F8; --sc-surface: #ffffff; --sc-ink: #0B1F35; --sc-ink-soft: #3A4C60; --sc-accent: #9A5A0E; --sc-accent-ink: #ffffff;
  --op-line: rgba(11, 31, 53, 0.14); --op-card: rgba(255, 255, 255, 0.86);
}
html[data-theme="light"] .op-after { background: #F3F6F8; color: var(--sc-ink); box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.5); }
html[data-theme="light"] body:not(:has([data-sc-mode="worldflight"])) { background: #F3F6F8; }
html[data-theme="light"] body:not(:has([data-sc-mode="worldflight"])) .op-doc,
html[data-theme="light"] body:not(:has([data-sc-mode="worldflight"])) .op-doc p,
html[data-theme="light"] body:not(:has([data-sc-mode="worldflight"])) .op-doc li { color: #1e2b44; }
html[data-theme="light"] .op-after .op-lead, html[data-theme="light"] .op-after .op-aud ul, html[data-theme="light"] .op-after .op-sub { color: #3A4C60; }
html[data-theme="light"] .op-after .op-chip { color: #1e3a5f; background: rgba(154, 90, 14, 0.06); }
html[data-theme="light"] .op-after .op-voice { background: #ffffff; }
html[data-theme="light"] .op-after .op-voice .op-play { background: rgba(154, 90, 14, 0.14); color: #9A5A0E; }
html[data-theme="light"] .op-after .op-tile--a { --sc-ink: #f3f6fb; --sc-ink-soft: #c9d6ea; color: #f3f6fb; }
html[data-theme="light"] .op-after .op-legal p { color: #3A4C60; }
html[data-theme="light"] .op-after .op-legal a { color: #0B1F35; }
html[data-theme="light"] .op-after .op-aud--main, html[data-theme="light"] .op-after .op-plan--feat { background: linear-gradient(160deg, rgba(154, 90, 14, 0.10), rgba(59,130,246,0.06) 60%, #ffffff); border-color: rgba(154, 90, 14, 0.4); }
html[data-theme="light"] .op-after .op-cta:not(.op-cta--ghost) { color: #04303a; }
html[data-theme="light"] .op-after .op-cta--ghost { color: var(--sc-ink); border-color: rgba(11, 31, 53, 0.28); }
html[data-theme="light"] .op-after .op-todo { color: #3A4C60; border-color: rgba(11, 31, 53, 0.18); }
html[data-theme="light"] .op-after .op-sw--none { background: rgba(11, 31, 53, 0.05); border-color: rgba(11, 31, 53, 0.4); }
html[data-theme="light"] .op-after .op-sw--none::after { background: rgba(11, 31, 53, 0.7); }
html[data-theme="light"] .op-after .op-sw.is-on { border-color: #0B1F35; }
html[data-theme="light"] .op-after .op-close { color: var(--sc-ink); }
html[data-theme="light"] .op-dialog__box { background: #ffffff; box-shadow: 0 40px 100px -20px rgba(11, 31, 53, 0.5); border-color: rgba(11, 31, 53, 0.2); }
html[data-theme="light"] .op-dialog p, html[data-theme="light"] .op-dialog h3 { color: #1e2b44; }
html[data-theme="light"] .op-after .op-footer a, html[data-theme="light"] .op-after .op-legal { color: #3A4C60; }
html[data-theme="light"] .op-after .op-contact-btn { color: var(--sc-ink); }
html[data-theme="light"] ::selection { color: #0B1F35; }

/* Rakamlar şeridi */
.op-strip { padding: clamp(1.6rem, 4vw, 2.6rem) 0 0; }
.op-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.8rem, 2vw, 1.6rem); border-top: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line); padding: clamp(1.2rem, 3vw, 1.9rem) 0; }
.op-strip li { display: grid; gap: 0.35rem; justify-items: start; }
.op-strip b { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); line-height: 1; color: var(--sc-accent); }
.op-strip span { color: var(--sc-ink-soft); font-size: 0.9rem; line-height: 1.4; }
@media (max-width: 720px) { .op-strip ul { grid-template-columns: repeat(2, 1fr); } }
.op-nav .op-cta { white-space: nowrap; }
@media (max-width: 480px) { .op-nav .op-cta--sm { padding: 0.5rem 0.85rem; font-size: 0.78rem; } .op-nav .op-cta--sm svg { display: none; } .op-theme { width: 38px; height: 38px; } }

/* ---- AÇIK TEMA: premium katman (atmosfer, havada duran kartlar, açık cam nav) ---- */
@keyframes op-cloud { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(3%, 2%, 0) scale(1.06); } 100% { transform: translate3d(-1%, 3%, 0) scale(1.02); } }
html[data-theme="light"] .op-after {
  isolation: isolate;
  background:
    radial-gradient(1100px 620px at 84% -4%, rgba(190, 214, 236, 0.26), transparent 62%),
    radial-gradient(900px 560px at 4% 14%, rgba(200, 216, 232, 0.16), transparent 62%),
    radial-gradient(1000px 640px at 94% 44%, rgba(217, 144, 58, 0.10), transparent 64%),
    radial-gradient(900px 600px at 2% 76%, rgba(226, 205, 165, 0.20), transparent 62%),
    linear-gradient(180deg, #F6F8FA 0%, #F3F6F8 52%, #F1EADB 100%);
}
html[data-theme="light"] .op-after::before {
  content: ""; position: sticky; top: 0; display: block; height: 100vh; margin-bottom: -100vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 22%, rgba(196, 214, 232, 0.36), transparent 70%),
    radial-gradient(34vmax 28vmax at 82% 30%, rgba(190, 210, 230, 0.24), transparent 70%),
    radial-gradient(40vmax 30vmax at 60% 88%, rgba(212, 224, 236, 0.34), transparent 70%);
  filter: blur(26px); animation: op-cloud 48s ease-in-out infinite alternate; will-change: transform;
}
@media (prefers-reduced-motion: reduce) { html[data-theme="light"] .op-after::before { animation: none; } }
/* havada duran (yükselmiş) kartlar */
html[data-theme="light"] .op-after .op-tile, html[data-theme="light"] .op-after .op-aud, html[data-theme="light"] .op-after .op-plan {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.80));
  border: 1px solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 0 0 1px rgba(11, 31, 53, 0.06), 0 1px 2px rgba(11, 31, 53, 0.05), 0 10px 18px -8px rgba(11, 31, 53, 0.10), 0 34px 60px -26px rgba(11, 31, 53, 0.26), 0 46px 70px -46px rgba(154, 90, 14, 0.40), inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .op-after .op-tile--a { background: #0b1324; border-color: rgba(255,255,255,0.14); box-shadow: 0 0 0 1px rgba(11, 31, 53, 0.1), 0 30px 60px -24px rgba(11, 31, 53, 0.5), 0 50px 80px -50px rgba(154, 90, 14, 0.5); }
html[data-theme="light"] .op-after .op-aud--main, html[data-theme="light"] .op-after .op-plan--feat { background: linear-gradient(165deg, rgba(224, 247, 252, 0.95), rgba(255,255,255,0.86) 62%); border-color: rgba(154, 90, 14, 0.35); }
html[data-theme="light"] .op-after .op-proof { padding: 1.4rem 1.5rem; margin-bottom: 0.9rem; border: 1px solid rgba(255,255,255,0.95); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78)); box-shadow: 0 0 0 1px rgba(11, 31, 53, 0.05), 0 12px 22px -12px rgba(11, 31, 53, 0.14), 0 30px 50px -30px rgba(11, 31, 53, 0.22), inset 0 1px 0 #fff; }
html[data-theme="light"] .op-after .op-voice { border-color: rgba(11, 31, 53, 0.10); box-shadow: 0 6px 14px -8px rgba(11, 31, 53, 0.18), inset 0 1px 0 #fff; }
html[data-theme="light"] .op-after .op-how__stage { filter: drop-shadow(0 30px 50px rgba(11, 31, 53, 0.28)) drop-shadow(0 8px 14px rgba(11, 31, 53, 0.12)); }
html[data-theme="light"] .op-after .op-step.is-on { border-left: 2px solid var(--sc-accent); padding-left: 1.4rem; }
html[data-theme="light"] .op-after .op-step { padding-left: 1.4rem; border-left: 2px solid transparent; transition: opacity 400ms, border-color 400ms; }
html[data-theme="light"] .op-after .op-serif em, html[data-theme="light"] .op-after .op-em { background: linear-gradient(100deg, #9A5A0E, #C27A22); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html[data-theme="light"] .op-after .op-faq__col, html[data-theme="light"] .op-after .op-faq details { border-color: rgba(11, 31, 53, 0.12); }
html[data-theme="light"] .op-strip ul { border-color: rgba(11, 31, 53, 0.12); }
html[data-theme="light"] .op-strip b { background: linear-gradient(100deg, #9A5A0E, #C27A22); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html[data-theme="light"] .op-after .op-footer { background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.85)); border-top: 1px solid rgba(11, 31, 53, 0.08); box-shadow: 0 -20px 40px -30px rgba(11, 31, 53, 0.18); }
/* açık cam nav (kaydırınca) */
html[data-theme="light"] .op-nav.is-solid { --sc-ink: #0B1F35; --sc-ink-soft: #3A4C60; background: rgba(255, 255, 255, 0.74); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-color: rgba(11, 31, 53, 0.08); box-shadow: 0 10px 30px -14px rgba(11, 31, 53, 0.22); }
html[data-theme="light"] .op-nav.is-solid .op-theme { border-color: rgba(11, 31, 53, 0.18); background: rgba(11, 31, 53, 0.05); }
html[data-theme="light"] .op-nav.is-solid .op-links a { color: #213247; }
html[data-theme="light"] .op-dialog__box { box-shadow: 0 0 0 1px rgba(11, 31, 53, 0.08), 0 40px 100px -20px rgba(11, 31, 53, 0.45), inset 0 1px 0 #fff; }
html[data-theme="light"] .op-nav.is-solid .op-brand b { color: #0B1F35; }
html[data-theme="light"] .op-nav.is-solid .op-brand i { color: #9A5A0E; }

/* ============================ GÜNDÜZ SAHNESİ: CAM SARMAL KULE (#helix) ============================
   Açık temada #helix gösterilir, koyu uçuş (#flight) gizlenir; koyu temada tersi. */
#helix { display: none; }
html[data-theme="light"] #helix { display: block; }
html[data-theme="light"] #flight, html[data-theme="light"] #rail { display: none; }
.hx {
  --sc-ink: #0B1F35; --sc-ink-soft: #213247; --sc-accent: #9A5A0E; --op-line: rgba(11, 31, 53, 0.14);
  position: relative; z-index: 1; color: var(--sc-ink);
  background: linear-gradient(180deg, #F3F6F8 0%, #EEF2F6 48%, #E6ECF1 100%);
}
.hx-track { position: relative; height: 100vh; height: 100svh; }
.hx.is-3d .hx-track, .hx.is-pending .hx-track { height: 720vh; height: 720svh; }
.hx-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(900px 560px at 12% 92%, rgba(214, 228, 240, 0.7), transparent 60%),
    radial-gradient(70% 55% at 88% 6%, rgba(196, 218, 238, 0.55), rgba(196, 218, 238, 0) 62%), linear-gradient(180deg, #cde4f7 0%, #e2eff9 50%, #f6efe3 100%); }
.hx-poster, .hx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hx-poster { object-fit: cover; transition: opacity 700ms ease; }
.hx-canvas { opacity: 0; transition: opacity 700ms ease; touch-action: pan-y; }
.hx-canvas.is-ready { opacity: 1; }
.hx.is-3d .hx-poster { opacity: 0; }
.hx-hero { position: absolute; z-index: 3; left: var(--op-gutter); bottom: clamp(3.5rem, 12vh, 8rem); max-width: min(46rem, 88vw); will-change: transform, opacity; }
.op-h1--hero { font-size: clamp(2.5rem, 1.1rem + 4.4vw, 5.9rem); line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; }
.op-h1--hero em { display: block; margin-top: 0.08em; }
.hx-hero .op-h1 { font-size: clamp(2.5rem, 1.1rem + 4.4vw, 5.9rem); }
.hx-hero .op-lead { color: #213247; }
.hx-hero .op-serif em { color: #9A5A0E; }
.hx-cards { position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: 1400px; overflow: hidden; }
.hx-card {
  position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; isolation: isolate; overflow: hidden;
  width: 340px; padding: 1.15rem 1.25rem 1.05rem; border-radius: 22px; color: #0B1F35;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 20px 40px -15px rgba(11, 31, 53, 0.07), 0 1px 2px rgba(11, 31, 53, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: grid; gap: 0.5rem; align-content: start;
}
/* sıcak Ege gün ışığı: kartın üstünde çok hafif kum/turkuaz geçişi (steril beyaz değil) */
.hx-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 0% 0%, rgba(217, 144, 58, 0.20), rgba(217, 144, 58, 0) 55%), linear-gradient(200deg, rgba(217, 144, 58, 0.09), rgba(217, 144, 58, 0) 46%); }
.hx-card__n { color: #9A5A0E; font-size: 0.7rem; }
.hx-card h2 { margin: 0; font-size: clamp(1.45rem, 1.15rem + 0.9vw, 2rem); line-height: 1.05; }
.hx-card p { margin: 0; color: #213247; font-size: 0.92rem; line-height: 1.55; }
.hx-card img { width: 100%; height: auto; aspect-ratio: 520 / 300; object-fit: cover; border-radius: 12px; margin-top: 0.3rem; box-shadow: 0 0 0 1px rgba(11, 31, 53, 0.08), 0 14px 24px -14px rgba(11, 31, 53, 0.4); }
.hx-card__cta { justify-self: start; margin-top: 0.4rem; }
.hx-dots { position: absolute; z-index: 5; right: clamp(0.4rem, 1.6vw, 1.6rem); top: 50%; transform: translateY(-50%); display: grid; gap: 0.1rem; }
.hx-dot { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.hx-dot i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(11, 31, 53, 0.45); background: rgba(255, 255, 255, 0.7); transition: all 240ms; }
.hx-dot.is-on i { width: 13px; height: 13px; background: #9A5A0E; border-color: #9A5A0E; box-shadow: 0 0 0 5px rgba(154, 90, 14, 0.18); }
/* telefon / dar ekran: kartlar altta "sayfa" (alt sayfa) olarak gelir */
@media (max-width: 820px), (max-height: 480px) {
  .hx-hero { top: clamp(5.2rem, 13vh, 7rem); bottom: auto; }
  .hx-card { left: 4vw; right: 4vw; top: auto; bottom: max(14px, env(safe-area-inset-bottom)); width: auto; padding: 0.95rem 1.05rem 0.9rem; }
  .hx-card img { max-height: 24vh; aspect-ratio: 520 / 260; }
  .hx-dots { right: 0; }
}
@media (max-height: 480px) { .hx-card { right: auto; left: 3vw; width: min(46vw, 420px); } .hx-card img { display: none; } .hx-hero { top: 4.4rem; } .hx-hero .op-h1 { font-size: clamp(2rem, 8vh, 3.2rem); } .hx-hero .op-lead { display: none; } }
/* yedek: poster + statik kartlar (WebGL yok / hareket azaltma / veri tasarrufu / hata) */
.hx.is-fallback .hx-track { height: auto; }
.hx.is-fallback .hx-stage { position: relative; height: auto; overflow: visible; padding-bottom: 3rem; }
.hx.is-fallback .hx-poster { position: relative; height: 62vh; opacity: 1; }
.hx.is-fallback .hx-canvas, .hx.is-fallback .hx-dots { display: none; }
.hx.is-fallback .hx-hero { position: absolute; top: 0; height: 62vh; display: flex; flex-direction: column; justify-content: flex-end; bottom: auto; padding-bottom: 2rem; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.hx.is-fallback .hx-cards { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; padding: 2rem var(--op-gutter) 0; pointer-events: auto; perspective: none; }
.hx.is-fallback .hx-card { position: static; visibility: visible !important; opacity: 1 !important; transform: none !important; width: auto !important; min-height: 0 !important; pointer-events: auto !important; }
@media (prefers-reduced-motion: reduce) { .hx-poster, .hx-canvas { transition: none; } }
/* açık tema nav: helix boyunca koyu mürekkep (pastel zemin) */
html[data-theme="light"] .op-nav:not(.is-solid) { --sc-ink: #0B1F35; --sc-ink-soft: #213247; --sc-accent: #9A5A0E; }
html[data-theme="light"] .op-nav:not(.is-solid)::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); }
html[data-theme="light"] .op-nav:not(.is-solid) .op-links a { color: #213247; }
html[data-theme="light"] .op-nav:not(.is-solid) .op-brand b { color: #0B1F35; }
html[data-theme="light"] .op-nav:not(.is-solid) .op-brand b i { color: #9A5A0E; }
html[data-theme="light"] .op-nav:not(.is-solid) .op-theme { border-color: rgba(11, 31, 53, 0.25); background: rgba(255, 255, 255, 0.55); }

/* EİDS mührü (Güven bölümü) */
.op-seal { margin: 2rem 0 0; display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.2rem; align-items: center; padding: 1rem 1.2rem 1rem 0.6rem; border-radius: 22px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--op-line); }
.op-seal__stage { position: relative; width: 9.5rem; aspect-ratio: 1; }
.op-seal__c, .op-seal__fb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.op-seal__fb { object-fit: contain; padding: 4%; transition: opacity 500ms; }
.op-seal__c { opacity: 0; transition: opacity 500ms; }
.op-seal.is-3d .op-seal__c { opacity: 1; } .op-seal.is-3d .op-seal__fb { opacity: 0; }
.op-seal figcaption p { margin: 0.3rem 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--sc-ink-soft); }
.op-seal__k { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent); }
html[data-theme="light"] .op-seal { background: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 20px 40px -15px rgba(11, 31, 53, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
@media (max-width: 560px) { .op-seal { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* koyu tema hero: uzun başlık Dünya'nın açık bölgelerinin üstüne binebilir → metin arkasına yumuşak koyu hale + gölge (okunurluk) */
html:not([data-theme="light"]) .sc-copy[data-sc-window="hero"] { isolation: isolate; }
html:not([data-theme="light"]) .sc-copy[data-sc-window="hero"]::before { content: ""; position: absolute; inset: -16% -24% -16% -14%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse closest-side at 50% 52%, rgba(3, 8, 20, 0.72), rgba(3, 8, 20, 0.46) 55%, rgba(3, 8, 20, 0) 100%); }
html:not([data-theme="light"]) .sc-copy[data-sc-window="hero"] .op-h1, html:not([data-theme="light"]) .sc-copy[data-sc-window="hero"] .op-lead { text-shadow: 0 2px 22px rgba(3, 8, 20, 0.8); }

/* ===== GÜNDÜZ PALETİ v3: sıcak fildişi + gece antrasiti + şampanya altını (yalnız açık tema) ===== */
html[data-theme="light"] { --gold: #D9903A; --gold-ink: #9A5A0E; }
.hx-stage { background:
    radial-gradient(70% 55% at 88% 8%, rgba(200, 224, 242, 0.75), rgba(200, 224, 242, 0) 62%),
    radial-gradient(60% 50% at 8% 96%, rgba(200, 216, 232, 0.45), rgba(200, 216, 232, 0) 66%),
    linear-gradient(180deg, #F6F8FA 0%, #F3F6F8 52%, #E4EAF0 100%); }
html[data-theme="light"] body:not(:has([data-sc-mode="worldflight"])), html[data-theme="light"] .op-after { background: #F3F6F8; }
html[data-theme="light"] .op-cta { background: linear-gradient(180deg, #F2B15C, #D9903A); color: #1A1407; box-shadow: 0 12px 26px -12px rgba(154, 90, 14, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .op-cta:hover { box-shadow: 0 16px 30px -12px rgba(154, 90, 14, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .op-cta--ghost { background: transparent; color: #0B1F35; box-shadow: 0 0 0 1px rgba(11, 31, 53, 0.24) inset; }
html[data-theme="light"] .op-hero-eyebrow { color: #9A5A0E; }
html[data-theme="light"] .op-hero-eyebrow::before { background: #D9903A; }
/* hero: yukarı çekilmiş (sol üst boşluk yok); ada/dron sağ-alt ağırlıkta */
.hx-hero { top: clamp(5.4rem, 14vh, 9rem); bottom: auto; max-width: min(40rem, 88vw); }
.hx-hero .op-h1, .op-h1--hero { font-size: clamp(2.4rem, 1rem + 4.2vw, 5.2rem); }
.hx-hero .op-lead { max-width: 38ch; }
/* kartlar: sabit sol sütun, dikeyde ortalı; 3B eğim JS transform'unda */
.hx-card { left: var(--op-gutter); top: 50%; translate: 0 -50%; transform-origin: 0% 50%; width: clamp(300px, 29vw, 430px);
  background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(217, 144, 58, 0.2);
  box-shadow: 0 20px 40px -15px rgba(11, 31, 53, 0.10), 0 1px 2px rgba(11, 31, 53, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92); }
.hx-card::before { background: radial-gradient(120% 90% at 0% 0%, rgba(217, 144, 58, 0.20), rgba(217, 144, 58, 0) 55%), linear-gradient(200deg, rgba(217, 144, 58, 0.09), rgba(217, 144, 58, 0) 46%); }
.hx-card__n { display: flex; align-items: center; gap: 0.5rem; color: #9A5A0E; }
.hx-card__n svg { width: 16px; height: 16px; flex: none; stroke: #D9903A; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hx-card h2 { color: #0B1F35; } .hx-card p { color: #3A4C60; }
.hx-card img { box-shadow: 0 0 0 1px rgba(11, 31, 53, 0.08), 0 14px 24px -14px rgba(11, 31, 53, 0.35); }
.hx-dot i { border-color: rgba(11, 31, 53, 0.4); }
.hx-dot.is-on i { background: #D9903A; border-color: #9A5A0E; box-shadow: 0 0 0 5px rgba(217, 144, 58, 0.24); }
html[data-theme="light"] .op-seal { border-color: rgba(217, 144, 58, 0.22); }
html[data-theme="light"] .op-seal__k { color: #9A5A0E; }
@media (max-width: 820px), (max-height: 480px) {
  .hx-hero { top: clamp(5rem, 12vh, 6.5rem); }
  .hx-card { left: 4vw; right: 4vw; top: auto; bottom: max(14px, env(safe-area-inset-bottom)); translate: none; width: auto; transform-origin: 50% 100%; }
}
@media (max-height: 480px) { .hx-card { right: auto; left: 3vw; width: min(46vw, 420px); } }
.hx.is-fallback .hx-card { translate: none; left: auto; top: auto; }
.hx.is-fallback .hx-poster { height: 84vh; }
.hx.is-fallback .hx-hero { height: 84vh; justify-content: center; padding-top: 5.6rem; top: 0; bottom: auto; }
.hx.is-fallback .hx-hero .op-lead { max-width: 27ch; }
@media (max-width: 820px) { .hx.is-fallback .hx-hero .op-lead { max-width: 40ch; } }

/* ===== v4: kart okunurluğu (yüksek kontrast) ===== */
.hx-card { background: rgba(255, 255, 255, 0.92); border: 1.5px solid rgba(217, 144, 58, 0.35);
  backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: 0 25px 50px -12px rgba(11, 31, 53, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.hx-card h2 { color: #0B1F35; font-weight: 400; }
.hx-card p, .hx-card__n { color: #3A4C60; }
.hx-card__n svg { stroke: #9A5A0E; }
html[data-theme="light"] .hx-hero .op-h1, html[data-theme="light"] .op-h1--hero { color: #0B1F35; }
html[data-theme="light"] .hx-hero .op-lead { color: #3A4C60; }

/* ===== v5: gerçek drone + ürün katmanı ===== */
.hx-poster { object-fit: cover; }
.hx-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(243, 246, 248, 0.92) 0%, rgba(243, 246, 248, 0.78) 26%, rgba(243, 246, 248, 0.32) 46%, rgba(243, 246, 248, 0) 62%); opacity: var(--hx-scrim, 1); transition: opacity 240ms; }
.hx.is-3d .hx-stage::after { opacity: var(--hx-scrim, 1); }
.hx-ov { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.hx-ov .ov-area { fill: #D9903A; }
.hx-ov .ov-under { fill: none; stroke: rgba(11, 31, 53, 0.55); stroke-linejoin: round; stroke-linecap: round; }
.hx-ov .ov-line { fill: none; stroke: #D9903A; stroke-linejoin: round; stroke-linecap: round; }
.hx-ov .pin-h { fill: rgba(217, 144, 58, 0.28); stroke: #D9903A; stroke-width: 1.5; } .hx-ov .pin-c { fill: #F3F6F8; stroke: #0B1F35; stroke-width: 1; }
.hx-ov .lab rect, .hx-ov .poi rect, .hx-ov .tag rect { fill: rgba(11, 31, 53, 0.86); stroke: rgba(217, 144, 58, 0.7); stroke-width: 1; }
.hx-ov .lab text, .hx-ov .poi text { fill: #F3F6F8; font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; }
.hx-ov .poi-l { fill: none; stroke: #F3F6F8; stroke-width: 1.4; stroke-dasharray: 3 3; filter: drop-shadow(0 0 2px rgba(11, 31, 53, 0.8)); } .hx-ov .poi-d { fill: #D9903A; stroke: #0B1F35; stroke-width: 1; }
.hx-ov .tag .t1 { fill: #D9903A; font: 600 10.5px "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.hx-ov .tag .t2 { fill: #F3F6F8; font: 600 16px "Bricolage Grotesque", system-ui, sans-serif; } .hx-ov .tag .t3 { fill: #C7D1DB; font: 500 11px "JetBrains Mono", monospace; }
.hx-chip { position: absolute; z-index: 4; right: clamp(1rem, 5vw, 5rem); bottom: clamp(3.4rem, 12vh, 7rem); display: grid; gap: 0.15rem; padding: 0.8rem 1.1rem; border-radius: 16px; opacity: 0; visibility: hidden; pointer-events: none;
  background: rgba(11, 31, 53, 0.88); border: 1px solid rgba(217, 144, 58, 0.55); color: #F3F6F8; box-shadow: 0 20px 40px -14px rgba(11, 31, 53, 0.45); }
.hx-chip b { font-weight: 600; font-size: 0.95rem; } .hx-chip small { font: 500 0.66rem "JetBrains Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #D9903A; }
.hx-chip--voice { grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; } .hx-chip--voice small { grid-column: 2; } .hx-chip--voice b { grid-column: 2; }
.hx-chip .bars { grid-row: 1 / span 2; display: flex; gap: 3px; align-items: center; height: 26px; } .hx-chip .bars i { width: 4px; border-radius: 2px; background: #D9903A; height: 30%; }
.hx-chip .bars i:nth-child(2) { height: 70%; } .hx-chip .bars i:nth-child(3) { height: 100%; } .hx-chip .bars i:nth-child(4) { height: 60%; } .hx-chip .bars i:nth-child(5) { height: 40%; }
@media (max-width: 820px), (max-height: 480px) { .hx-chip { right: 1rem; bottom: auto; top: clamp(5rem, 12vh, 6rem); } .hx-stage::after { background: linear-gradient(180deg, rgba(243, 246, 248, 0.92) 0%, rgba(243, 246, 248, 0.62) 42%, rgba(243, 246, 248, 0) 64%); } }
.hx.is-fallback .hx-stage::after, .hx.is-fallback .hx-ov, .hx.is-fallback .hx-chip { display: none; }
/* gerçek drone sahnesinde parsel solda olduğundan kartlar SAĞ sütunda (masaüstü) */
@media (min-width: 821px) and (min-height: 481px) { .hx-card { left: auto; right: calc(var(--op-gutter) + 2.4rem); transform-origin: 100% 50%; } }

.hx-ov .ov-halo { fill: none; stroke: rgba(217, 144, 58, 0.55); stroke-linejoin: round; stroke-linecap: round; }
.hx-ov .ov-core { fill: none; stroke: #FFE7C4; stroke-linejoin: round; stroke-linecap: round; }
.hx-chip { right: auto; left: calc(var(--op-gutter) + 0px); bottom: auto; top: clamp(5.6rem, 14vh, 8rem); }
/* telefon: okunurluk (hero metni fotoğraf üstünde) ve kısa ekranlarda kartın parseli örtmemesi */
@media (max-width: 820px), (max-height: 480px) { .hx-stage::after { background: linear-gradient(180deg, rgba(243, 246, 248, 0.94) 0%, rgba(243, 246, 248, 0.9) 52%, rgba(243, 246, 248, 0.55) 74%, rgba(243, 246, 248, 0) 92%); } }
@media (max-width: 820px) and (max-height: 760px) { .hx-card img { display: none; } .hx-card { padding: 0.8rem 1rem 0.75rem; } .hx-card p { font-size: 0.86rem; } }
@media (max-width: 820px) { .hx-hero .op-cta--ghost { background: rgba(255, 255, 255, 0.85); } }

/* ======================================================================================================
   v6 · PALET B "Lacivert & Tuz + amber", Bricolage Grotesque + Manrope, kart etkileşimi, rakam şeridi, adımlar
   Jetonlar: zemin #F3F6F8 · yazı #0B1F35 / #3A4C60 · lacivert #0E2A47 · amber #D9903A (dolgu/çizgi) · #9A5A0E (küçük metin, AA 5,0:1)
   ====================================================================================================== */
html[data-theme="light"] { --navy: #0E2A47; --amber: #D9903A; --amber-ink: #9A5A0E; --paper: #F3F6F8; --edge: rgba(11, 31, 53, 0.12); }
.op-serif { font-weight: 700; letter-spacing: -0.03em; }
.op-serif em, .op-em { font-style: normal; }
.op-h2 { font-size: clamp(2.2rem, 1.3rem + 3.8vw, 4.6rem); line-height: 1.02; }
.op-title { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.2rem); line-height: 1.04; max-width: 20ch; }
.op-step h3, .op-tile h3, .op-aud h3, .op-proof h3, .op-faq summary, .op-plan h3 { font-weight: 600; letter-spacing: -0.022em; }
.op-mono { font-weight: 500; }
html[data-theme="light"] .op-serif em, html[data-theme="light"] .op-em { color: var(--amber-ink); -webkit-text-fill-color: currentColor; background: none; }
html[data-theme="light"] .op-after .op-serif em, html[data-theme="light"] .op-after .op-em, html[data-theme="light"] .op-strip b { background: none; -webkit-text-fill-color: currentColor; color: var(--amber-ink); }

/* --- ortak kart etkileşimi: dinlenirken havada, üzerine gelince/dokununca yükselir, altı amber ışıkla parlar --- */
html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal) {
  position: relative; isolation: isolate; border: 1px solid var(--edge); background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 22px 38px -22px rgba(11, 31, 53, 0.30), 0 3px 8px rgba(11, 31, 53, 0.05);
  transition: translate 380ms cubic-bezier(.2, .8, .2, 1), box-shadow 380ms ease, border-color 260ms ease;
}
html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 320ms ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 62%);
}
@media (hover: hover) {
  html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal):hover { translate: 0 -12px; border-color: rgba(217, 144, 58, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 34px 46px -24px rgba(217, 144, 58, 0.55), 0 44px 70px -34px rgba(11, 31, 53, 0.42); }
  html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal):hover::after { opacity: 1; }
}
html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal).is-lift, html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal).is-pressed { translate: 0 -10px; border-color: rgba(217, 144, 58, 0.55);
  box-shadow: inset 0 1px 0 #fff, 0 30px 42px -22px rgba(217, 144, 58, 0.55), 0 38px 60px -30px rgba(11, 31, 53, 0.4); }
html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal).is-lift::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal) { transition: box-shadow 200ms, border-color 200ms; } html[data-theme="light"] :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal):is(:hover, .is-lift, .is-pressed) { translate: none; } }
html[data-theme="light"] .hx-card:hover { border-color: rgba(217, 144, 58, 0.6); box-shadow: 0 30px 50px -18px rgba(217, 144, 58, 0.5), 0 34px 60px -24px rgba(11, 31, 53, 0.35); }

/* --- rakam şeridi: yüzen cam panel, büyük rakamlar, ince amber çizgi --- */
.op-strip ul { position: relative; border: 1px solid var(--edge); border-radius: 28px; gap: 0; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.66)); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 1px 0 #fff, 0 30px 50px -28px rgba(11, 31, 53, 0.34), 0 4px 10px rgba(11, 31, 53, 0.05); }
.op-strip li { position: relative; padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.2rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.6vw, 2rem); gap: 0.55rem; }
.op-strip li + li::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, rgba(11, 31, 53, 0.22), transparent); }
.op-strip li::after { content: ""; width: 34px; height: 3px; border-radius: 3px; background: var(--amber); order: 2; }
.op-strip b { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(3rem, 1.9rem + 3.8vw, 5.4rem); letter-spacing: -0.045em; line-height: 0.95; color: var(--navy); font-variant-numeric: tabular-nums; }
html[data-theme="light"] .op-strip b { color: var(--navy) !important; }
.op-strip span { order: 3; color: #3A4C60; font-size: 0.98rem; font-weight: 500; }
@media (max-width: 720px) { .op-strip li:nth-child(3)::before { display: none; } .op-strip li:nth-child(n+3) { border-top: 1px solid var(--edge); } }

/* --- Nasıl çalışır: her adım daha uzun okunur, görsel adımlar bitene kadar sabit kalır --- */
@media (min-width: 900px) {
  .op-step { min-height: 96vh; opacity: 0.32; transition: opacity 600ms ease; }
  .op-how__steps { padding-bottom: 26vh; }
  .op-how__stage { top: 13vh; }
}
.op-shot { transition: opacity 900ms cubic-bezier(.2, .8, .2, 1), transform 1100ms cubic-bezier(.2, .8, .2, 1); }
html[data-theme="light"] .op-how__stage { border-radius: 22px; box-shadow: 0 50px 80px -40px rgba(11, 31, 53, 0.55), 0 0 0 1px rgba(11, 31, 53, 0.1); }

/* --- Özellikler: "Resmi sınır" kartı açık tonlu (koyu katman kaldırıldı) --- */
html[data-theme="light"] .op-after .op-tile--a { --sc-ink: #0B1F35; --sc-ink-soft: #213247; color: #0B1F35; }
html[data-theme="light"] .op-tile--a .op-tile__media img { opacity: 1; filter: brightness(1.28) saturate(1.08) contrast(1.02); }
html[data-theme="light"] .op-tile--a .op-tile__media::after { background: linear-gradient(180deg, rgba(243, 246, 248, 0) 0%, rgba(243, 246, 248, 0) 38%, rgba(243, 246, 248, 0.78) 68%, rgba(243, 246, 248, 0.96) 100%); }
html[data-theme="light"] .op-tile--a h3, html[data-theme="light"] .op-tile--a p, html[data-theme="light"] .op-tile--a .op-mono { color: #0B1F35 !important; text-shadow: none; }
html[data-theme="light"] .op-tile--a p { color: #213247 !important; }

/* --- İletişim kutusu (üst katmanda olduğu için tema jetonları açıkça verilir) --- */
html[data-theme="light"] .op-dialog { --sc-ink: #0B1F35; --sc-ink-soft: #3A4C60; --sc-accent: #9A5A0E; color: #0B1F35; }
html[data-theme="light"] .op-dialog__box { background: #FFFFFF; border: 1px solid rgba(11, 31, 53, 0.14); box-shadow: 0 50px 120px -30px rgba(11, 31, 53, 0.55); }
html[data-theme="light"] .op-dialog h2 { color: #0B1F35; } html[data-theme="light"] .op-dialog p { color: #213247; } html[data-theme="light"] .op-dialog h3 { color: #9A5A0E; }
html[data-theme="light"] .op-dialog a { color: #9A5A0E; text-decoration-color: rgba(154, 90, 14, 0.5); }

/* --- Sabit sol/sağ bilgi kartları: daha büyük --- */
.hx-card { width: clamp(340px, 33vw, 520px); padding: 1.5rem 1.65rem 1.4rem; gap: 0.65rem; border-radius: 24px; }
.hx-card h2 { font-size: clamp(1.75rem, 1.3rem + 1.15vw, 2.6rem); line-height: 1.04; }
.hx-card p { font-size: 1.02rem; line-height: 1.6; }
.hx-card__n { font-size: 0.78rem; }
.hx-card img { border-radius: 14px; }
@media (max-width: 820px), (max-height: 480px) { .hx-card { width: auto; padding: 1rem 1.15rem 0.95rem; } .hx-card h2 { font-size: 1.55rem; } .hx-card p { font-size: 0.94rem; } }
@media (max-width: 820px) and (max-height: 760px) { .hx-card p { font-size: 0.9rem; } }
/* atmosfer: tuz beyazı zemin üzerinde çok hafif lacivert ve amber ışıma (düz renk değil) */
html[data-theme="light"] .op-after {
  background:
    radial-gradient(1100px 620px at 88% -4%, rgba(217, 144, 58, 0.11), transparent 62%),
    radial-gradient(900px 600px at 0% 12%, rgba(14, 42, 71, 0.07), transparent 62%),
    radial-gradient(1000px 640px at 96% 46%, rgba(14, 42, 71, 0.05), transparent 64%),
    radial-gradient(900px 600px at 2% 78%, rgba(217, 144, 58, 0.08), transparent 62%),
    linear-gradient(180deg, #F6F8FA 0%, #EEF2F6 52%, #F3F6F8 100%);
}
.hx-card::before { background: radial-gradient(120% 90% at 0% 0%, rgba(14, 42, 71, 0.05), rgba(14, 42, 71, 0) 55%), linear-gradient(200deg, rgba(217, 144, 58, 0.07), rgba(217, 144, 58, 0) 46%); }
.hx-card { background: rgba(255, 255, 255, 0.94); border-color: rgba(14, 42, 71, 0.16); }
@media (max-width: 900px) { html[data-theme="light"] .op-tile--a .op-tile__media::after { background: linear-gradient(180deg, rgba(243, 246, 248, 0.72) 0%, rgba(243, 246, 248, 0.86) 45%, rgba(243, 246, 248, 0.96) 100%); } html[data-theme="light"] .op-tile--a .op-tile__media img { opacity: 0.85; } }

/* ======================================================================================================
   v7 · GECE TEMASI: gündüzün güzel özellikleri gece paletiyle (lacivert + amber #E9A24A)
   ====================================================================================================== */
html:not([data-theme="light"]) { --amber: #E9A24A; --edge-d: rgba(233, 162, 74, 0.22); }
html:not([data-theme="light"]) .op-serif em, html:not([data-theme="light"]) .op-em { color: #F5C27A; font-style: normal; }
html:not([data-theme="light"]) .op-cta { background: linear-gradient(180deg, #F2B15C, #D9903A); color: #1B1204; box-shadow: 0 14px 28px -12px rgba(217, 144, 58, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
/* kartlar: havada, üzerine gelince/dokununca yükselir, altı amber ışır, imleç ışığı (polish.js --mx/--my) */
html:not([data-theme="light"]) :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal) {
  position: relative; isolation: isolate; border: 1px solid rgba(148, 176, 214, 0.16);
  background: linear-gradient(180deg, rgba(20, 30, 50, 0.72), rgba(11, 18, 34, 0.6)); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 26px 44px -24px rgba(0, 0, 0, 0.8);
  transition: translate 380ms cubic-bezier(.2, .8, .2, 1), box-shadow 380ms ease, border-color 260ms ease;
}
html:not([data-theme="light"]) :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 320ms ease;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(233, 162, 74, 0.16), rgba(233, 162, 74, 0) 62%);
}
@media (hover: hover) {
  html:not([data-theme="light"]) :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal):hover { translate: 0 -12px; border-color: rgba(233, 162, 74, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 36px 48px -26px rgba(233, 162, 74, 0.5), 0 44px 70px -34px rgba(0, 0, 0, 0.9); }
  html:not([data-theme="light"]) :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal):hover::after { opacity: 1; }
}
html:not([data-theme="light"]) :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal).is-lift, html:not([data-theme="light"]) :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal).is-pressed { translate: 0 -10px; border-color: rgba(233, 162, 74, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 44px -24px rgba(233, 162, 74, 0.5), 0 38px 60px -30px rgba(0, 0, 0, 0.9); }
html:not([data-theme="light"]) :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal).is-lift::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html:not([data-theme="light"]) :is(.op-tile, .op-aud, .op-plan, .op-proof, .op-seal):is(:hover, .is-lift, .is-pressed) { translate: none; } }
/* rakam şeridi: cam panel */
html:not([data-theme="light"]) .op-strip ul { border: 1px solid rgba(148, 176, 214, 0.18); border-radius: 28px; gap: 0; padding: 0; overflow: hidden; position: relative;
  background: linear-gradient(180deg, rgba(20, 30, 50, 0.72), rgba(11, 18, 34, 0.55)); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 34px 54px -30px rgba(0, 0, 0, 0.85); }
html:not([data-theme="light"]) .op-strip li { position: relative; padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.2rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.6vw, 2rem); gap: 0.55rem; }
html:not([data-theme="light"]) .op-strip li + li::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, rgba(148, 176, 214, 0.3), transparent); }
html:not([data-theme="light"]) .op-strip li::after { content: ""; width: 34px; height: 3px; border-radius: 3px; background: #E9A24A; order: 2; }
html:not([data-theme="light"]) .op-strip b { font-weight: 800; font-size: clamp(3rem, 1.9rem + 3.8vw, 5.4rem); letter-spacing: -0.045em; line-height: 0.95; color: #F3F6FB; font-variant-numeric: tabular-nums; }
html:not([data-theme="light"]) .op-strip span { order: 3; color: #B9C8DD; font-size: 0.98rem; font-weight: 500; }
@media (max-width: 720px) { html:not([data-theme="light"]) .op-strip li:nth-child(3)::before { display: none; } html:not([data-theme="light"]) .op-strip li:nth-child(n+3) { border-top: 1px solid rgba(148, 176, 214, 0.16); } }
/* Nasıl çalışır: aktif adım amber çizgi + ışıma (gündüzdeki gibi) */
html:not([data-theme="light"]) .op-step { padding-left: 1.4rem; border-left: 2px solid transparent; transition: opacity 600ms ease, border-color 500ms ease; }
html:not([data-theme="light"]) .op-step.is-on { border-left-color: #E9A24A; box-shadow: -14px 0 24px -18px rgba(233, 162, 74, 0.55); }
html:not([data-theme="light"]) .op-how__stage { border-radius: 22px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(148, 176, 214, 0.16); }
html:not([data-theme="light"]) .op-dialog__box { background: rgba(10, 17, 32, 0.96); border-color: rgba(233, 162, 74, 0.28); }
html:not([data-theme="light"]) .op-dialog h3 { color: #E9A24A; } html:not([data-theme="light"]) .op-dialog a { color: #F5C27A; }
html:not([data-theme="light"]) .hx-card:hover { border-color: rgba(233, 162, 74, 0.6); }
/* koyu hero (Dünya videosu üstünde): başlık ve açıklama açık renk (önceki sürümde lacivert kalmıştı) */
html:not([data-theme="light"]) .sc-copy .op-h1, html:not([data-theme="light"]) .sc-copy .op-h1--hero { color: #F3F6FB; }
html:not([data-theme="light"]) .sc-copy .op-lead { color: #D6E0EE; }
html:not([data-theme="light"]) .sc-copy .op-h1--hero em { color: #F5C27A; }

/* CLS (masaüstü, hızlı JS): scrollcraft.js `sc-world*` sınıflarını sonradan ekler. İlk boyamada uçuş katmanı 0 yükseklikli akışta kalıyor, poster/video/hero
   metni 60 ms sonra yerine sıçrıyordu (CLS 0,56–0,75). Aynı kuralları JS gelmeden uygula; :where() → özgüllük 0, JS sınıfları gelince onlar esas olur. */
:where(#flight [data-sc-world]) { position: fixed; inset: 0; overflow: clip; z-index: var(--sc-z-stage); background: var(--sc-canvas); }
:where(#flight [data-sc-segment]) { position: absolute; inset: 0; opacity: 0; }
:where(#flight [data-sc-segment]:first-of-type) { opacity: 1; }
:where(#flight [data-sc-segment] > video, #flight [data-sc-segment] > img, #flight [data-sc-segment] > canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:where(#flight [data-sc-world-copy]) { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; }
/* Asıl kayma nedeni: uçuş bölümü ilk boyamada 0 yükseklikte; sonraki bölüm ekranın en üstünde görünüyor, JS uçuş yüksekliğini (≈5,9 ekran) kurunca
   görünür tüm içerik aşağı itiliyordu (CLS 1,0). JS gelene kadar yüksekliği ayır (JS'in satır içi yüksekliği bunu ezer; sayfa altı değişimi CLS'e girmez). */
:where(#flight [data-sc-spacer]) { height: 590vh; height: 590svh; }

/* Mobil nav: tema düğmesi flex ile 14 px'e eziliyordu (simge görünmez, dokunulamaz). Düğmeler küçülmez; çok dar ekranda marka yazısı gizlenir. */
.op-nav .op-theme, .op-nav .op-tp-btn, .op-nav .op-cta--sm { flex: 0 0 auto; }
@media (pointer: coarse) { .op-nav .op-theme { min-width: 44px; width: 44px; height: 44px; } }
@media (max-width: 370px) { .op-nav .op-brand b { display: none; } }
@media (max-width: 480px) { .op-nav { gap: 0.5rem; } .op-nav .op-links { display: none; } }

/* AÇIK TEMA: bulut katmanı (.op-after::before) translate3d(±3%) + scale(1.06) ile sürekli hareket ediyor ve kırpma olmadığı için sayfanın kaydırılabilir
   genişliğini 77 px'e kadar büyütüyordu (yatay kaydırma). `clip` kaydırma kabı OLUŞTURMAZ → sticky bulut katmanı çalışmaya devam eder. */
html[data-theme="light"] .op-after { overflow-x: clip; }
/* Dar telefonlarda üst çubuk iki temada da sığsın (marka küçülebilir, boşluklar sıkı); açık temada marka 14 px fazla yer kaplıyordu. */
@media (max-width: 420px) {
  .op-nav { gap: 0.35rem; padding-inline: 0.9rem; }
  .op-nav .op-brand { min-width: 0; flex: 0 1 auto; gap: 0.45rem; }
  .op-nav .op-brand b { font-size: 0.94rem; white-space: nowrap; }
}


/* ---- Örnek çıktı (demo videosu): iki temada da koyu çerçeve, video her zaman koyu ---- */
.op-demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.op-demo__frame { margin: 0; justify-self: center; display: grid; gap: 0.7rem; justify-items: center; }
.op-demo__frame video { display: block; width: min(320px, 78vw); height: auto; aspect-ratio: 718 / 1280; border-radius: 22px; background: #05080f; border: 1px solid var(--op-line); box-shadow: 0 30px 60px -28px rgba(5, 12, 30, 0.55); }
.op-demo__frame figcaption { font-size: 0.8rem; color: var(--sc-ink-soft, #c3d2e8); }
@media (max-width: 820px) { .op-demo__grid { grid-template-columns: 1fr; } }

/* Oturum açık: gezinmede belirgin "Panelim" düğmesi (account-nav.js) */
.op-acct { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sc-accent) 65%, transparent); color: var(--sc-ink); background: color-mix(in srgb, var(--sc-accent) 14%, transparent); font-weight: 800; font-size: .86rem; text-decoration: none; white-space: nowrap; flex: 0 0 auto; margin-right: .4rem; }
.op-acct:hover { background: color-mix(in srgb, var(--sc-accent) 26%, transparent); }
@media (pointer: coarse) { .op-acct { min-height: 44px; } }

/* Oturum açık + telefon: "Panelim" pili eklenince marka kutusu daralıp yazı pilin altına taşıyordu (account-nav.js `has-acct`). Yalnız logo kalır; yazı geniş ekranda görünür. */
.op-nav.has-acct .op-brand { flex: none; }
@media (max-width: 560px) { .op-nav.has-acct .op-brand b { display: none; } }
@media (max-width: 400px) {
  .op-nav.has-acct { gap: 0.3rem; }
  .op-nav.has-acct .op-acct { padding: 0 10px; margin-right: 0; font-size: .82rem; }
  .op-nav.has-acct .op-cta--sm { padding: 0.5rem 0.7rem; }
}
@media (max-width: 340px) { .op-nav.has-acct .op-tp-btn { display: none; } }

/* ---- Telefon: "Nasıl çalışır" — tek yapışkan görsel yerine her adımın görseli kendi metninin ALTINDA (kaydırırken görsel yazıyı örtmez) ---- */
.op-step__m { display: none; }
@media (max-width: 960px) {
  .op-how__stage { display: none; }
  .op-how .op-step { min-height: 0; opacity: 1; justify-content: flex-start; padding-top: 1.4rem; padding-bottom: 2.6rem; transition: none; }
  .op-step__m { display: block; position: relative; margin: 1.1rem 0 0; aspect-ratio: 1440 / 900; overflow: hidden; border-radius: 18px; border: 1px solid rgba(148, 176, 214, 0.22); background: #050810; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7); }
  .op-step__m img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .op-step__m--film { background: radial-gradient(70% 80% at 30% 40%, rgba(233, 162, 74, 0.10), transparent 70%), #050810; }
  .op-step__m--film img { position: absolute; width: auto; height: auto; border-radius: 10px; border: 1px solid rgba(148, 176, 214, 0.22); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9); }
  .op-step__m--film .op-film__h { left: 4%; top: 14%; width: 60%; aspect-ratio: 16 / 9; }
  .op-step__m--film .op-film__v { right: 4%; bottom: 6%; height: 88%; aspect-ratio: 9 / 16; }
}

/* Yönetici: "Panelim ▾" menüsü (staff-link.js). Buton .op-acct görünümünü taşır; menü sabit konumlu cam kart. */
button.op-acct.op-stf { -webkit-appearance: none; appearance: none; font: inherit; font-weight: 700; color: var(--sc-ink); cursor: pointer; white-space: nowrap; background: color-mix(in srgb, var(--sc-accent) 14%, transparent); }
.op-stf-menu { position: fixed; z-index: 90; min-width: 190px; padding: 6px; border-radius: 16px; border: 1px solid rgba(233,162,74,.55); background: rgba(11,31,53,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
.op-stf-menu[hidden] { display: none; }
.op-stf-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 11px; color: #F3F7FC; font-weight: 700; text-decoration: none; }
.op-stf-menu a:hover, .op-stf-menu a:focus-visible { background: rgba(233,162,74,.18); outline: none; }
.op-stf-menu a[href="/yonetim"] { color: #F2B865; }