/* ══════════════════════════════════════════════════════════════
   Telsiz Ağı · Program Merkezi: sayfa yerleşimi.
   Başlık, bağlantı durumu, sekmeler, İleri işlemler satırı, sahne.
   Site başlığı ve altlığı css/site.css'ten gelir; burası yalnız aracı biçimler.
══════════════════════════════════════════════════════════════ */

#ta-flash-app{
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 96px 20px 120px;
}

/* ── Başlık ── */
#ta-flash-app .ta-bas{ margin-bottom: 22px; }
#ta-flash-app .ta-ust-etiket{
    font: 500 12px/1.4 var(--font-mono);
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
#ta-flash-app .ta-ust-etiket a{ color: var(--text-secondary); text-decoration: none; }
#ta-flash-app .ta-ust-etiket a:hover{ color: var(--accent); }
#ta-flash-app .ta-bas h1{
    font-size: clamp(28px, 4.4vw, 40px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.02em;
}
#ta-flash-app .ta-giris{
    margin-top: 10px;
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: 16px;
}

/* ── Desteklenmeyen tarayıcı notu ── */
#ta-flash-app .ta-uyumsuz{
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,178,26,.35);
    background: var(--accent-soft);
    border-radius: var(--radius-lg);
    font-size: 14px;
    color: var(--text-secondary);
}
#ta-flash-app .ta-uyumsuz strong{ color: var(--text); font-weight: 700; }

/* ── Bağlantı durumu çubuğu ── */
#ta-flash-app .ta-durum{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}
#ta-flash-app .ta-durum-bosluk{ flex: 1 1 auto; }
#ta-flash-app .ta-durum select{ min-height: 36px; font-size: 13px; }
#ta-flash-app .ta-durum .btn{ min-height: 36px; padding: 6px 14px; font-size: 13px; }
#ta-flash-app .ta-surum{ font: 500 12px/1 var(--font-mono); color: var(--text-muted); }

#ta-flash-app .ta-serial-status{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}
#ta-flash-app .ta-serial-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 4px rgba(255,255,255,.05);
    flex: 0 0 auto;
}
#ta-flash-app .ta-serial-status[data-state="connected"]{ color: var(--success); }
#ta-flash-app .ta-serial-status[data-state="connected"] .ta-serial-dot{ background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
#ta-flash-app .ta-serial-status[data-state="connecting"],
#ta-flash-app .ta-serial-status[data-state="reconnecting"]{ color: var(--accent); }
#ta-flash-app .ta-serial-status[data-state="connecting"] .ta-serial-dot,
#ta-flash-app .ta-serial-status[data-state="reconnecting"] .ta-serial-dot{ background: var(--accent); animation: ta-nabiz 1.2s ease-in-out infinite; }
#ta-flash-app .ta-serial-status[data-operation="true"]{ color: var(--accent); }
#ta-flash-app .ta-serial-status[data-operation="true"] .ta-serial-dot{ background: var(--accent); animation: ta-nabiz 1s ease-in-out infinite; }
#ta-flash-app .ta-serial-status[data-critical="true"]{ color: var(--accent-hover); }
@keyframes ta-nabiz{ 50%{ opacity: .35; } }

/* ── Sekmeler ── */
#ta-flash-app .ta-sekme-satiri{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
#ta-flash-app .ta-sekmeler{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}
#ta-flash-app .nav-item{
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: 600 14px/1.2 var(--font-sans);
    padding: 10px 16px;
    min-height: 40px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
}
#ta-flash-app .nav-item:hover:not(:disabled){ color: var(--text); background: rgba(255,255,255,.06); }
#ta-flash-app .nav-item.active{ background: var(--accent); color: var(--on-accent); }
#ta-flash-app .nav-item:disabled{ opacity: .4; cursor: not-allowed; }
#ta-flash-app .nav-item.is-edition-disconnected:not(.active){ color: var(--text-muted); }

#ta-flash-app .ta-ileri-ac{
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--text-secondary);
    font: 600 14px/1.2 var(--font-sans);
    padding: 10px 16px;
    min-height: 40px;
    border-radius: 999px;
    cursor: pointer;
}
#ta-flash-app .ta-ileri-ac::after{
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s var(--ease);
}
#ta-flash-app .ta-ileri-ac[aria-expanded="true"]::after{ transform: rotate(-135deg) translateY(-1px); }
#ta-flash-app .ta-ileri-ac:hover{ color: var(--text); border-color: rgba(255,255,255,.28); }
#ta-flash-app .ta-ileri{ margin-bottom: 14px; border-style: dashed; }

/* ── Sahne ── */
#ta-flash-app .shell{ display: block; }
#ta-flash-app .stage{ display: block; min-width: 0; }
#ta-flash-app .pane{ display: none; }
#ta-flash-app .pane.active{ display: block; animation: ta-belir .2s var(--ease); }
@keyframes ta-belir{ from{ opacity: 0; transform: translateY(4px); } }

/* ── Yükleme adımları (Yazılım yükle görünümü) ── */
#ta-flash-app .ta-adim{
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 4px 14px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
#ta-flash-app .ta-adim:last-of-type{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
#ta-flash-app .ta-adim-no{
    grid-row: 1 / span 2;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    font: 600 14px/1 var(--font-mono);
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(255,178,26,.35);
}
#ta-flash-app .ta-adim-baslik{ font-size: 17px; font-weight: 700; letter-spacing: -.01em; align-self: center; }
#ta-flash-app .ta-adim-govde{ grid-column: 2; min-width: 0; }
#ta-flash-app .ta-adim-govde > p{ color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; }
#ta-flash-app .ta-adim-govde > p:last-child{ margin-bottom: 0; }
#ta-flash-app .ta-adim-liste{ list-style: none; display: grid; gap: 6px; color: var(--text-secondary); font-size: 14px; }
#ta-flash-app .ta-adim-liste li{ position: relative; padding-left: 16px; }
#ta-flash-app .ta-adim-liste li::before{ content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
#ta-flash-app .ta-adim-liste kbd{
    font: 600 12px/1 var(--font-mono);
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--well);
    color: var(--text);
}
#ta-flash-app .ta-risk{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--well);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-secondary);
}
#ta-flash-app .ta-risk b{ color: var(--accent); }

/* ── Künye bağlantısı ── */
#ta-flash-app .ta-kunye{
    margin-top: 18px;
    font-size: 12px;
    color: var(--text-muted);
}
#ta-flash-app .ta-kunye a{ color: var(--text-secondary); }

/* ── Duyarlı ── */
@media (max-width: 720px){
    #ta-flash-app{ padding: 84px 16px 120px; }
    #ta-flash-app .ta-sekmeler{ border-radius: var(--radius-lg); width: 100%; }
    #ta-flash-app .ta-sekmeler .nav-item{ flex: 1 1 auto; }
    #ta-flash-app .ta-ileri-ac{ width: 100%; justify-content: center; }
    #ta-flash-app .ta-durum{ gap: 8px; }
    #ta-flash-app .notifications{ left: 16px; right: 16px; bottom: 88px; }
    #ta-flash-app .notification{ max-width: none; }
}

#ta-flash-app .ta-adimlar{ list-style: none; margin: 0; padding: 0; }
#ta-flash-app .ta-adim > .ta-adim-govde{ grid-column: 2; }
#ta-flash-app #flash-content .firmware-catalog,
#ta-flash-app #flash-content .section{ margin-bottom: 12px; }
#ta-flash-app #flash-content .catalog-or{ margin: 4px 0 12px; font-size: 13px; color: var(--text-muted); }