/* =================================================================
   ROBOT MODÜLÜ — Animasyonlu Login Sahnesi + LIN/PTP Simülasyon
   ================================================================= */

/* ===== LOGİN SAHNESI ========================================= */

#loginView {
  position: fixed !important;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #050810;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
#loginView .center { display:none }  /* eski wrapper gizle */
#loginView .stdline { display:none } /* eski standart satırı gizle */

/* ─── Sahne Katmanı ─────────────────────────────────────────── */
.login-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Grid arka plan */
.ls-grid {
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(245,179,1,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,179,1,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  animation: lsGridMove 28s linear infinite;
}
@keyframes lsGridMove {
  0%   { transform: translate(0,0) rotate(-7deg); }
  100% { transform: translate(52px,52px) rotate(-7deg); }
}

/* Tarama çizgisi */
.ls-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(245,179,1,.4) 25%,
    rgba(245,179,1,.9) 50%,
    rgba(245,179,1,.4) 75%,
    transparent);
  filter: blur(1px);
  box-shadow: 0 0 24px 6px rgba(245,179,1,.12), 0 0 60px 15px rgba(245,179,1,.05);
  animation: lsScanDown 5.5s linear infinite;
  will-change: top;
}
@keyframes lsScanDown {
  0%   { top: -4px; opacity: 0; }
  4%   { opacity: 1; }
  92%  { opacity: .7; }
  100% { top: calc(100% + 4px); opacity: 0; }
}

/* Robot kol SVG — sağ alt köşe */
.ls-robot {
  position: absolute;
  right: -4vw; bottom: -2vh;
  width: clamp(260px, 48vw, 580px);
  height: auto;
  opacity: .22;
  filter: drop-shadow(0 0 30px rgba(245,179,1,.1));
}
@media (max-width: 899px) {
  .ls-robot { opacity: .07; width: clamp(200px, 75vw, 380px); right: -8vw; }
}

/* Robot kol animasyonu — CSS transform ile */
.ls-arm1-g {
  transform-origin: 200px 390px;
  animation: lsArm1Move 9s ease-in-out infinite;
}
.ls-arm2-g {
  transform-origin: 188px 248px;
  animation: lsArm2Move 9s ease-in-out infinite;
}
.ls-arm3-g {
  transform-origin: 296px 158px;
  animation: lsArm3Move 9s ease-in-out infinite;
}

@keyframes lsArm1Move {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(22deg); }
  50%  { transform: rotate(-14deg); }
  75%  { transform: rotate(18deg); }
  100% { transform: rotate(0deg); }
}
@keyframes lsArm2Move {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-28deg); }
  50%  { transform: rotate(18deg); }
  75%  { transform: rotate(-24deg); }
  100% { transform: rotate(0deg); }
}
@keyframes lsArm3Move {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(10deg); }
  50%  { transform: rotate(-8deg); }
  75%  { transform: rotate(12deg); }
  100% { transform: rotate(0deg); }
}

/* Devre izi SVG — sol taraf */
.ls-circuit {
  position: absolute;
  left: -4vw; top: 8%;
  width: clamp(160px, 38vw, 420px);
  height: auto;
  opacity: .85;
}
@media (max-width: 899px) {
  .ls-circuit { opacity: .25; width: clamp(140px, 60vw, 280px); }
}

/* Devre sinyali animasyonu */
.ls-signal-1 { stroke-dasharray: 240; animation: lsSignal 3.2s linear infinite; }
.ls-signal-2 { stroke-dasharray: 200; animation: lsSignal 3.2s linear infinite 1.2s; }
.ls-signal-3 { stroke-dasharray: 180; animation: lsSignal 3.2s linear infinite 2.1s; }
@keyframes lsSignal {
  0%   { stroke-dashoffset: 240; opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: .8; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Yıldız parçacıkları */
.ls-spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #f5b301;
  box-shadow: 0 0 6px 2px rgba(245,179,1,.6);
  animation: lsSparkFloat linear infinite;
}
@keyframes lsSparkFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  8%   { opacity: 1; transform: translateY(-15px) scale(1); }
  88%  { opacity: .5; transform: translateY(-70vh) scale(.4); }
  100% { opacity: 0; transform: translateY(-85vh) scale(0); }
}

/* Vignette */
.ls-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    transparent 20%,
    rgba(5,8,16,.7) 65%,
    rgba(5,8,16,.97) 100%);
}

/* ─── Login İçeriği ─────────────────────────────────────────── */
.login-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  overflow-y: auto;
  max-height: 100vh;
  -webkit-overflow-scrolling: touch;
}

/* Marka alanı */
.login-brand { text-align: center; }

.login-logo-wrap {
  width: 80px; height: 80px;
  position: relative;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.login-logo-icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5b301, #ff7a18);
  display: grid; place-items: center;
  font-size: 32px;
  position: relative; z-index: 2;
  animation: lLogoPulse 3s ease-in-out infinite;
  box-shadow: 0 8px 40px rgba(245,179,1,.3);
}
@keyframes lLogoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,179,1,.5), 0 8px 40px rgba(245,179,1,.25); }
  50%       { box-shadow: 0 0 0 20px rgba(245,179,1,0), 0 8px 50px rgba(245,179,1,.45); }
}

.login-logo-ring {
  position: absolute; inset: -10px;
  border-radius: 30px;
  border: 1px solid rgba(245,179,1,.3);
  animation: lRingPulse 2.5s ease-in-out infinite;
}
.login-logo-ring2 {
  position: absolute; inset: -20px;
  border-radius: 40px;
  border: 1px solid rgba(245,179,1,.12);
  animation: lRingPulse 2.5s ease-in-out infinite .6s;
}
@keyframes lRingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.22); }
}

.login-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(22px, 5.5vw, 36px);
  font-weight: 700;
  letter-spacing: clamp(3px, 1.2vw, 7px);
  text-transform: uppercase;
  color: #e8edf2;
  margin-bottom: 5px;
  text-shadow: 0 0 40px rgba(245,179,1,.12);
}

.login-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #f5b301;
  text-transform: uppercase;
  opacity: .85;
}

.login-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}
.login-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 3px 9px;
  border: 1px solid rgba(245,179,1,.2);
  border-radius: 20px;
  color: rgba(245,179,1,.65);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.login-tag:nth-child(1) { animation: lTagGlow 5s ease-in-out infinite 0.0s; }
.login-tag:nth-child(2) { animation: lTagGlow 5s ease-in-out infinite 0.6s; }
.login-tag:nth-child(3) { animation: lTagGlow 5s ease-in-out infinite 1.2s; }
.login-tag:nth-child(4) { animation: lTagGlow 5s ease-in-out infinite 1.8s; }
.login-tag:nth-child(5) { animation: lTagGlow 5s ease-in-out infinite 2.4s; }
.login-tag:nth-child(6) { animation: lTagGlow 5s ease-in-out infinite 3.0s; }
@keyframes lTagGlow {
  0%, 70%, 100% { border-color: rgba(245,179,1,.2); color: rgba(245,179,1,.55); }
  35% { border-color: rgba(245,179,1,.75); color: rgba(245,179,1,1);
        box-shadow: 0 0 12px rgba(245,179,1,.2); }
}

/* Login kartı — glassmorphism */
.login-card-new {
  width: 100%;
  background: rgba(16, 21, 30, 0.9);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(245,179,1,.15);
  border-top: 2px solid #f5b301;
  border-radius: 18px;
  padding: 24px 20px;
  box-shadow:
    0 60px 120px -20px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.login-card-new::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,179,1,.6), transparent);
}
@media (min-width: 900px) {
  .login-card-new { padding: 34px 40px; }
}

.login-card-new h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #e8edf2;
}
@media (min-width: 900px) { .login-card-new h2 { font-size: 19px; } }

.login-card-new .sub {
  font-size: 12px;
  color: #8a96a3;
  line-height: 1.65;
  margin-bottom: 18px;
}

/* Standartlar satırı */
.login-stdline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(138,150,163,.28);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 4px;
}

/* ===== ROBOT SEKMESİ ========================================= */

.robot-layout { display: flex; flex-direction: column; }

.robot-tabs {
  display: flex;
  border-bottom: 1px solid #2a323d;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.robot-tab-btn {
  padding: 11px 18px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a96a3;
  cursor: pointer;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color .15s, border-color .15s;
}
.robot-tab-btn.active { color: #f5b301; border-bottom-color: #f5b301; }

.robot-tab-pane { display: none; padding: 20px 0; }
.robot-tab-pane.active { display: block; }

/* Teori kartları */
.robot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.robot-card {
  background: #161b22;
  border: 1px solid #2a323d;
  border-radius: 12px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.robot-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #f5b301;
}
.robot-card.info::before  { background: #3aa0ff; }
.robot-card.live::before  { background: #27d07a; }
.robot-card.warn::before  { background: #ff7a18; }

.robot-card h3 {
  font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 9px;
  color: #f5b301;
}
.robot-card.info h3 { color: #3aa0ff; }
.robot-card.live h3 { color: #27d07a; }
.robot-card.warn h3 { color: #ff7a18; }

.robot-card p { font-size: 12.5px; color: #8a96a3; line-height: 1.65; }

.robot-formula {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: #0a0d12;
  border: 1px solid #2a323d;
  border-radius: 6px;
  padding: 9px 13px;
  margin: 9px 0;
  color: #27d07a;
}

/* LIN vs PTP karşılaştırma */
.linptp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
@media (max-width: 699px) { .linptp-grid { grid-template-columns: 1fr; } }

.linptp-box {
  background: #161b22;
  border: 1px solid #2a323d;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.linptp-box.ptp { border-top: 2px solid #3aa0ff; }
.linptp-box.lin { border-top: 2px solid #27d07a; }

.linptp-box h4 {
  font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 3px;
}
.linptp-box.ptp h4 { color: #3aa0ff; }
.linptp-box.lin h4 { color: #27d07a; }

.linptp-path-svg {
  width: 100%; max-width: 200px;
  height: 130px;
  margin: 12px auto; display: block;
}

.linptp-list {
  list-style: none;
  text-align: left;
  font-size: 11.5px;
  color: #8a96a3;
  line-height: 2;
}
.linptp-list li::before { content: '▸ '; color: #f5b301; }

/* Simülasyon */
.robot-sim-layout {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 14px;
  min-height: 460px;
}
@media (max-width: 899px) {
  .robot-sim-layout { grid-template-columns: 1fr; }

  /* Canvas daha kısa — scroll olmadan kontroller görünür */
  #robotSimSvg { min-height: 300px; }

  /* Hedef seçince canvas içinde beliren floating buton */
  .robot-go-float {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) scale(.85);
    white-space: nowrap;
    background: #f5b301;
    color: #000;
    border: none;
    border-radius: 28px;
    padding: 13px 30px;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 24px rgba(245,179,1,.55), 0 0 0 4px rgba(245,179,1,.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s cubic-bezier(.34,1.3,.64,1);
  }
  .robot-go-float.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
  }
}
@media (min-width: 900px) {
  .robot-go-float { display: none !important; }
}

.robot-canvas-wrap {
  background: #161b22;
  border: 1px solid #2a323d;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
#robotSimSvg {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  cursor: crosshair;
}

.robot-sim-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.robot-ctrl-card {
  background: #161b22;
  border: 1px solid #2a323d;
  border-radius: 10px;
  padding: 14px;
}
.robot-ctrl-card h4 {
  font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a96a3; margin-bottom: 10px;
}

.robot-mode-btns {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 7px; margin-bottom: 8px;
}
.robot-mode-btn {
  padding: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  background: #1c232d;
  border: 1px solid #2a323d;
  border-radius: 8px;
  cursor: pointer; color: #8a96a3;
  transition: all .15s; touch-action: manipulation;
}
.robot-mode-btn.active.ptp {
  border-color: #3aa0ff; color: #3aa0ff;
  background: rgba(58,160,255,.08);
  box-shadow: 0 0 20px rgba(58,160,255,.12);
}
.robot-mode-btn.active.lin {
  border-color: #27d07a; color: #27d07a;
  background: rgba(39,208,122,.08);
  box-shadow: 0 0 20px rgba(39,208,122,.12);
}

.robot-coord-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #8a96a3; line-height: 2;
}
.robot-coord-display .val { color: #f5b301; }

.robot-speed-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: #8a96a3;
}
.robot-speed-row input[type=range] {
  flex: 1; accent-color: #f5b301; cursor: pointer;
}

.robot-status {
  background: #0a0d12;
  border: 1px solid #2a323d;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; line-height: 1.8;
}
.robot-status .ok   { color: #27d07a; }
.robot-status .warn { color: #f5b301; }
.robot-status .err  { color: #ff4d4f; }

.robot-hint {
  font-size: 11.5px; color: #8a96a3; line-height: 1.75;
  background: rgba(58,160,255,.04);
  border: 1px solid rgba(58,160,255,.12);
  border-left: 3px solid rgba(58,160,255,.5);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 14px;
}
.robot-hint b { color: #3aa0ff; }

/* Karşılaştırma tablosu */
.cmp-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.cmp-table th {
  padding: 10px 14px; text-align: left;
  background: #161b22; border-bottom: 1px solid #2a323d;
  font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: #8a96a3;
}
.cmp-table th.ptp { color: #3aa0ff; }
.cmp-table th.lin { color: #27d07a; }
.cmp-table td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(42,50,61,.6);
  color: #e8edf2; vertical-align: top;
}
.cmp-table td:first-child { color: #8a96a3; }
.cmp-table tr:last-child td { border-bottom: none; }