/* ==========================================================================
   Tüketici Koridoru — bağımsız panel görünümü (tuketici-koridoru.html)
   Kabuk stilleri demo-panel.css'ten gelir; burada yalnızca araç alanına özgü ekler var.
   ========================================================================== */
.tk-avatar { background: linear-gradient(135deg, #ff9f0a, #ffd60a); color: #1c1c1e; font-size: 1.15rem; }
.tk-context { cursor: pointer; }
.tk-soon { margin-left: auto; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--premium-gold);
    border: 1px solid rgba(255, 214, 10, 0.35); border-radius: 6px; padding: 1px 5px; }
.tk-group-title { margin: 20px 2px 10px; }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tk-card {
    display: flex; gap: 14px; align-items: flex-start; text-align: left; cursor: pointer; font-family: inherit; color: inherit;
    transition: border-color 0.15s, transform 0.15s; position: relative;
}
.tk-card:hover { border-color: var(--primary-accent); transform: translateY(-2px); }
.tk-card-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.4rem;
    color: #fff; background: linear-gradient(135deg, var(--primary-accent), var(--purple)); }
.tk-card-body { flex: 1; min-width: 0; padding-right: 54px; }
.tk-card-body b { display: block; color: #fff; font-size: 0.95rem; margin-bottom: 4px; }
.tk-card-body p { color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; }
.tk-card .badge { position: absolute; top: 14px; right: 14px; }

/* Çalışma alanı: seçilen araç bu alanda açılır */
.app-content.tk-frame-mode { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tk-frame-wrap { display: flex; flex-direction: column; flex: 1; height: 100%; min-height: 0; position: relative; }
.tk-frame-head { padding: 16px 24px 0; }
.tk-frame-head p { color: var(--text-muted); font-size: 0.86rem; max-width: 900px; }
.tk-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: transparent; }
.tk-loading { position: absolute; inset: 60px 0 auto; display: flex; justify-content: center; gap: 8px; color: var(--text-muted); font-size: 0.86rem; }
.tk-loading i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    /* Mobilde alt dock yok; araç listesi soldan açılan menüdür */
    .tk-shell { padding-bottom: calc(10px + var(--safe-bottom)); }
    .tk-frame-head { padding: 12px 6px 0; }
    .app-content.tk-frame-mode { height: calc(100dvh - 86px); border-radius: 22px; }
    .tk-card-body { padding-right: 0; }
    .tk-card .badge { position: static; align-self: flex-start; }
}