/* Açılış: particles.js ağı. Fare hareketi içerik katmanından dekoratif canvas'a iletilir. */
:root {
  --hero-ground: #f9fbfe;
  --header-edge: #dfe5ef;
}

.site-header {
  border-bottom: 1px solid var(--header-edge);
}

.hero-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-ground);
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero-atmosphere canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-shell .hero {
  position: relative;
  z-index: 1;
}

.hero-shell .hero-copy,
.hero-shell .hero-showcase {
  position: relative;
}

.hero-shell .hero-drone {
  animation: none;
}

.hero-shell .specimen-world {
  background: var(--ink);
}

.hero-shell .specimen-world > img {
  opacity: 1;
  object-position: center 42%;
}

.hero-shell .specimen-world::after {
  background: linear-gradient(0deg, rgba(10,24,44,.84), transparent 52%);
}

/* Kent verisi arka planı; hover durumunda gerçek SHARE kamera videosu gösterilir. */
.hero-shell .specimen-oblique .oblique-city {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .7;
  object-position: 63% center;
  transition: opacity .35s ease, transform .8s var(--ease);
}

.specimen-oblique .specimen-copy {
  z-index: 3;
  right: 44px;
}

.oblique-action {
  position: absolute;
  z-index: 3;
  right: 17px;
  bottom: 20px;
  display: flex;
  transition: transform .4s var(--ease);
}

.hero-shell .specimen-oblique:is(:hover, :focus-within) .oblique-city {
  opacity: .85;
  transform: scale(1.04);
}

.specimen-oblique:is(:hover, :focus-within) .oblique-action {
  transform: translate(2px,-2px);
}

@media (max-width:699px) {
  .hero-showcase .specimen-oblique .specimen-copy { left: 12px; bottom: 12px; right: 32px; }
  .hero-showcase .specimen-oblique .specimen-copy > span { font-size: 12px; }
  .hero-showcase .specimen-oblique .specimen-copy > strong { font-size: 13px; }
  .oblique-action { right: 10px; bottom: 14px; }
  .oblique-action .icon { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion:reduce) {
  .oblique-action { transition: none; }
  .hero-shell .specimen-oblique:is(:hover, :focus-within) .oblique-city,
  .specimen-oblique:is(:hover, :focus-within) .oblique-action { transform: none; }
  .hero-shell .specimen-oblique .oblique-city { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere canvas { animation: none; }
}

/* Gerçek DJI videosu hover veya açık oynatma eyleminde yüklenir. */
.drone-product-link { position:absolute; inset:0; display:block; z-index:3; }
.drone-hover-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease; pointer-events:none; z-index:1; }
.drone-video-scrim { position:absolute; inset:0; opacity:0; background:linear-gradient(180deg,rgba(8,20,38,.62),transparent 48%,rgba(8,20,38,.24)); transition:opacity .35s ease; pointer-events:none; z-index:2; }
.hero-shell .hero-product-image { animation:none; transform:none; transition:opacity .3s ease; }
.specimen-video.is-video-playing .drone-hover-video,.specimen-video.is-video-playing .drone-video-scrim { opacity:1; }
.specimen-video.is-video-playing .hero-product-image { opacity:0; }
.specimen-video.is-video-playing .specimen-copy { color:var(--white); }
.drone-video-toggle { position:absolute; left:24px; bottom:20px; z-index:4; display:none; align-items:center; gap:9px; min-height:44px; padding:10px 13px; background:var(--white); color:var(--ink); font-size:12px; font-weight:600; transition:background .2s ease; }
.has-video-support .drone-video-toggle { display:inline-flex; }
.drone-video-toggle:hover { background:var(--paper); }
.drone-video-toggle:active { transform:translateY(1px); }
.drone-video-toggle .icon { width:17px; height:17px; }
.drone-video-status { position:absolute; right:20px; top:20px; max-width:calc(100% - 40px); z-index:4; padding:7px 12px; background:var(--white); color:var(--ink); font-size:12px; }
.drone-video-status[hidden] { display:none; }
@media(max-width:699px) { .drone-video-toggle { left:16px; bottom:14px; padding:8px 10px; font-size:12px; } .drone-video-status { top:14px; right:14px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .drone-hover-video,.drone-video-scrim,.hero-shell .hero-product-image { transition:none; } }

.specimen-s100 { background:var(--paper); }
.hero-s100 { position:absolute; right:-8px; bottom:-18px; width:68%; height:108%; object-fit:contain; }
.specimen-s100 .drone-hover-video { object-position:right center; }
.specimen-s100 .specimen-copy { left:18px; top:16px; }
.specimen-s100 .specimen-copy>span { font-size:12px; }
.specimen-s100 .specimen-copy>strong { font-size:13px; }
.specimen-s100 .drone-video-toggle { left:14px; bottom:12px; padding:8px 10px; font-size:12px; gap:7px; }
.specimen-s100 .drone-video-status { top:auto; bottom:62px; left:14px; right:14px; font-size:12px; }
@media(max-width:959px) { .hero-s100 { right:-12px; width:72%; } .specimen-s100 .specimen-copy { left:14px; top:13px; } .specimen-s100 .specimen-copy>span { font-size:12px; } .specimen-s100 .specimen-copy>strong { font-size:12px; } }
@media(max-width:699px) { .hero-s100 { height:102%; bottom:-13px; right:-12px; } .specimen-s100 .specimen-copy { left:12px; top:12px; max-width:80%; } .hero-showcase .specimen-s100 .specimen-copy>span { font-size:12px; } .hero-showcase .specimen-s100 .specimen-copy>strong { font-size:12px; } .specimen-s100 .drone-video-toggle { left:10px; bottom:9px; padding:8px; font-size:12px; gap:5px; } .specimen-s100 .drone-video-toggle .icon { width:14px; height:14px; } }

/* Oblik kartında alt yazı alanı korunur; açık oynatma kontrolü sol üsttedir. */
.specimen-oblique .drone-hover-video { object-fit: contain; background: #050607; }
.hero-shell .specimen-oblique.is-video-playing .oblique-city { opacity: 0; }
.specimen-oblique .drone-video-toggle {
  top: 12px;
  bottom: auto;
  left: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
}
.specimen-oblique .drone-video-toggle > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.specimen-oblique .drone-video-status { top: 62px; left: 12px; right: 12px; max-width: none; }

/* Tipografi tabanı: eylem metinleri küçük ekranda da okunur kalır. */
.drone-video-toggle, .specimen-s100 .drone-video-toggle { font-size: 13px; }

@media (max-width:374px) {
  .specimen-s100 .drone-video-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .specimen-s100 .drone-video-toggle .icon { width: 17px; height: 17px; }
  .specimen-s100 .drone-video-toggle > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}