/* Dijital Havacılık — 3B sinematik açılış sahnesi. Yalnız CSS (betik yok, dış kaynak yok; CSP değişmez).
   Holografik şehir haritası üzerinde süzülen dört pervaneli drone, yörüngede dönen kamera, kokpit göstergeleri (HUD).
   Birim: vmin (telefon / tablet / masaüstü aynı oranda). "Hareketi azalt" tercihinde sahne durur. */

.sahne { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 110vmin; perspective-origin: 64% 18%; }
.gok { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 38% at 64% 58%, rgba(255,120,60,.30), transparent 62%),
    radial-gradient(ellipse 50% 30% at 80% 20%, rgba(139,92,246,.18), transparent 60%),
    linear-gradient(180deg, #03060c 0%, #071223 40%, #0d2038 56%, #142842 64%, #050a14 100%); }
.gok::after { content: ""; position: absolute; inset: 0; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #cfe, transparent),
    radial-gradient(1px 1px at 58% 14%, #fff, transparent), radial-gradient(1px 1px at 76% 6%, #def, transparent),
    radial-gradient(1px 1px at 88% 22%, #fff, transparent), radial-gradient(1px 1px at 44% 26%, #bdf, transparent),
    radial-gradient(1px 1px at 6% 34%, #fff, transparent), radial-gradient(1px 1px at 94% 36%, #fff, transparent); }

/* kamera: yere 64° eğik bakar, z ekseninde yavaşça döner (yörünge) */
.kamera { position: absolute; left: 64%; top: 62%; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(64deg) rotateZ(-20deg); }
.kamera > * { position: absolute; transform-style: preserve-3d; }

.zemin { width: 240vmin; height: 240vmin; left: -120vmin; top: -120vmin;
  background:
    radial-gradient(circle at 50% 50%, rgba(95,212,255,.16), transparent 42%),
    repeating-linear-gradient(0deg, rgba(95,212,255,.13) 0 1px, transparent 1px 4vmin),
    repeating-linear-gradient(90deg, rgba(95,212,255,.13) 0 1px, transparent 1px 4vmin),
    #06101d;
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 58%); mask-image: radial-gradient(circle, #000 18%, transparent 58%); }
.izgara { width: 240vmin; height: 240vmin; left: -120vmin; top: -120vmin; transform: translateZ(.05vmin);
  background:
    repeating-linear-gradient(0deg, rgba(95,212,255,.35) 0 2px, transparent 2px 24vmin),
    repeating-linear-gradient(90deg, rgba(95,212,255,.35) 0 2px, transparent 2px 24vmin);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 50%); mask-image: radial-gradient(circle, #000 12%, transparent 50%); }
.rota { width: 52vmin; height: 52vmin; left: -26vmin; top: -26vmin; border-radius: 50%; transform: translateZ(.1vmin);
  border: 1.5px dashed rgba(255,138,92,.75); box-shadow: 0 0 2vmin rgba(255,90,31,.25), inset 0 0 2vmin rgba(255,90,31,.15); }
.rota i { position: absolute; left: 50%; top: -1.2vmin; width: 2.4vmin; height: 2.4vmin; margin-left: -1.2vmin; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, var(--vurgu) 22% 40%, transparent 62%); box-shadow: 0 0 3vmin var(--vurgu); }

/* holografik binalar: 4 yan yüz + çatı */
.sehir { left: 0; top: 0; width: 0; height: 0; }
.bina { position: absolute; transform-style: preserve-3d; left: var(--x); top: var(--y); width: var(--g); height: var(--d); }
.bina i { position: absolute; display: block; backface-visibility: visible;
  background: linear-gradient(0deg, rgba(95,212,255,.20), rgba(95,212,255,.04)),
              repeating-linear-gradient(0deg, transparent 0 1.1vmin, rgba(160,230,255,.22) 1.1vmin calc(1.1vmin + 1px));
  border: 1px solid rgba(120,220,255,.55); box-shadow: inset 0 0 1.4vmin rgba(95,212,255,.18); }
.bina .y1, .bina .y2 { left: 0; width: 100%; height: var(--h); transform-origin: 0 0; transform: rotateX(90deg); }
.bina .y1 { top: 0; }
.bina .y2 { top: 100%; }
.bina .y3, .bina .y4 { top: 0; height: 100%; width: var(--h); transform-origin: 0 0; transform: rotateY(-90deg); }
.bina .y3 { left: 0; }
.bina .y4 { left: 100%; }
.bina .cati { inset: 0; transform: translateZ(var(--h)); background: rgba(120,220,255,.16); border-color: rgba(170,235,255,.85);
  box-shadow: 0 0 2vmin rgba(95,212,255,.35), inset 0 0 1vmin rgba(95,212,255,.3); }
/* İstanbul: binalar Boğaz'ın iki yakasında (su ortadan, 60° doğrultuda geçer); eski şehir alçak, birkaç yüksek kule */
.b1  { --x: 24vmin;  --y: -30vmin; --g: 7vmin; --d: 6vmin; --h: 10vmin; }
.b2  { --x: 30vmin;  --y: -10vmin; --g: 6vmin; --d: 7vmin; --h: 26vmin; }
.b3  { --x: 36vmin;  --y: 12vmin;  --g: 7vmin; --d: 7vmin; --h: 8vmin; }
.b4  { --x: 12vmin;  --y: -28vmin; --g: 6vmin; --d: 5vmin; --h: 7vmin; }
.b5  { --x: 22vmin;  --y: 4vmin;   --g: 6vmin; --d: 6vmin; --h: 6vmin; }
.b6  { --x: 6vmin;   --y: -40vmin; --g: 6vmin; --d: 6vmin; --h: 9vmin; }
.b7  { --x: 42vmin;  --y: -26vmin; --g: 6vmin; --d: 8vmin; --h: 22vmin; }
.b8  { --x: -46vmin; --y: -14vmin; --g: 8vmin; --d: 7vmin; --h: 9vmin; }
.b9  { --x: -22vmin; --y: 12vmin;  --g: 7vmin; --d: 6vmin; --h: 6vmin; }
.b10 { --x: -40vmin; --y: 2vmin;   --g: 6vmin; --d: 8vmin; --h: 12vmin; }
.b11 { --x: -12vmin; --y: 26vmin;  --g: 6vmin; --d: 6vmin; --h: 7vmin; }
.b12 { --x: -30vmin; --y: 26vmin;  --g: 8vmin; --d: 6vmin; --h: 8vmin; }
.b13 { --x: -44vmin; --y: -38vmin; --g: 8vmin; --d: 8vmin; --h: 7vmin; }
.b14 { --x: -4vmin;  --y: 38vmin;  --g: 6vmin; --d: 6vmin; --h: 6vmin; }

/* drone: yerden 26 vmin yukarıda süzülür */
.golge { left: -7vmin; top: -7vmin; width: 14vmin; height: 14vmin; border-radius: 50%; transform: translateZ(.2vmin);
  background: radial-gradient(circle, rgba(0,0,0,.65), rgba(0,0,0,.25) 45%, transparent 70%); }
.drone { left: 0; top: 0; width: 0; height: 0; transform: translateZ(26vmin) scale3d(1.35, 1.35, 1.35); }
.ucak { position: absolute; transform-style: preserve-3d; }
.ucak > * { position: absolute; }
.kol { width: 17vmin; height: 1.1vmin; left: -8.5vmin; top: -.55vmin; border-radius: .6vmin; transform: translateZ(.6vmin);
  background: linear-gradient(180deg, #4b5d73, #1b2633); box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.kol.k1 { transform: translateZ(.6vmin) rotateZ(45deg); }
.kol.k2 { transform: translateZ(.6vmin) rotateZ(-45deg); }
.motor { width: 2.4vmin; height: 2.4vmin; margin: -1.2vmin 0 0 -1.2vmin; border-radius: 50%; transform-style: preserve-3d;
  background: radial-gradient(circle at 35% 35%, #eef4fa, #6f8296 55%, #26323f); transform: translateZ(1vmin);
  box-shadow: 0 0 0 .25vmin #1b2633; }
.m1 { left: 6vmin;  top: 6vmin; }
.m2 { left: -6vmin; top: 6vmin; }
.m3 { left: -6vmin; top: -6vmin; }
.m4 { left: 6vmin;  top: -6vmin; }
.pervane { position: absolute; display: block; left: -3.6vmin; top: -3.6vmin; width: 9.6vmin; height: 9.6vmin; border-radius: 50%;
  transform: translateZ(.5vmin);
  background: conic-gradient(from 0deg, rgba(230,240,255,0) 0deg, rgba(230,240,255,.42) 18deg, rgba(230,240,255,0) 70deg,
              rgba(230,240,255,0) 180deg, rgba(230,240,255,.42) 198deg, rgba(230,240,255,0) 250deg);
  box-shadow: inset 0 0 0 1px rgba(230,240,255,.14); }
.govde { width: 6.4vmin; height: 10vmin; left: -3.2vmin; top: -5vmin; border-radius: 2.4vmin 2.4vmin 1.6vmin 1.6vmin;
  transform-style: preserve-3d; transform: translateZ(1.2vmin);
  background: linear-gradient(165deg, #f4f7fb 0%, #a7b6c6 45%, #4a5a6d 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.govde::before, .govde::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.govde::before { transform: translateZ(-.7vmin); background: #2a3644; }
.govde::after { transform: translateZ(-.35vmin); background: #3a4858; }
.govde .kapak { position: absolute; display: block; left: 18%; right: 18%; top: 22%; bottom: 30%; border-radius: 1.4vmin;
  transform: translateZ(.6vmin); background: linear-gradient(160deg, #1d2a3a, #0b121b); box-shadow: inset 0 0 .8vmin rgba(95,212,255,.5); }
.govde .isik { position: absolute; display: block; width: 1vmin; height: 1vmin; border-radius: 50%; left: 50%; margin-left: -.5vmin;
  transform: translateZ(.7vmin); }
.govde .isik.on { top: .5vmin; background: #6dff9a; box-shadow: 0 0 1.6vmin 0.4vmin rgba(109,255,154,.8); }
.govde .isik.arka { bottom: .5vmin; background: #ff4a3d; box-shadow: 0 0 1.6vmin 0.4vmin rgba(255,74,61,.85); }
.kamera-gozu { width: 2.6vmin; height: 2.6vmin; left: -1.3vmin; top: -6.6vmin; border-radius: 50%; transform: translateZ(.2vmin);
  background: radial-gradient(circle at 40% 40%, #7fdcff 0 12%, #0b1520 30%, #000 70%); box-shadow: 0 0 0 .3vmin #2a3644; }

/* kokpit göstergeleri */
.hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: rgba(170,232,255,.78);
  font: 600 11px/1 "Cascadia Mono", "SF Mono", Consolas, ui-monospace, monospace; letter-spacing: .14em; }
.kose { position: absolute; display: block; width: 26px; height: 26px; border: 0 solid rgba(170,232,255,.5); }
.sahne::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,9,18,.80) 0%, rgba(5,9,18,.45) 36%, rgba(5,9,18,0) 58%),
              linear-gradient(180deg, rgba(5,9,18,.55) 0%, rgba(5,9,18,0) 16%, rgba(5,9,18,0) 82%, rgba(5,9,18,.55) 100%); }
.hud { z-index: 2; }
.k-sol-ust { left: 22px; top: calc(var(--ust) + 14px); border-left-width: 1.5px; border-top-width: 1.5px; }
.k-sag-ust { right: 22px; top: calc(var(--ust) + 14px); border-right-width: 1.5px; border-top-width: 1.5px; }
.k-sol-alt { left: 22px; bottom: calc(var(--alt) + 14px); border-left-width: 1.5px; border-bottom-width: 1.5px; }
.k-sag-alt { right: 22px; bottom: calc(var(--alt) + 14px); border-right-width: 1.5px; border-bottom-width: 1.5px; }
.nisangah { position: absolute; display: block; left: 64%; top: 34%; width: 15vmin; height: 15vmin; margin: -7.5vmin 0 0 -7.5vmin;
  border: 1px solid rgba(170,232,255,.35); border-radius: 50%; }
.nisangah::before, .nisangah::after { content: ""; position: absolute; background: rgba(170,232,255,.55); }
.nisangah::before { left: -2vmin; right: -2vmin; top: 50%; height: 1px;
  -webkit-mask-image: linear-gradient(90deg, #000 18%, transparent 18% 82%, #000 82%); mask-image: linear-gradient(90deg, #000 18%, transparent 18% 82%, #000 82%); }
.nisangah::after { top: -2vmin; bottom: -2vmin; left: 50%; width: 1px;
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 18% 82%, #000 82%); mask-image: linear-gradient(180deg, #000 18%, transparent 18% 82%, #000 82%); }
.ufuk { position: absolute; display: block; left: 50%; right: 8%; top: 56%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170,232,255,.45) 20% 40%, transparent 40% 60%, rgba(170,232,255,.45) 60% 80%, transparent); }
.serit-alt, .serit-hiz { position: absolute; top: 24%; height: 38%; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.serit-alt { right: 34px; }
.serit-hiz { left: 50%; margin-left: -9vmin; }
.olcek { flex: 1; width: 100%; border: 1px solid rgba(170,232,255,.3); border-radius: 3px;
  background: repeating-linear-gradient(180deg, rgba(170,232,255,.55) 0 1px, transparent 1px 10px) 0 0 / 40% 100% no-repeat,
              repeating-linear-gradient(180deg, rgba(170,232,255,.75) 0 1px, transparent 1px 50px) 0 0 / 70% 100% no-repeat;
  background-position: right 0, right 0; }
.telemetri { position: absolute; left: 60px; right: 60px; bottom: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: flex-end; }
.telemetri span { white-space: nowrap; }
.kayit::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 8px #ff3b30; vertical-align: -1px; }



/* 3B kart eğilmesi (fareyle) */
@media (hover: hover) and (pointer: fine) {
  .kart { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s; transform-style: preserve-3d; }
  .kart:hover { transform: perspective(900px) rotateX(5deg) rotateY(-7deg) translateY(-6px);
    border-color: rgba(255,138,92,.45); box-shadow: 0 30px 60px -30px rgba(255,90,31,.45), 0 0 0 1px rgba(255,138,92,.15); }
  figure img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  figure:hover img { transform: perspective(1200px) rotateY(4deg) scale(1.015); }
}

@media (prefers-reduced-motion: no-preference) {
  .kamera { animation: yorunge 90s linear infinite; }
  .drone { animation: suzul 5.5s ease-in-out infinite; }
  .ucak { animation: sallan 9s ease-in-out infinite; }
  .golge { animation: golge 5.5s ease-in-out infinite; }
  .pervane { animation: don .11s linear infinite; }
  .m2 .pervane, .m4 .pervane { animation-direction: reverse; }
  .govde .isik { animation: yanip 1.6s steps(1) infinite; }
  .govde .isik.arka { animation-delay: .8s; }
  .rota i { animation: nokta 2.4s ease-in-out infinite; }
  .bina .cati { animation: parla 6s ease-in-out infinite; }
  .b2 .cati, .b5 .cati, .b9 .cati, .b13 .cati { animation-delay: -2s; }
  .b4 .cati, .b7 .cati, .b11 .cati { animation-delay: -4s; }
  .olcek { animation: olcek 3s linear infinite; }
  .serit-hiz .olcek { animation-duration: 1.6s; animation-direction: reverse; }
  .kayit::before { animation: yanip 1.2s steps(1) infinite; }
  .nisangah { animation: kilit 6s ease-in-out infinite; }
}
@keyframes yorunge { from { transform: rotateX(64deg) rotateZ(-20deg); } to { transform: rotateX(64deg) rotateZ(-380deg); } }
@keyframes suzul { 0%, 100% { transform: translateZ(26vmin) scale3d(1.35, 1.35, 1.35); } 50% { transform: translateZ(29vmin) scale3d(1.35, 1.35, 1.35); } }
@keyframes golge { 0%, 100% { transform: translateZ(.2vmin) scale(1); opacity: 1; } 50% { transform: translateZ(.2vmin) scale(1.12); opacity: .75; } }
@keyframes sallan { 0%, 100% { transform: rotateX(0) rotateY(0) rotateZ(0); } 25% { transform: rotateX(4deg) rotateY(-3deg) rotateZ(8deg); }
                    50% { transform: rotateX(-2deg) rotateY(3deg) rotateZ(16deg); } 75% { transform: rotateX(3deg) rotateY(2deg) rotateZ(6deg); } }
@keyframes don { from { transform: translateZ(.5vmin) rotate(0deg); } to { transform: translateZ(.5vmin) rotate(360deg); } }
@keyframes yanip { 0% { opacity: 1; } 50% { opacity: .15; } }
@keyframes nokta { 0%, 100% { box-shadow: 0 0 2vmin var(--vurgu); transform: scale(1); } 50% { box-shadow: 0 0 5vmin var(--vurgu); transform: scale(1.3); } }
@keyframes parla { 0%, 100% { background: rgba(120,220,255,.12); } 50% { background: rgba(120,220,255,.30); } }
@keyframes olcek { from { background-position: right 0, right 0; } to { background-position: right 10px, right 50px; } }
@keyframes kilit { 0%, 70%, 100% { transform: scale(1); border-color: rgba(170,232,255,.35); } 80% { transform: scale(.86); border-color: rgba(255,138,92,.8); } }

/* tablet */
@media (max-width: 820px) {
  .sahne { perspective-origin: 50% 10%; }
  .kamera { left: 50%; top: 46%; }
  .nisangah { left: 50%; top: 24%; }
  .serit-hiz { display: none; }
  .ufuk { left: 20%; right: 20%; top: 40%; }
}
/* telefon: daha az bina, gösterge sade */
@media (max-width: 620px) {
  .kamera { top: 36%; }
  .nisangah { top: 18%; width: 22vmin; height: 22vmin; margin: -11vmin 0 0 -11vmin; }
  .serit-alt, .ufuk { display: none; }
  .b9, .b10, .b11, .b12, .b13, .b14 { display: none; }
  .telemetri { left: 20px; right: 20px; bottom: 14px; justify-content: flex-start; font-size: 9.5px; gap: 6px 14px; }
  .telemetri span:last-child { display: none; }
}

/* ---------------------------------------------------------------- İstanbul: Boğaz, köprü, Galata, cami, vapur, tekir kediler */
.bogaz { left: -150vmin; top: -9vmin; width: 300vmin; height: 18vmin; transform: translateZ(.15vmin) rotateZ(60deg);
  background:
    radial-gradient(ellipse 18% 70% at 50% 50%, rgba(255,150,90,.28), transparent 70%),
    linear-gradient(180deg, rgba(40,120,190,.55), rgba(14,60,110,.65) 50%, rgba(40,120,190,.55));
  border-top: 1px solid rgba(160,230,255,.8); border-bottom: 1px solid rgba(160,230,255,.8);
  box-shadow: 0 0 3vmin rgba(95,212,255,.35), inset 0 0 2.5vmin rgba(95,212,255,.35);
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 38%, #000 62%, transparent 78%); mask-image: linear-gradient(90deg, transparent 22%, #000 38%, #000 62%, transparent 78%); }
.bogaz .dalga { position: absolute; inset: 0; display: block;
  background: repeating-linear-gradient(90deg, transparent 0 2.6vmin, rgba(170,235,255,.28) 2.6vmin 2.85vmin),
              repeating-linear-gradient(0deg, transparent 0 2.2vmin, rgba(170,235,255,.12) 2.2vmin 2.35vmin); }
.kopru { left: -17vmin; top: -29.4vmin; width: 0; height: 0; transform: rotateZ(150deg); }
.kopru i { position: absolute; display: block; }
.kopru .yol { left: -17vmin; top: -1.2vmin; width: 34vmin; height: 2.4vmin; transform: translateZ(2vmin);
  background: linear-gradient(90deg, rgba(255,176,143,.15), rgba(255,176,143,.45), rgba(255,176,143,.15)); border: 1px solid rgba(255,176,143,.7);
  box-shadow: 0 0 1.6vmin rgba(255,138,92,.45); }
.kopru .yan { left: -17vmin; width: 34vmin; height: 12vmin; transform-origin: 50% 100%; transform: rotateX(-90deg);
  background: url(/ortak/g/kopru.svg) center / 100% 100% no-repeat; }
.kopru .y-a { top: -13.2vmin; }
.kopru .y-b { top: -10.8vmin; }

/* her zaman kameraya bakan levhalar (kameranın yörüngesini ters yönde izler) */
.ilan { left: var(--x, 0); top: var(--y, 0); width: 0; height: 0; transform: rotateZ(20deg); }
.ilan i { position: absolute; display: block; width: var(--w); height: var(--h); left: calc(var(--w) / -2); top: calc(var(--h) * -1);
  transform-origin: 50% 100%; transform: rotateX(-90deg); background: var(--resim) center bottom / contain no-repeat; }
.galata { --x: 16vmin; --y: -14vmin; --w: 5vmin; --h: 19vmin; --resim: url(/ortak/g/galata.svg); }
.cami { --x: -24vmin; --y: -2vmin; --w: 26vmin; --h: 17vmin; --resim: url(/ortak/g/cami.svg); }
.vapur { --x: 0vmin; --y: 0vmin; --w: 9vmin; --h: 4.5vmin; --resim: url(/ortak/g/vapur.svg); }
.kedi { --w: 5.6vmin; --h: 5.6vmin; --resim: url(/ortak/g/tekir.svg); }
.kd1 { --x: 9vmin; --y: -8vmin; }
.kd2 { --x: -16vmin; --y: -4vmin; }
.kd2 i { transform: rotateX(-90deg) scaleX(-1); }
.kd3 { --x: -6vmin; --y: 16vmin; }
.kd-yuru { --x: -2.5vmin; --y: -26.3vmin; }
.vapur { translate: -35vmin -60.6vmin; }

@media (prefers-reduced-motion: no-preference) {
  .ilan { animation: ilan 90s linear infinite; }
  .vapur { animation: ilan 90s linear infinite, vapur 46s linear infinite; }
  .kd-yuru { animation: ilan 90s linear infinite, yuru 26s ease-in-out infinite; }
  .kd-yuru i { animation: yon 26s steps(1) infinite, adim .5s ease-in-out infinite; }
  .bogaz .dalga { animation: akinti 7s linear infinite; }
}
@keyframes ilan { from { transform: rotateZ(20deg); } to { transform: rotateZ(380deg); } }
@keyframes vapur { from { translate: -35vmin -60.6vmin; } to { translate: 35vmin 60.6vmin; } }
@keyframes yuru { 0%, 100% { translate: 0 0; } 50% { translate: 17vmin 29.5vmin; } }
@keyframes yon { 0% { transform: rotateX(-90deg) scaleX(1); } 50% { transform: rotateX(-90deg) scaleX(-1); } }
@keyframes adim { 0%, 100% { margin-top: 0; } 50% { margin-top: -.25vmin; } }
@keyframes akinti { from { background-position: 0 0, 0 0; } to { background-position: 5.7vmin 0, 0 0; } }

@media (max-width: 620px) {
  .cami { --w: 22vmin; --h: 14vmin; }
  .kd3 { display: none; }
}
/* tek ekran: telefonda paneller alttan açılır, sahne üst yarıda */
@media (max-width: 820px) {
  .kamera { left: 50%; top: 30%; }
  .nisangah { top: 16%; }
  .telemetri { display: none; }
  .sahne::after { background: linear-gradient(180deg, rgba(5,9,18,.55) 0%, rgba(5,9,18,0) 14%, rgba(5,9,18,0) 40%, rgba(5,9,18,.88) 74%); }
}

/* dar masaüstü / yatay tablet: panel sol yarıyı kaplar, sahne sağa kayar */
@media (min-width: 821px) and (max-width: 1100px) { .kamera { left: 74%; } .nisangah { left: 74%; } .serit-hiz { display: none; } }

/* akan sayfalar (formlar): sahne geride, yazı önde */
body.akan .sahne::after { background: linear-gradient(180deg, rgba(5,9,18,.72), rgba(5,9,18,.82)); }
body.akan .hud { opacity: .5; }

/* alt ortadaki © · Yasal satırıyla çakışmasın */
.telemetri { bottom: calc(var(--alt) + 44px); }
.k-sol-alt, .k-sag-alt { bottom: calc(var(--alt) + 14px); }
@media (orientation: landscape) and (max-height: 520px) { .telemetri, .serit-alt, .serit-hiz { display: none; } }