/* =====================================================================
   Vektörel sahneler: renk + hareket (includes/svg.php).

   🔴 TEMEL HÂL = SON HÂL: her öğe animasyonsuz da yerinde ve görünür; gizleme yalnız @keyframes'te.
   🔴 `prefers-reduced-motion: reduce` → bütün animasyon kapanır, çizim eksiksiz kalır.
   🔴 Ekran dışındaki sahne durur: site.js `.anim`e `.oynat` ekler/çıkarır; `html.js` yoksa hep oynar.
   ===================================================================== */

html.js .anim:not(.oynat), html.js .anim:not(.oynat) * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- kahraman sahnesi */
.s-zemin { fill: #20160b; }
.s-izgara { fill: none; stroke: rgba(224,165,38,.10); stroke-width: 1; }
.s-cerceve { fill: none; stroke: rgba(224,165,38,.45); stroke-width: 1.5; }
.s-centik path { stroke: rgba(224,165,38,.55); stroke-width: 1.5; }
.s-kose { fill: rgba(232,220,198,.7); font: 15px Consolas, monospace; }
.s-kontur path { fill: none; stroke: #c99a54; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.s-kontur .k5 { stroke: #e0a526; stroke-width: 2; }
.s-kot { fill: #f3e2bd; font: 700 15px Consolas, monospace; }
.s-kot-k { fill: #c99a54; font: 15px Consolas, monospace; }
.s-parsel path { fill: none; stroke: #8f7650; stroke-width: 1.6; }
.s-no { fill: #e8dcc6; font: 700 16px Cambria, Georgia, serif; }
.s-ada { fill: #e0a526; font: 700 15px Consolas, monospace; letter-spacing: .08em; }
.s-secili { fill: rgba(179,50,42,.16); stroke: #e0574b; stroke-width: 2.5; stroke-dasharray: 9 6; }
.s-ifraz { fill: none; stroke: #f3e2bd; stroke-width: 2.2; stroke-dasharray: 1; }
.s-yol { fill: none; stroke: #6d5a3d; stroke-width: 18; stroke-linecap: round; opacity: .55; }
.s-yol-ad { fill: #bba98a; font: italic 15px Cambria, Georgia, serif; }
.s-alet path { stroke: #e0a526; stroke-width: 2.5; fill: none; }
.s-alet rect { fill: #e0a526; }
.s-alet circle { fill: #20160b; }
.s-isin { stroke: #ff6a5c; stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.s-hedef { fill: #ff6a5c; }
.s-hedef-halka { fill: none; stroke: #ff6a5c; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.s-uydu rect { fill: #e8dcc6; }
.s-uydu path { stroke: #7fb7cc; stroke-width: 4; }
.s-sinyal { stroke: #7fb7cc; stroke-width: 1.6; stroke-dasharray: 3 7; fill: none; opacity: .8; }
.s-gnss ellipse { fill: #e8dcc6; }
.s-gnss path { stroke: #e8dcc6; stroke-width: 3; }
.s-kutu rect { fill: rgba(16,10,4,.82); stroke: rgba(224,165,38,.6); }
.s-kutu-b { fill: #e0a526; font: 700 15px Consolas, monospace; letter-spacing: .06em; }
.s-mono { fill: #f3e2bd; font: 16px Consolas, monospace; }
.s-kuzey path { fill: #e8dcc6; }
.s-kuzey text, .s-olcek text { fill: #e8dcc6; font: 700 15px Consolas, monospace; }
.s-olcek path { stroke: #e8dcc6; stroke-width: 2; fill: none; }

@media (prefers-reduced-motion: no-preference) {
  .s-kontur path { animation: kontur-ciz 9s ease-in-out infinite; }
  .s-kontur .k2 { animation-delay: .5s; } .s-kontur .k3 { animation-delay: 1s; }
  .s-kontur .k4 { animation-delay: 1.5s; } .s-kontur .k5 { animation-delay: 2s; }
  .s-secili { animation: yuru 1.6s linear infinite; }
  .s-ifraz { animation: ifraz-ciz 8s ease-in-out infinite; }
  .s-no-a, .s-no-b { animation: ifraz-no 8s ease-in-out infinite; }
  .s-isin { animation: isin 1.2s linear infinite; }
  .s-hedef-halka { animation: halka 2s ease-out infinite; }
  .s-sinyal { animation: sinyal 2.4s linear infinite; }
  .s-sinyal.g2 { animation-delay: -.8s; } .s-sinyal.g3 { animation-delay: -1.6s; }
  .s-uydu.u1 { animation: uydu-1 14s ease-in-out infinite; }
  .s-uydu.u2 { animation: uydu-2 17s ease-in-out infinite; }
  .s-uydu.u3 { animation: uydu-3 15s ease-in-out infinite; }
}
@keyframes kontur-ciz { 0% { stroke-dashoffset: 1; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes yuru { to { stroke-dashoffset: -30; } }
@keyframes ifraz-ciz { 0%, 15% { stroke-dashoffset: 1; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes ifraz-no { 0%, 30% { opacity: 0; } 40%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes isin { to { stroke-dashoffset: -24; } }
@keyframes halka { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
@keyframes sinyal { to { stroke-dashoffset: -40; } }
@keyframes uydu-1 { 50% { transform: translate(490px, 62px); } }
@keyframes uydu-2 { 50% { transform: translate(546px, 76px); } }
@keyframes uydu-3 { 50% { transform: translate(398px, 52px); } }
/* uydu transform başlangıcı = svg'deki translate (temel hâl). */
.s-uydu.u1 { transform: translate(470px, 54px); } .s-uydu.u2 { transform: translate(560px, 84px); } .s-uydu.u3 { transform: translate(380px, 44px); }

/* kahraman — renk katmanı (2026-10-27 "renklendir, canlandır") */
.s-kontur .k1 { stroke: #8fae6a; } .s-kontur .k2 { stroke: #b9b45c; } .s-kontur .k3 { stroke: #d9a24a; } .s-kontur .k4 { stroke: #e57f3c; }
.s-kontur .k5 { stroke: #ff6a5c; }
.s-dere { fill: none; stroke: url(#sh-dere); stroke-width: 14; stroke-linecap: round; opacity: .85; }
.s-dere-akis { fill: none; stroke: #bff0ff; stroke-width: 2.5; stroke-dasharray: 10 22; stroke-linecap: round; opacity: .9; }
.s-orman path { fill: #2f7d4a; opacity: .75; stroke: #6fc28a; stroke-width: 1; transform-box: fill-box; transform-origin: center bottom; }
.s-tem { stroke: none; }
.s-tem.t1 { fill: rgba(63,180,216,.20); } .s-tem.t2 { fill: rgba(111,194,138,.22); } .s-tem.t3 { fill: rgba(240,190,70,.22); }
.s-nokta circle { fill: #4fd1c5; }
.s-yol-serit { fill: none; stroke: #f0c35a; stroke-width: 2; stroke-dasharray: 14 12; opacity: .8; }
.s-tara { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .s-dere-akis { animation: dere-ak 3s linear infinite; }
  .s-orman path { animation: orman-salin 5s ease-in-out infinite; }
  .s-orman .o2 { animation-delay: -1.6s; } .s-orman .o3 { animation-delay: -3.2s; }
  .s-tem { animation: tem-parla 6s ease-in-out infinite; }
  .s-tem.t2 { animation-delay: -2s; } .s-tem.t3 { animation-delay: -4s; }
  .s-nokta circle { animation: nokta-yan 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .s-nokta .n2 { animation-delay: .4s; } .s-nokta .n3 { animation-delay: .8s; } .s-nokta .n4 { animation-delay: 1.2s; }
  .s-nokta .n5 { animation-delay: 1.6s; } .s-nokta .n6 { animation-delay: 2s; } .s-nokta .n7 { animation-delay: 2.4s; } .s-nokta .n8 { animation-delay: 2.8s; }
  .s-yol-serit { animation: dere-ak 4s linear infinite; }
  .s-tara { animation: tara 7s ease-in-out infinite; }
}
@keyframes dere-ak { to { stroke-dashoffset: -64; } }
@keyframes orman-salin { 50% { transform: scale(1.06) rotate(-2deg); } }
@keyframes tem-parla { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes nokta-yan { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.5); } }
@keyframes tara { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 70% { opacity: 1; transform: translateX(760px); } 71%, 100% { opacity: 0; transform: translateX(760px); } }

/* kahraman zemini (tam genişlik) */
.z-ag path { fill: none; stroke: rgba(224,165,38,.10); stroke-width: 1; }
.z-et { fill: rgba(224,165,38,.55); font: 15px Consolas, monospace; letter-spacing: .1em; }
.z-egri path { fill: none; stroke-width: 2.2; stroke-dasharray: 26 12; opacity: .6; }
.z-egri.sol .e1 { stroke: #2bb3a3; } .z-egri.sol .e2 { stroke: #6fc28a; } .z-egri.sol .e3 { stroke: #e0a526; } .z-egri.sol .e4 { stroke: #ff6a5c; }
.z-egri.sag .e1 { stroke: #3fb4d8; } .z-egri.sag .e2 { stroke: #e0a526; } .z-egri.sag .e3 { stroke: #ff6a5c; }
.z-poligon { fill: none; stroke: #4fd1c5; stroke-width: 2; stroke-dasharray: 1; opacity: .7; }
.z-nokta circle { fill: #ff8a5c; transform-box: fill-box; transform-origin: center; }
.z-pusula { stroke: rgba(224,165,38,.5); stroke-width: 1.5; fill: none; }
.z-pusula .pc.ince { stroke-dasharray: 3 6; }
.z-pusula .pk { fill: #ff6a5c; stroke: none; }
.z-pusula .pg { fill: rgba(224,165,38,.45); stroke: none; }
.z-pusula text { fill: #ffcf6a; stroke: none; font: 700 20px Cambria, Georgia, serif; }
@media (prefers-reduced-motion: no-preference) {
  .z-egri path { animation: z-ak 14s linear infinite; }
  .z-egri .e2 { animation-duration: 18s; animation-direction: reverse; }
  .z-egri .e3 { animation-duration: 11s; } .z-egri .e4 { animation-duration: 9s; animation-direction: reverse; }
  .z-egri.sol, .z-egri.sag { animation: z-nefes 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .z-egri.sag { animation-delay: -4s; }
  .z-poligon { animation: z-poligon 10s ease-in-out infinite; }
  .z-nokta circle { animation: z-nokta 10s ease-in-out infinite; }
  .z-nokta .p2 { animation-delay: .9s; } .z-nokta .p3 { animation-delay: 1.8s; } .z-nokta .p4 { animation-delay: 2.7s; } .z-nokta .p5 { animation-delay: 3.6s; }
  .z-pusula { animation: z-don 90s linear infinite; }
}
/* dar ekranda zemin metnin tam arkasına düşer: güzergâh noktaları paragrafın üstünde benek gibi durur → gizli */
@media (max-width: 900px) { .z-poligon, .z-nokta { display: none; } }
@keyframes z-ak { to { stroke-dashoffset: -380; } }
@keyframes z-nefes { 50% { transform: scale(1.04); } }
@keyframes z-poligon { 0%, 5% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes z-nokta { 0%, 100% { opacity: .5; transform: scale(1); } 6% { opacity: 1; transform: scale(2.2); } 14% { opacity: 1; transform: scale(1.2); } }
@keyframes z-don { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- hizmet ikonları */
@media (prefers-reduced-motion: no-preference) {
  .ikon .ciz { stroke-dasharray: 1; animation: ikon-ciz 4.5s ease-in-out infinite; }
  .ikon .c2 { animation-delay: .5s; } .ikon .c3 { animation-delay: 1s; }
  .ikon .gec { animation: ikon-gec 4.5s ease-in-out infinite; }
  .ikon .sil { animation: ikon-sil 4.5s ease-in-out infinite; }
  .ikon .kz { animation: ikon-kazik 6s ease-out infinite; }
  .ikon .k2 { animation-delay: .6s; } .ikon .k3 { animation-delay: 1.2s; } .ikon .k4 { animation-delay: 1.8s; }
  .ikon .zipla { animation: ikon-zipla 2.4s ease-in-out infinite; }
  .ikon .nabiz { animation: ikon-nabiz 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .ikon .kay-y { animation: ikon-kay-y 4s ease-in-out infinite; }
  .ikon .kay-x { animation: ikon-kay-x 5s ease-in-out infinite; }
  .ikon .kay-x2 { animation: ikon-kay-x2 5s ease-in-out infinite; }
  .ikon .akis { animation: ikon-akis 1.2s linear infinite; }
  .ikon .y1, .ikon .y2, .ikon .y3, .ikon .y4 { animation: ikon-yan 4s ease-in-out infinite; }
  .ikon .y2 { animation-delay: 1s; } .ikon .y3 { animation-delay: 2s; } .ikon .y4 { animation-delay: 3s; }
  .ikon .t1, .ikon .t2, .ikon .t3 { animation: ikon-yan 4.5s ease-in-out infinite; }
  .ikon .t2 { animation-delay: 1.5s; } .ikon .t3 { animation-delay: 3s; }
  .ikon .nok circle { animation: ikon-yan 3s ease-in-out infinite; }
  .ikon .nok circle:nth-child(2n) { animation-delay: .7s; } .ikon .nok circle:nth-child(3n) { animation-delay: 1.4s; }
  .ikon .ibre { animation: ikon-ibre 3.5s ease-in-out infinite; transform-origin: 74px 74px; }
  .ikon .dondur { animation: ikon-ibre 3.5s ease-in-out infinite; transform-origin: 48px 58px; }
  .ikon .duman { animation: ikon-duman 3s ease-in-out infinite; }
  .ikon .yan, .ikon .yag { animation: ikon-yan 2.4s ease-in-out infinite; }
}
@keyframes ikon-ciz { 0% { stroke-dashoffset: 1; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes ikon-gec { 0%, 25% { opacity: 0; } 40%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ikon-sil { 0%, 25% { opacity: 1; } 40%, 85% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ikon-kazik { 0% { opacity: 0; transform: translateY(-8px); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ikon-zipla { 50% { transform: translateY(-6px); } }
@keyframes ikon-nabiz { 50% { transform: scale(1.08); opacity: .65; } }
@keyframes ikon-kay-y { 0%, 20% { transform: none; } 50%, 75% { transform: translateY(8px); } 100% { transform: none; } }
@keyframes ikon-kay-x { 0%, 100% { transform: translateY(-14px); } 50% { transform: translateY(14px); } }
@keyframes ikon-kay-x2 { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(14px); } }
@keyframes ikon-akis { to { stroke-dashoffset: -20; } }
@keyframes ikon-yan { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ikon-ibre { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(40deg); } }
@keyframes ikon-duman { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

/* ---------------------------------------------------------------- rehber çizimleri */
.c-zemin { fill: #fffaf0; }
.c-kagit { fill: #f6efe0; stroke: #d8ccb5; }
.c-et { fill: #b3322a; font: 700 15px Consolas, monospace; letter-spacing: .06em; }
.c-bas { fill: #3c2400; font: 700 18px Cambria, Georgia, serif; }
.c-yazi { fill: #4f4436; font: 15px system-ui, "Segoe UI", sans-serif; }
.c-k { fill: #3c2400; font: 700 15px Consolas, monospace; }
.c-pno { fill: #3c2400; font: 700 20px Cambria, Georgia, serif; }
.c-parsel-k { fill: rgba(60,36,0,.04); stroke: #5a3a12; stroke-width: 2; }
.c-no-k circle { fill: #b3322a; }
.c-ok { fill: none; stroke: #5a3a12; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.c-arazi { fill: #e7dcbf; stroke: #c9b78f; }
.c-parsel-z { fill: rgba(179,50,42,.08); stroke: #b3322a; stroke-width: 2; stroke-dasharray: 7 5; }
.c-alet path { stroke: #3c2400; stroke-width: 2.5; fill: none; }
.c-alet rect { fill: #e0a526; stroke: #3c2400; stroke-width: 1.5; }
.c-isin { stroke: #b3322a; stroke-width: 1.6; stroke-dasharray: 5 5; fill: none; }
.c-kazik path { stroke: #3c2400; stroke-width: 3; }
.c-kazik .c-bayrak { fill: #b3322a; stroke: none; }
.c-ayrac { stroke: #d8ccb5; stroke-width: 2; stroke-dasharray: 4 6; }
.c-bol { stroke: #b3322a; stroke-width: 3; fill: none; stroke-dasharray: 1; }
.c-sil { stroke: #5a3a12; stroke-width: 2; stroke-dasharray: 6 5; }
.c-yorunge { fill: none; stroke: #c9d9df; stroke-width: 1.5; stroke-dasharray: 4 6; }
.c-uydu rect { fill: #2c7a99; } .c-uydu path { stroke: #2c7a99; stroke-width: 4; }
.c-uydu.u1 { transform: translate(150px, 66px); } .c-uydu.u2 { transform: translate(280px, 46px); } .c-uydu.u3 { transform: translate(410px, 66px); }
.c-sinyal { stroke: #2c7a99; stroke-width: 1.5; stroke-dasharray: 3 6; fill: none; }
.c-bina { fill: #ece2cf; stroke: #5a3a12; stroke-width: 2; }
.c-anten { fill: #f6efe0; stroke: #3c2400; stroke-width: 2.5; }
.c-jalon { stroke: #3c2400; stroke-width: 3; }
.c-dalga { fill: none; stroke: #e0a526; stroke-width: 2.5; stroke-linecap: round; }
.c-duzeltme { fill: none; stroke: #e0a526; stroke-width: 2; stroke-dasharray: 8 6; }
.c-hedef { fill: #b3322a; }
.c-hedef-halka { fill: none; stroke: #b3322a; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.c-rozet { fill: #2c7a99; font: 700 15px Consolas, monospace; }
.c-tepe { fill: #e7dcbf; stroke: #5a3a12; stroke-width: 2; }
.c-dilim path { stroke: #b3322a; stroke-width: 1.8; fill: none; stroke-dasharray: 1; }
.c-kotlar text { fill: #5a3a12; font: 700 15px Consolas, monospace; }
.c-iz { stroke: #c9b78f; stroke-width: 1.2; stroke-dasharray: 2 4; fill: none; }
.c-egri path { fill: none; stroke: #5a3a12; stroke-width: 2; stroke-dasharray: 1; }
.c-egri .e4 { stroke: #b3322a; }
.c-cetvel path, .c-cetvel { stroke: #3c2400; stroke-width: 2; fill: none; }
.c-cetvel text { fill: #3c2400; stroke: none; font: 700 15px Consolas, monospace; }
.c-arazi-bar { stroke: #5a3a12; stroke-width: 8; stroke-linecap: round; }
.c-olcek-1, .c-olcek-2 { transform-box: fill-box; }
.c-pencere { fill: #fff; stroke: #c9b78f; stroke-width: 1.5; }
.c-pencere-ust { stroke: #d8ccb5; }
.c-nokta { fill: #d8ccb5; }
.c-adres { fill: #5e5244; font: 15px Consolas, monospace; }
.c-kutu { fill: #f6efe0; stroke: #c9b78f; }
.c-deger { fill: #22190f; font: 700 15px Consolas, monospace; }
.c-harita { fill: #eef0e6; stroke: #c9b78f; }
.c-vurgu { fill: rgba(179,50,42,.22); stroke: #b3322a; stroke-width: 3; }
.c-bilgi rect { fill: #fff; stroke: #b3322a; }
.c-bilgi text { fill: #22190f; font: 700 15px Consolas, monospace; }
.c-terk { fill: rgba(179,50,42,.2); stroke: #b3322a; stroke-width: 2; }
.c-imar { stroke: #b3322a; stroke-width: 2.5; }
.c-yol { stroke: #8f7650; stroke-width: 2; fill: none; }
.c-serit { stroke: #e0a526; stroke-width: 3; }

@media (prefers-reduced-motion: no-preference) {
  /* aplikasyon: köşeler sırayla — ışın, ardından kazık */
  .c-isin { animation: c-isin 8s linear infinite; }
  .c-isin.i2 { animation-delay: 1.6s; } .c-isin.i3 { animation-delay: 3.2s; } .c-isin.i4 { animation-delay: 4.8s; }
  .c-kazik { animation: c-kazik 8s ease-out infinite; }
  .c-kazik.z2 { animation-delay: 1.6s; } .c-kazik.z3 { animation-delay: 3.2s; } .c-kazik.z4 { animation-delay: 4.8s; }
  /* ifraz / tevhid */
  .c-bol { animation: ikon-ciz 7s ease-in-out infinite; }
  .eski1, .eski2 { animation: c-eski 7s ease-in-out infinite; }
  .yeni1, .yeni2 { animation: c-yeni 7s ease-in-out infinite; }
  .c-sil { animation: c-eski 7s ease-in-out infinite; }
  /* gnss */
  .c-uydu.u1 { animation: c-u1 16s ease-in-out infinite; } .c-uydu.u2 { animation: c-u2 19s ease-in-out infinite; } .c-uydu.u3 { animation: c-u3 17s ease-in-out infinite; }
  .c-sinyal { animation: sinyal 2s linear infinite; }
  .c-dalga { animation: c-dalga 2.4s ease-out infinite; } .c-dalga.d2 { animation-delay: .4s; } .c-dalga.d3 { animation-delay: .8s; }
  .c-duzeltme { animation: isin 1.4s linear infinite; }
  .c-hedef-halka { animation: halka 2s ease-out infinite; }
  /* topo */
  .c-dilim .dl { animation: ikon-ciz 9s ease-in-out infinite; }
  .c-dilim .l2 { animation-delay: .4s; } .c-dilim .l3 { animation-delay: .8s; } .c-dilim .l4 { animation-delay: 1.2s; }
  .c-egri .eg { animation: c-egri 9s ease-in-out infinite; }
  .c-egri .e2 { animation-delay: .4s; } .c-egri .e3 { animation-delay: .8s; } .c-egri .e4 { animation-delay: 1.2s; }
  /* ölçek: iki hâl sırayla */
  .c-olcek-1, .b1 { animation: c-hal1 8s ease-in-out infinite; }
  .c-olcek-2, .b2 { animation: c-hal2 8s ease-in-out infinite; }
  /* parsel sorgu: alanlar sırayla dolar, sonra parsel parlar */
  .c-deger { animation: c-yaz 10s steps(1) infinite; }
  .dg2 { animation-delay: .8s; } .dg3 { animation-delay: 1.6s; } .dg4 { animation-delay: 2.4s; } .dg5 { animation-delay: 3.2s; }
  .c-vurgu, .c-bilgi { animation: c-vurgu 10s ease-in-out infinite; }
  /* yola terk */
  .c-terk { animation: c-terk 6s ease-in-out infinite; }
  .c-terk-ad { animation: c-yeni 6s ease-in-out infinite; }
}
@keyframes c-isin { 0% { opacity: 0; } 2%, 18% { opacity: 1; stroke-dashoffset: 0; } 20%, 100% { opacity: 0; stroke-dashoffset: -40; } }
/* 🔴 transform YAZILMAZ: kazık grubunun yeri svg `transform` özniteliğinde, CSS transform onu ezer. */
@keyframes c-kazik { 0%, 12% { opacity: 0; } 16%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes c-eski { 0%, 30% { opacity: 1; } 42%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes c-yeni { 0%, 34% { opacity: 0; } 46%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes c-u1 { 50% { transform: translate(176px, 58px); } }
@keyframes c-u2 { 50% { transform: translate(300px, 44px); } }
@keyframes c-u3 { 50% { transform: translate(388px, 60px); } }
@keyframes c-dalga { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes c-egri { 0%, 18% { stroke-dashoffset: 1; } 45%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes c-hal1 { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes c-hal2 { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes c-yaz { 0% { opacity: 0; } 8%, 100% { opacity: 1; } }
@keyframes c-vurgu { 0%, 40% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes c-terk { 0%, 25% { transform: none; } 50%, 80% { transform: translateY(46px); } 100% { transform: none; } }

/* 🔴 DAR EKRAN — SVG yazısı viewBox ile küçülür (ölçüldü: 320 px'te 6,3 px). Sahne kenardan kenara açılır,
   ikincil etiketler (köşe koordinatı, kot değeri, yol adı, ölçek/kuzey yazısı) gizlenir, kalan yazı büyür.
   Hedef: 320 px'te en küçük yazı ≥ 8 px. */
@media (max-width: 480px) {
  .sahne-svg text { font-size: 19px; }
  .sahne-svg .s-mono { font-size: 18px; }
  .s-kose, .s-kot-k, .s-yol-ad, .s-olcek text, .s-kuzey text { display: none; }
  .cizim text { font-size: 19px; }
  .cizim .c-bas, .cizim .c-pno { font-size: 21px; }
}

/* hareket azaltmada ölçek çizimi iki hâli üst üste basmasın: yalnız 1/1000 */
@media (prefers-reduced-motion: reduce) {
  .c-olcek-2, .b2 { display: none; }
  .eski1, .eski2, .c-sil { display: none; }   /* ifraz/tevhid: SONUÇ hâli gösterilir */
}