:host { display: flex; flex-direction: column; flex: 1; min-height: 0; }

    .he {
      display: flex; flex-direction: column; flex: 1;
      background: var(--hmi-panel-bg, #0a0f14);
      border-radius: 0;
      overflow: hidden; position: relative;
      font-family: var(--hmi-mono-font, 'JetBrains Mono', 'Consolas', monospace);
      color: var(--hmi-on-surface-2, rgba(255,255,255,0.6));
    }

    /* ========================================
       SCAN GİRİŞ ANİMASYONU
       ======================================== */
    .scan-sahne {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--hmi-panel-bg, #0a0f14);
      z-index: 10;
      animation: scan-fade-out 0.6s ease 3.2s forwards;
    }

    .scan-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(var(--hmi-grid-color, rgba(0,255,136,0.03)) 1px, transparent 1px),
        linear-gradient(90deg, var(--hmi-grid-color, rgba(0,255,136,0.03)) 1px, transparent 1px);
      background-size: 20px 20px;
      animation: grid-pulse 2s ease-in-out infinite;
    }

    .scan-line {
      position: absolute; top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--hmi-neon, #00ff88) 30%, var(--hmi-cyan, #00ccff) 70%, transparent 100%);
      box-shadow: 0 0 20px var(--hmi-neon, #00ff88), 0 0 60px var(--hmi-neon-glow, rgba(0,255,136,0.3));
      animation: scan-sweep 1.5s ease-in-out;
      opacity: 0;
    }

    @keyframes scan-sweep {
      0% { top: 0; opacity: 1; }
      100% { top: 100%; opacity: 0.3; }
    }

    @keyframes grid-pulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    @keyframes scan-fade-out {
      to { opacity: 0; pointer-events: none; }
    }

    .scan-icerik {
      display: flex; flex-direction: column; align-items: center; gap: 16px;
      z-index: 2;
    }

    .scan-halka {
      width: 60px; height: 60px; border-radius: 50%;
      border: 2px solid var(--hmi-neon-glow, rgba(0,255,136,0.3));
      display: flex; align-items: center; justify-content: center;
      animation: halka-pulse 1.5s ease-in-out infinite;
      position: relative;
    }
    .scan-halka::before {
      content: ''; position: absolute; inset: -6px;
      border-radius: 50%;
      border: 1px solid var(--hmi-neon-glow, rgba(0,255,136,0.15));
      animation: halka-expand 2s ease-out infinite;
    }

    @keyframes halka-pulse {
      0%, 100% { box-shadow: 0 0 10px var(--hmi-neon-glow, rgba(0,255,136,0.2)); }
      50% { box-shadow: 0 0 25px var(--hmi-neon-glow, rgba(0,255,136,0.5)), 0 0 50px var(--hmi-neon-glow, rgba(0,255,136,0.15)); }
    }
    @keyframes halka-expand {
      0% { transform: scale(1); opacity: 0.6; }
      100% { transform: scale(1.5); opacity: 0; }
    }

    .scan-halka-ic {
      animation: check-pop 0.4s ease 1s both;
      color: var(--hmi-neon, #00ff88);
    }
    .scan-halka-ic svg { stroke: currentColor; }
    @keyframes check-pop {
      0% { transform: scale(0); opacity: 0; }
      60% { transform: scale(1.2); }
      100% { transform: scale(1); opacity: 1; }
    }

    .scan-terminal {
      display: flex; flex-direction: column; gap: 4px; align-items: center;
    }
    .scan-satir {
      font-size: 11px; color: var(--hmi-neon, #00ff88); letter-spacing: 1px;
      opacity: 0; animation: terminal-type 0.3s ease forwards;
    }
    .scan-satir.s1 { animation-delay: 0.3s; }
    .scan-satir.s2 { animation-delay: 0.9s; color: var(--hmi-cyan, #00ccff); }
    .scan-satir.s3 { animation-delay: 1.8s; }
    .scan-satir.s4 { animation-delay: 2.3s; font-weight: 700; font-size: 13px; color: var(--hmi-on-surface, #e0ffe8); text-shadow: 0 0 10px var(--hmi-neon-glow, rgba(0,255,136,0.5)); }

    @keyframes terminal-type {
      0% { opacity: 0; transform: translateY(4px); filter: blur(2px); }
      100% { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    /* ========================================
       ANA İÇERİK
       ======================================== */
    .ana-icerik {
      display: flex; flex-direction: column; gap: 8px;
      padding: 10px; flex: 1; min-height: 0;
      overflow-y: auto; overflow-x: hidden;
      scrollbar-width: thin; scrollbar-color: var(--hmi-neon-glow, rgba(0,255,136,0.15)) transparent;
    }
    .ana-icerik::-webkit-scrollbar { width: 3px; }
    .ana-icerik::-webkit-scrollbar-track { background: transparent; }
    .ana-icerik::-webkit-scrollbar-thumb { background: var(--hmi-neon-glow, rgba(0,255,136,0.15)); border-radius: 2px; }

    /* ---- Mesai Kartı ---- */
    .mesai-kart {
      background: linear-gradient(180deg, var(--hmi-neon-bg, rgba(0,255,136,0.04)) 0%, transparent 100%);
      border: 1px solid var(--hmi-panel-border, rgba(0,255,136,0.1));
      border-radius: 12px; padding: 10px 12px;
    }
    .mesai-ust {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 8px;
    }
    .mesai-led {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--hmi-on-surface-4, #444);
    }
    .mesai-led.aktif {
      background: var(--hmi-neon, #00ff88);
      box-shadow: 0 0 6px var(--hmi-neon, #00ff88);
      animation: led-nabiz 2s ease-in-out infinite;
    }
    @keyframes led-nabiz {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .mesai-etiket {
      font-size: 9px; font-weight: 700; color: var(--hmi-neon, #00ff88);
      letter-spacing: 1.5px; flex: 1;
    }
    .mesai-giris-saat {
      font-size: 10px; color: var(--hmi-on-surface-3, rgba(255,255,255,0.3));
      letter-spacing: 0.5px;
    }
    .mesai-kisi-isim {
      font-size: 12px; font-weight: 700; color: var(--hmi-on-surface, #e0ffe8);
      text-align: center; margin-bottom: 4px;
      text-shadow: 0 0 8px var(--hmi-neon-glow, rgba(0,255,136,0.2));
      letter-spacing: 0.3px;
    }

    .mesai-orta {
      display: flex; justify-content: center; padding: 4px 0;
    }
    .mesai-halka-wrap {
      position: relative; width: 110px; height: 110px;
    }
    .mesai-halka-svg { width: 100%; height: 100%; }
    .mesai-halka-fill {
      transition: stroke-dashoffset 1s ease;
      filter: drop-shadow(0 0 6px var(--hmi-neon-glow, rgba(0,255,136,0.4)));
    }
    .mesai-halka-ic {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .mesai-sure-roller {
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 800; color: var(--hmi-on-surface, #e0ffe8);
      letter-spacing: 0.5px; font-variant-numeric: tabular-nums;
      text-shadow: 0 0 12px var(--hmi-neon-glow, rgba(0,255,136,0.4));
      font-family: var(--hmi-mono-font, 'JetBrains Mono', 'Consolas', monospace);
    }
    .mesai-roller-hane {
      display: inline-block; overflow: hidden; height: 1.25em; width: 0.62em;
    }
    .mesai-roller-ic {
      display: flex; flex-direction: column;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .mesai-roller-rakam {
      display: flex; align-items: center; justify-content: center;
      height: 1.25em; width: 0.62em;
    }
    .mesai-roller-ayirici {
      display: inline-flex; align-items: center; justify-content: center;
      width: 0.3em; opacity: 0.5;
      animation: mesai-ayirici-nabiz 1s ease-in-out infinite;
    }
    @keyframes mesai-ayirici-nabiz {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    .mesai-yuzde {
      font-size: 10px; color: var(--hmi-neon-soft, rgba(0,255,136,0.6)); font-weight: 600;
      margin-top: 1px;
    }

    /* Durum Bar */
    .mesai-durum-bar {
      display: flex; gap: 8px; margin-top: 8px;
    }
    .mesai-durum-item {
      flex: 1; display: flex; align-items: center; gap: 5px;
      padding: 6px 8px;
      background: var(--hmi-surface, rgba(255,255,255,0.02));
      border: 1px solid var(--hmi-surface-2, rgba(255,255,255,0.06));
      border-radius: 8px;
    }
    .md-led {
      width: 5px; height: 5px; border-radius: 50%;
      flex-shrink: 0;
    }
    .md-led.yesil { background: var(--hmi-neon, #00ff88); box-shadow: 0 0 4px var(--hmi-neon, #00ff88); }
    .md-led.sari { background: var(--hmi-warn, #ffcc00); box-shadow: 0 0 4px var(--hmi-warn, #ffcc00); }
    .md-yazi { font-size: 8px; color: var(--hmi-on-surface-3, rgba(255,255,255,0.3)); letter-spacing: 0.5px; flex: 1; }
    .md-deger { font-size: 8px; color: var(--hmi-on-surface-2, rgba(255,255,255,0.6)); font-weight: 700; letter-spacing: 0.3px; }

    /* ---- Bildirim Terminali ---- */
    .bildirim-terminal {
      background: var(--hmi-terminal-bg, rgba(0,255,136,0.02));
      border: 1px solid var(--hmi-panel-border, rgba(0,255,136,0.08));
      border-radius: 10px; padding: 8px 10px;
    }
    .bt-baslik {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 6px;
    }
    .bt-led {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--hmi-cyan, #00ccff); box-shadow: 0 0 4px var(--hmi-cyan, #00ccff);
      animation: led-nabiz 2s ease-in-out infinite;
    }
    .bt-yazi {
      font-size: 8px; font-weight: 700; color: var(--hmi-cyan, rgba(0,204,255,0.7));
      letter-spacing: 1.5px;
    }
    .bt-satirlar {
      display: flex; flex-direction: column; gap: 3px;
    }
    .bt-satir {
      display: flex; gap: 8px; font-size: 10px; line-height: 1.4;
    }
    .bt-zaman { color: var(--hmi-on-surface-4, rgba(255,255,255,0.2)); white-space: nowrap; font-size: 9px; }
    .bt-mesaj {
      color: var(--hmi-on-surface-3, rgba(255,255,255,0.45));
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .bt-satir.yeni .bt-mesaj { color: var(--hmi-neon, #00ff88); }
    .bt-cursor {
      color: var(--hmi-neon, #00ff88); font-size: 10px;
      animation: cursor-blink 1s step-end infinite;
    }
    @keyframes cursor-blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }

    /* ---- Aksiyon Butonları — Canlı Sahneler ---- */
    .aksiyon-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .aksiyon-btn {
      display: flex; flex-direction: column; align-items: center; gap: 0;
      padding: 0;
      background: var(--hmi-surface, rgba(255,255,255,0.02));
      border: 1px solid var(--hmi-surface-2, rgba(255,255,255,0.06));
      border-radius: 12px;
      cursor: pointer; transition: all 0.25s;
      position: relative; overflow: hidden;
    }
    .aksiyon-btn::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, var(--neon), transparent 60%);
      opacity: 0; transition: opacity 0.25s;
    }
    .aksiyon-btn:hover::before { opacity: 0.06; }
    .aksiyon-btn:hover {
      border-color: var(--neon);
      box-shadow: 0 0 14px color-mix(in srgb, var(--neon) 25%, transparent),
                  inset 0 0 14px color-mix(in srgb, var(--neon) 5%, transparent);
      transform: translateY(-2px);
    }
    .aksiyon-btn:active { transform: translateY(0) scale(0.97); }

    /* Sahne (ikon alanı) */
    .ab-sahne {
      width: 100%; height: 56px;
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1;
    }

    /* Alt bilgi şeridi */
    .ab-bilgi {
      width: 100%; display: flex; align-items: center; gap: 5px;
      padding: 6px 10px;
      border-top: 1px solid var(--hmi-surface-2, rgba(255,255,255,0.04));
      position: relative; z-index: 1;
    }
    .ab-led {
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--neon); box-shadow: 0 0 4px var(--neon);
      flex-shrink: 0;
    }
    .ab-yazi {
      font-size: 10px; font-weight: 600; color: var(--hmi-on-surface-2, rgba(255,255,255,0.5));
      letter-spacing: 0.3px;
    }
    .aksiyon-btn:hover .ab-yazi { color: var(--hmi-on-surface, #e0ffe8); }

    /* ======= PUANTAJ: Dönen Saat ======= */
    .ab-saat-kadran { position: relative; color: var(--hmi-neon, #00ff88); }
    .ab-saat-svg { width: 40px; height: 40px; }
    .ab-saat-svg circle { stroke: var(--hmi-neon-glow, rgba(0,255,136,0.15)); }
    .ab-akrep {
      transform-origin: 20px 20px;
      animation: akrep-don 43200s linear infinite;
      stroke: var(--hmi-neon, #00ff88);
    }
    .ab-yelkovan {
      transform-origin: 20px 20px;
      animation: yelkovan-don 3600s linear infinite;
      stroke: var(--hmi-cyan, #00ccff);
    }
    .ab-saat-svg > circle:last-of-type { fill: var(--hmi-neon, #00ff88); }
    @keyframes akrep-don { to { transform: rotate(360deg); } }
    @keyframes yelkovan-don { to { transform: rotate(360deg); } }

    /* ======= MOLA: Buhar Çıkan Kahve ======= */
    .ab-kahve { position: relative; display: flex; align-items: flex-end; justify-content: center; }
    .ab-kahve-bardak { font-size: 24px; position: relative; z-index: 1; }
    .ab-buhar-wrap {
      position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 4px;
    }
    .ab-buhar {
      display: block; width: 2px; height: 12px; border-radius: 2px;
      background: linear-gradient(to top, var(--hmi-warn, rgba(255,204,0,0.5)), transparent);
      animation: buhar-yuksel 2s ease-in-out infinite;
    }
    .ab-buhar.b1 { animation-delay: 0s; height: 10px; }
    .ab-buhar.b2 { animation-delay: 0.4s; height: 14px; }
    .ab-buhar.b3 { animation-delay: 0.8s; height: 10px; }
    @keyframes buhar-yuksel {
      0% { opacity: 0; transform: translateY(4px) scaleY(0.5); }
      30% { opacity: 0.8; }
      100% { opacity: 0; transform: translateY(-12px) scaleY(1.2) scaleX(1.5); }
    }

    /* ======= DEVAMSIZLIK: Checklist ======= */
    .ab-checklist {
      display: flex; flex-direction: column; gap: 4px;
    }
    .ab-check-satir {
      display: flex; align-items: center; gap: 5px;
      opacity: 0;
      animation: check-slide 0.4s ease forwards;
    }
    .ab-check-satir.cs1 { animation-delay: 0.2s; }
    .ab-check-satir.cs2 { animation-delay: 0.5s; }
    .ab-check-satir.cs3 { animation-delay: 0.8s; }
    @keyframes check-slide {
      from { opacity: 0; transform: translateX(-8px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .ab-check-kutu {
      width: 10px; height: 10px; border-radius: 3px;
      border: 1.5px solid color-mix(in srgb, var(--hmi-cyan, #00ccff) 30%, transparent);
      flex-shrink: 0; position: relative;
    }
    .ab-check-kutu.dolu {
      background: color-mix(in srgb, var(--hmi-cyan, #00ccff) 15%, transparent);
      border-color: var(--hmi-cyan, #00ccff);
    }
    .ab-check-kutu.dolu::after {
      content: ''; position: absolute; top: 1px; left: 2.5px;
      width: 3px; height: 5px;
      border-right: 1.5px solid var(--hmi-cyan, #00ccff);
      border-bottom: 1.5px solid var(--hmi-cyan, #00ccff);
      transform: rotate(40deg);
    }
    .ab-check-kutu.bos {
      animation: kutu-nabiz 2s ease-in-out infinite;
    }
    @keyframes kutu-nabiz {
      0%, 100% { border-color: color-mix(in srgb, var(--hmi-cyan, #00ccff) 20%, transparent); }
      50% { border-color: color-mix(in srgb, var(--hmi-cyan, #00ccff) 60%, transparent); box-shadow: 0 0 4px color-mix(in srgb, var(--hmi-cyan, #00ccff) 20%, transparent); }
    }
    .ab-check-cizgi {
      height: 3px; border-radius: 2px;
      background: color-mix(in srgb, var(--hmi-cyan, #00ccff) 12%, transparent);
    }
    .ab-check-cizgi.w80 { width: 45px; }
    .ab-check-cizgi.w60 { width: 32px; }
    .ab-check-cizgi.w70 { width: 38px; }

    /* ======= MESAJLAR: Nabız Atan Bildirim ======= */
    .ab-mesaj-sahne { position: relative; display: flex; align-items: center; justify-content: center; color: var(--hmi-danger, #ff6b6b); }
    .ab-mesaj-ikon { display: block; }
    .ab-mesaj-badge {
      position: absolute; top: -2px; right: -4px;
      font-size: 9px; font-weight: 900; color: var(--hmi-panel-bg, #0a0f14);
      background: var(--hmi-danger, #ff6b6b);
      width: 16px; height: 16px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      animation: mesaj-nabiz 1.5s ease-in-out infinite;
      box-shadow: 0 0 6px color-mix(in srgb, var(--hmi-danger, #ff6b6b) 50%, transparent);
    }
    @keyframes mesaj-nabiz {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); box-shadow: 0 0 12px color-mix(in srgb, var(--hmi-danger, #ff6b6b) 70%, transparent); }
    }
    .ab-mesaj-ping {
      position: absolute; top: -2px; right: -4px;
      width: 16px; height: 16px; border-radius: 50%;
      border: 2px solid color-mix(in srgb, var(--hmi-danger, #ff6b6b) 40%, transparent);
      animation: ping-yayil 2s ease-out infinite;
    }
    @keyframes ping-yayil {
      0% { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(2.5); opacity: 0; }
    }