/* ==========================================================================
   AERON DRONE ÇEKİMLERİ — Stylesheet
   Premium / editorial / cinematic. Gray-white-charcoal palette.
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root {
  --aeron-bg: #F2F2F0;
  --aeron-white: #F7F7F5;
  --aeron-soft: #EBEBE8;
  --aeron-silver: #DADAD6;
  --aeron-gray: #969692;
  --aeron-muted: #686864;
  --aeron-dark: #3D3D3A;
  --aeron-charcoal: #20201E;
  --aeron-black: #111110;

  --text-primary: #14140F;
  --text-secondary: #62625F;
  --text-on-dark: #F2F2F0;
  --text-on-dark-secondary: #A6A6A0;

  --accent: #E84A3C;
  --whatsapp: #25D366;
  --whatsapp-dark: #128C4A;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --container-max: 1500px;
  --pad-inline: clamp(20px, 5vw, 64px);

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-height: 76px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}
section[id] {
  scroll-margin-top: var(--nav-height);
}
html, body {
  overflow-x: hidden;
  width: 100%;
}
body {
  margin: 0;
  background: var(--aeron-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p { margin: 0; }

::selection { background: var(--aeron-charcoal); color: var(--aeron-white); }

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

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.section-title-dark .eyebrow { color: #E9847A; }

.section {
  position: relative;
  padding-block: clamp(72px, 11vw, 148px);
}

/* generic reveal-on-scroll target */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.is-visible {
  animation: revealIn 0.85s var(--ease-premium) forwards;
}
@keyframes revealIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- Loading screen ---------- */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--aeron-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
#loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.loading-mark {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.loading-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 8px;
}
.loading-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aeron-gray);
  margin-top: 34px;
}
.loading-line {
  width: 220px;
  height: 1px;
  background: var(--aeron-silver);
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}
.loading-line::after {
  content: '';
  position: absolute;
  left: -40%;
  top: 0;
  width: 40%;
  height: 100%;
  background: var(--aeron-charcoal);
  animation: loadingSweep 1.4s ease-in-out infinite;
}
@keyframes loadingSweep {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* ---------- Navbar ---------- */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 500;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
#navbar.is-scrolled {
  background: rgba(247, 247, 245, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--aeron-silver);
}
#navbar.on-dark { color: var(--text-on-dark); }
.nav-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav-brand strong {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.01em;
}
.nav-brand span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
  margin-top: 5px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  padding-block: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease-premium);
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid var(--text-primary);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--text-primary); color: var(--aeron-white); }
#navbar.on-dark .nav-cta { border-color: var(--text-on-dark); }
#navbar.on-dark .nav-cta:hover { background: var(--text-on-dark); color: var(--aeron-black); }

.hamburger {
  display: none;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  position: relative;
  padding: 0;
}
.hamburger span {
  position: absolute;
  left: 5px; right: 5px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-premium), opacity 0.2s ease, top 0.3s var(--ease-premium);
}
.hamburger span:nth-child(1) { top: 12px; }
.hamburger span:nth-child(2) { top: 17px; }
.hamburger span:nth-child(3) { top: 22px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 17px; transform: rotate(-45deg); }

#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: var(--aeron-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px var(--pad-inline);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-premium);
}
#mobile-menu.is-open { transform: translateY(0); }
#mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#mobile-menu nav a {
  font-family: var(--font-display);
  font-size: 34px;
  padding-block: 12px;
  border-bottom: 1px solid var(--aeron-silver);
}
.mobile-menu-cta {
  margin-top: 32px;
  display: inline-flex;
  justify-content: center;
  padding: 16px 24px;
  background: var(--text-primary);
  color: var(--aeron-white);
  border-radius: 999px;
  font-weight: 600;
}
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  z-index: 20;
}
.hero-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: center;
  gap: 24px;
}
.hero-text { max-width: 620px; position: relative; z-index: 5; }
.hero-text .eyebrow { margin-bottom: 22px; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 6vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.hero-desc {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 480px;
}
.hero-cta-group {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--text-primary);
  color: var(--aeron-white);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.35s var(--ease-premium), background 0.3s ease;
}
.btn-primary:hover { transform: translateY(-2px); background: var(--aeron-charcoal); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 1px solid var(--aeron-dark);
  color: var(--text-primary);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.btn-secondary:hover { background: var(--aeron-soft); }
.hero-trust {
  margin-top: 46px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aeron-gray);
}
/* Hero's own dedicated 3D drone stage — mobile-first sizing (see the
   desktop override further down for the larger, column-filling size). */
.hero-drone-stage {
  position: relative;
  width: 100%;
  height: clamp(250px, 32svh, 340px);
  overflow: visible;
}

/* ---------- Manifesto ---------- */
#manifesto { background: var(--aeron-soft); }
/* Mobile-first: plain stacked flow in DOM order (eyebrow+title, then the
   capture-drone-stage, then description, then the closing emphasis line)
   — see the desktop override further down for the two-column layout that
   moves the drone into its own left-hand stage. Same "container" sizing
   .container itself uses (width/max-width/padding), reproduced directly
   here since this section no longer combines the .container class with
   its own on the wrapper (needed so the desktop grid below can size the
   drone column independently of the 640px text measure). */
.manifesto-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.manifesto-head,
.manifesto-desc,
.manifesto-emphasis {
  max-width: 640px;
}
.manifesto-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.06;
  margin-top: 20px;
  letter-spacing: -0.01em;
}
.manifesto-desc {
  margin-top: 26px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 520px;
}
.manifesto-emphasis {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--aeron-silver);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--text-primary);
}
/* Manifesto's own dedicated 3D drone stage (dji_mavic_3.glb)
   — mobile-first sizing; entirely independent scene/camera/canvas/model
   instance from the hero and cinematic stages (see js/droneStage.js). */
.capture-drone-stage {
  position: relative;
  width: 100%;
  height: clamp(220px, 30svh, 320px);
  overflow: visible;
  margin-top: 28px;
  margin-bottom: 8px;
}

/* ---------- Services ---------- */
#services { background: var(--aeron-bg); }
.section-head {
  max-width: 640px;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  margin-top: 18px;
}
.section-head p {
  margin-top: 18px;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 460px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--aeron-silver);
  border: 1px solid var(--aeron-silver);
}
.service-card {
  background: var(--aeron-white);
  padding: 34px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 240px;
}
.service-card .icon {
  width: 34px; height: 34px;
  color: var(--text-primary);
}
.service-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.service-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Fleet / inventory ---------- */
#fleet { background: var(--aeron-soft); }
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: clamp(40px, 6vw, 60px);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.fleet-card {
  background: var(--aeron-white);
  border: 1px solid var(--aeron-silver);
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
}
.fleet-media {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--aeron-soft);
  border: 1px solid var(--aeron-silver);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 22px;
}
.fleet-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 10px;
}
.fleet-media.no-image {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aeron-gray);
  text-align: center;
  padding: 20px;
}
.fleet-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.fleet-card h3 {
  font-family: var(--font-display);
  font-size: 23px;
  margin-top: 10px;
}
.fleet-card p.fleet-desc {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  flex-grow: 1;
}
.fleet-tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fleet-tags span {
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--aeron-silver);
  border-radius: 999px;
  color: var(--text-secondary);
}
.fleet-vurgu {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  border-top: 1px solid var(--aeron-silver);
  padding-top: 14px;
}
/* ---------- Process ---------- */
#process { background: var(--aeron-soft); }
.process-steps {
  margin-top: clamp(44px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.process-step {
  padding-top: 24px;
  border-top: 1px solid var(--aeron-dark);
}
.process-step .step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.process-step h3 {
  font-family: var(--font-display);
  font-size: 21px;
  margin-top: 14px;
}
.process-step p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- Cinematic (dark) ---------- */
#cinematic {
  background: var(--aeron-charcoal);
  color: var(--text-on-dark);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.cinematic-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  padding-block: 56px;
  /* Mobile-first: plain stacked flow in DOM order (text, then the drone
     stage, then the closing emphasis line) — see the desktop override
     further down for the two-column layout with its own drone column. */
  display: flex;
  flex-direction: column;
}
.cinematic-text {
  max-width: 100%;
}
.cinematic-text .eyebrow { color: #E9847A; }
.cinematic-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  margin-top: 20px;
  letter-spacing: -0.01em;
}
.cinematic-desc {
  margin-top: 24px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-on-dark-secondary);
}
.cinematic-emphasis {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(242,242,240,0.16);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
}

/* ---------- About ---------- */
#about { background: var(--aeron-bg); }
.about-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
}
.about-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.12;
  margin-top: 18px;
}
.about-text p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 480px;
}
.about-values {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.value-row {
  padding-block: 26px;
  border-top: 1px solid var(--aeron-silver);
}
.value-row:last-child { border-bottom: 1px solid var(--aeron-silver); }
.value-row h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.value-row p {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---------- Contact ---------- */
#contact { background: var(--aeron-soft); }
.contact-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.1;
  margin-top: 18px;
}
.contact-sub {
  margin-top: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--text-primary);
}
.contact-desc {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 440px;
}
.contact-rows {
  display: flex;
  flex-direction: column;
}
.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 14px;
  border-top: 1px solid var(--aeron-silver);
}
.contact-rows .contact-row:last-child { border-bottom: 1px solid var(--aeron-silver); }
.contact-row .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.contact-row .value {
  font-family: var(--font-display);
  font-size: 19px;
  text-align: right;
}
.contact-row a.value:hover { color: var(--accent); }
.contact-ctas {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-ctas .btn-primary,
.contact-ctas .btn-secondary { justify-content: center; width: 100%; }

/* ---------- Footer ---------- */
#footer {
  background: var(--aeron-charcoal);
  color: var(--text-on-dark);
  padding-block: 64px 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
}
.footer-brand strong {
  font-family: var(--font-display);
  font-size: 24px;
}
.footer-brand span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--text-on-dark-secondary);
  margin-top: 8px;
}
.footer-brand p {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-on-dark-secondary);
  max-width: 320px;
  line-height: 1.6;
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark-secondary);
  margin-bottom: 18px;
}
.footer-col a, .footer-col p {
  display: block;
  font-size: 14.5px;
  margin-bottom: 12px;
  color: var(--text-on-dark);
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(242,242,240,0.14);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-on-dark-secondary);
}

/* ---------- WhatsApp floating button ---------- */
#whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 600;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(18, 140, 74, 0.35);
  transition: transform 0.3s var(--ease-premium);
}
#whatsapp-float:hover { transform: scale(1.07); }
#whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-tooltip {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--aeron-charcoal);
  color: var(--aeron-white);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }

/* =========================================================
   DRONE STAGES — hero + cinematic + capture (manifesto), the ONLY three
   places the 3D drone ever appears. Each stage hosts its OWN independent
   <canvas>, mounted directly inside it by droneStage.js (position: relative
   container, position: absolute canvas filling it via normal DOM flow) —
   not a single fixed canvas chased around the page. Always visible at
   every breakpoint; only the sizing below changes per breakpoint.
   ========================================================= */
.cinematic-drone-stage {
  position: relative;
  width: 100%;
  height: clamp(280px, 36svh, 380px);
  overflow: visible;
  margin-block: 28px;
}
.drone-stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE — TABLET
   ========================================================================== */
@media (max-width: 1023px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: block; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .about-inner { grid-template-columns: 1fr; gap: 36px; }
  .contact-inner { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (drone gets its own dedicated visual area, not a
   scaled-down desktop layout)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --nav-height: 64px; }

  .hero-inner {
    display: flex;
    flex-direction: column;
    padding-top: 28px;
    padding-bottom: 36px;
    gap: 0;
  }
  .hero-text { max-width: 100%; }
  .hero-title { font-size: clamp(40px, 11vw, 56px); }
  .hero-desc { max-width: 100%; }
  /* MOBILE ONLY — the hero drone stage becomes a full-hero overlay so the
     drone can actually fly from beside the title down to its resting
     spot, instead of being boxed into the small stage area below the
     text. Desktop's `.hero-drone-stage` sizing (in the >=768px block
     further down) is completely untouched.
     `#hero` supplies the positioned containing block (position: relative,
     set in the base "Hero" rules above). Horizontal inset matches
     `--pad-inline` — the same padding `.hero-inner` already uses — so the
     canvas's content width is identical to the old boxed stage's width,
     which keeps the mobile camera-fit math (see MOBILE_FIT / fitAndResize
     in droneStage.js) producing the same final on-screen drone size as
     before. Canvas stays transparent; pointer-events: none so CTA
     buttons, the hamburger, and WhatsApp button underneath keep working;
     z-index sits just above `.hero-text` (z-index: 5) so the drone can
     visually cross in front of the copy during the flight without ever
     intercepting clicks (nothing else on the page is affected — this
     stacking only matters relative to `.hero-text`, since `#hero` itself
     is still far below the fixed navbar/hamburger/WhatsApp button's much
     higher z-index values). */
  .hero-drone-stage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pad-inline);
    right: var(--pad-inline);
    width: auto;
    height: auto;
    margin: 0;
    z-index: 6;
    pointer-events: none;
  }
  .hero-trust { margin-top: 28px; }

  .manifesto-head, .manifesto-desc, .manifesto-emphasis { max-width: 100%; }
  /* MOBILE ONLY — extra clearance between the drone's mobile park
     position (just above the manifesto section) and this description
     text, so the two don't read as visually stuck together. Desktop's
     .manifesto-desc margin-top (26px, in the base rules above) and the
     desktop .manifesto-inner grid are completely untouched. */
  .manifesto-desc { margin-top: 56px; }
  .about-inner, .contact-inner { grid-template-columns: 1fr; }

  .services-grid { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 30px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }

  .contact-row .value { font-size: 17px; }

  #whatsapp-float {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
  }
  .whatsapp-tooltip { display: none; }

  .section { padding-block: 64px; }
}

/* ==========================================================================
   RESPONSIVE — DESKTOP (both drone stages get the larger, column-filling
   composition here; the mobile sizing above/near each .drone-stage rule
   stays the default until this breakpoint takes over)
   ========================================================================== */
@media (min-width: 768px) {
  .hero-drone-stage {
    height: clamp(420px, 46vw, 640px);
  }

  .cinematic-inner {
    padding-block: 0;
    display: grid;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    grid-template-areas: "stage text" "stage emphasis";
    align-items: center;
    column-gap: 48px;
  }
  .cinematic-text { grid-area: text; max-width: 520px; }
  .cinematic-drone-stage {
    grid-area: stage;
    height: clamp(420px, 42vw, 600px);
    margin-block: 0;
  }
  .cinematic-emphasis { grid-area: emphasis; max-width: 520px; }

  /* Manifesto ("Doğru görüntüyü yakalamak başka bir iş.") — capture stage
     takes the left column, full height; the eyebrow+title, description and
     emphasis line stack in the right column, same order/spacing as before,
     just moved out of the single centered column into their own side. */
  .manifesto-inner {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    grid-template-areas:
      "stage head"
      "stage desc"
      "stage emphasis";
    align-items: center;
    column-gap: 48px;
  }
  .manifesto-head { grid-area: head; max-width: 560px; }
  .capture-drone-stage {
    grid-area: stage;
    height: clamp(420px, 40vw, 600px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .manifesto-desc { grid-area: desc; max-width: 520px; }
  .manifesto-emphasis { grid-area: emphasis; max-width: 520px; }
}

/* ==========================================================================
   SSS / FAQ — "Merak Edilenler"
   Mobile-first: header stacked above a full-width list of thin-divider
   accordion rows. Desktop splits into a left header column / right
   question column (see the 768px query at the bottom of this block).
   ========================================================================== */
#faq { background: var(--aeron-bg); }

.faq-head { max-width: 620px; }
.faq-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  margin-top: 18px;
}
.faq-head p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 440px;
}

.faq-list {
  margin-top: clamp(40px, 6vw, 56px);
  border-top: 1px solid var(--aeron-silver);
}
.faq-item { border-bottom: 1px solid var(--aeron-silver); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.faq-question-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.4;
  color: var(--text-primary);
}

.faq-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-premium);
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--text-primary);
}
.faq-icon::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-icon::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

/* Smooth height via grid-template-rows 0fr -> 1fr — no JS height math,
   no layout jump, works cleanly at any content length / viewport. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-premium);
}
.faq-answer-inner { overflow: hidden; }
.faq-answer p {
  padding-bottom: 24px;
  padding-right: clamp(0px, 6vw, 60px);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 640px;
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .faq-icon, .faq-answer { transition: none; }
}

/* ---------- FAQ-sonu WhatsApp CTA (bu bölümün doğrudan devamı) ---------- */
.faq-cta-wrap {
  margin-top: clamp(56px, 7vw, 88px);
  background: rgba(37, 211, 102, 0.055);
  border-top: 1px solid rgba(37, 211, 102, 0.22);
}
.faq-cta {
  padding-block: clamp(44px, 6vw, 68px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.faq-cta-text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(27px, 3.2vw, 40px);
  line-height: 1.14;
  color: var(--text-primary);
}
.faq-cta-text p {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 440px;
}
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--whatsapp);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-premium), background 0.3s ease;
}
.btn-whatsapp:hover { transform: translateY(-2px); background: var(--whatsapp-dark); }
.btn-whatsapp svg { width: 19px; height: 19px; flex-shrink: 0; }

/* ---------- Desktop split: header column / questions column ---------- */
@media (min-width: 768px) {
  .faq-inner {
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 64%);
    column-gap: 56px;
    align-items: start;
  }
  .faq-head {
    position: sticky;
    top: calc(var(--nav-height) + 40px);
  }
  .faq-list { margin-top: 0; }
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 767px) {
  .faq-question { padding-block: 24px; }
  .faq-answer p { padding-right: 30px; }
  .faq-cta { flex-direction: column; align-items: flex-start; }
  .faq-cta-text p { max-width: 100%; }
  .btn-whatsapp { width: 100%; justify-content: center; }
}