/* =====================================================================
   Ana Sayfa yeniden tasarım (2026-09-28): üst bar global arama,
   kullanım kartları (progress bar) ve Atmos AI şeridi (mockup)
   ===================================================================== */

/* ---- Üst bar: global arama pill ---- */
/* Üst bar düzeni: kullanıcı solda; arama + (tema / bildirim / yardım) SAĞA yaslı.
   .topbar-user'ın sağ otomatik boşluğu geri kalan her şeyi sağa iter (arama gizliyken de simgeler sağda kalır). */
.topbar-user { margin-right: auto; }
.gsearch-wrap { flex: 0 1 340px; max-width: 340px; min-width: 200px; position: relative; }
.gsearch {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.gsearch-clear { flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; border: 0; background: none; color: var(--text-muted); cursor: pointer; border-radius: 50%; }
.gsearch-clear:hover { background: var(--bg-elevated); color: var(--text-primary); }
.gsearch-clear svg { width: 14px; height: 14px; }
/* Üst bar arama sonuç açılırı */
.gsearch-results {
    /* Kutu kısaldı: sonuç açılırı sağa hizalı ve en az 440px genişlikte kalsın */
    position: absolute; top: calc(100% + 8px); left: auto; right: 0; width: max(100%, 440px); max-width: calc(100vw - 32px); z-index: 200;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); padding: 8px; max-height: 72vh; overflow-y: auto;
}
.gsearch-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.gchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; }
.gchip svg { width: 13px; height: 13px; }
.gchip:hover { border-color: var(--border-strong); }
.gchip.active { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-soft); }
.gsearch:focus-within { border-color: var(--accent-dim); background: var(--bg-surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.gsearch svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.gsearch input {
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    color: var(--text-primary); font-size: 14px; font-family: inherit;
}
.gsearch input::placeholder { color: var(--text-muted); }
.gsearch-kbd {
    flex-shrink: 0; font-family: var(--font-body); font-size: 11px; font-weight: 700;
    color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 7px; padding: 2px 7px; letter-spacing: .5px;
}
.icon-btn { border-radius: 50%; }   /* mockup: yuvarlak aksiyon butonları */

/* ---- Kullanım kartları ---- */
.dash-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.dcard {
    --bar: var(--accent);
    display: flex; flex-direction: column; gap: 7px;
    padding: 11px 13px 10px;
    border-radius: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dcard:hover { transform: translateY(-2px); border-color: var(--border-strong); }
/* İnce tasarım: küçük ikon + etiket solda, değer sağda aynı satırda */
.dcard-head { display: flex; align-items: center; gap: 8px; }
.dcard-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.dcard-ic svg { width: 16px; height: 16px; }
.dcard-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard-val { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1; white-space: nowrap; }
.dcard-lim { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.dcard-bar { height: 5px; border-radius: 999px; background: var(--bg-elevated); overflow: hidden; }
.dcard-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--bar); min-width: 5px; transition: width .5s ease; }
.dcard-rem { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); }
.dcard.c-blue   { --bar: #4493f8; }
.dcard.c-purple { --bar: #bc8cff; }
.dcard.c-green  { --bar: #3fb950; }
.dcard.c-sky    { --bar: #38bdf8; }
.dcard.c-amber  { --bar: #e3a008; }

/* ---- Atmos AI şeridi ---- */
.dash-ai {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 22px 16px 18px; border-radius: 20px;
    background:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1200'%20height%3D'140'%20preserveAspectRatio%3D'none'%3E%3Cg%20fill%3D'none'%20stroke%3D'%238b7bff'%20stroke-opacity%3D'0.18'%20stroke-width%3D'1.6'%3E%3Cpath%20d%3D'M0%2078C210%2034%20410%20108%20620%2066S1010%2022%201200%2074'%2F%3E%3Cpath%20d%3D'M0%20100C230%2058%20430%20128%20650%2088S1030%2048%201200%2098'%2F%3E%3Cpath%20d%3D'M0%2052C190%2018%20390%2082%20570%2044S970%208%201200%2050'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat,
        radial-gradient(90% 130% at 10% 45%, rgba(150,130,255,.30), transparent 60%),
        radial-gradient(75% 120% at 96% 60%, rgba(120,150,255,.22), transparent 55%),
        linear-gradient(120deg, #eef1ff 0%, #e7e4ff 48%, #edeaff 100%);
    border: 1px solid rgba(139,123,255,.22);
    box-shadow: 0 12px 30px rgba(120,110,220,.18);
    text-decoration: none;
    margin-bottom: 28px;   /* Hızlı İşlemler ile arasında boşluk */
}
.dash-ai:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(120,110,220,.28); }
/* Atmos AI robot maskotu: gradient üzerinde, hafifçe taşan büyük görsel */
.dai-logo {
    flex-shrink: 0; display: grid; place-items: center;
    width: 92px; align-self: stretch; position: relative;
    background: none; box-shadow: none; border-radius: 0;   /* arkadaki daireyi kaldır */
    z-index: 2;   /* robot arka plan (dalga) çizgilerinin ÜSTÜNDE kalsın */
}
.dai-logo img {
    width: 108px; height: auto; max-width: none;
    margin: -22px 0; /* şeridi büyütmeden maskotu belirgin göster (üst/alttan hafif taşar) */
    filter: drop-shadow(0 8px 16px rgba(40,30,90,.35));
    animation: dai-glow 5s ease-in-out infinite;
}
/* 5 sn'de bir robotun üzerinden geçen ışıltı bandı (webp alpha maske → yalnız robot şeklinde) */
.dai-logo::after {
    content: "";
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 108px; aspect-ratio: 1536 / 1024; pointer-events: none;
    -webkit-mask: url('/img/atmos-ai-bot.webp') center / contain no-repeat;
            mask: url('/img/atmos-ai-bot.webp') center / contain no-repeat;
    background: linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.92) 50%, rgba(255,255,255,0) 58%);
    background-size: 220% 100%; background-repeat: no-repeat; background-position: 165% 0;
    mix-blend-mode: screen;
    animation: dai-shine 5s ease-in-out infinite;
}
@keyframes dai-shine {
    0%, 86% { background-position: 165% 0; }
    93%     { background-position: -65% 0; }
    100%    { background-position: -65% 0; }
}
@keyframes dai-glow {
    0%, 84%, 100% { filter: drop-shadow(0 8px 16px rgba(40,30,90,.35)); }
    90%           { filter: drop-shadow(0 8px 16px rgba(40,30,90,.35)) drop-shadow(0 0 12px rgba(255,255,255,.75)) brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .dai-logo img, .dai-logo::after { animation: none; }
}
.dai-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dai-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: #1f1b3d; }
.dai-desc { font-size: 13px; color: #5c5880; line-height: 1.45; }
.dai-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    padding: 13px 22px; border-radius: 12px; border: 0;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(20,180,137,.34); transition: filter .15s ease, transform .15s ease;
}
.dai-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.dai-btn svg { width: 16px; height: 16px; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .dash-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .gsearch-wrap { display: none; }         /* dar ekranda üst bar aramasını gizle */
    .topbar-user { margin-right: auto; }
}
@media (max-width: 680px) {
    .dash-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dcard-val { font-size: 19px; }
    .dcard-ic { width: 30px; height: 30px; } .dcard-ic svg { width: 16px; height: 16px; }
    .dash-ai { flex-wrap: wrap; padding: 18px; }
    .dai-btn { width: 100%; justify-content: center; }
}

/* Kurumsal taslak (branch): Onaya Gönder butonu + rozet + atama yetki etiketi */
.s-submit-draft-btn { position: relative; }
/* .s-tools-toggle'ın display:inline-flex'i ve rozetin inline-grid'i [hidden]'ı eziyordu → buton herkese görünüyordu */
.s-submit-draft-btn[hidden], .s-submit-draft-btn .s-draft-badge[hidden] { display: none; }
.s-submit-draft-btn .s-draft-badge {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px;
    padding: 0 5px; margin-left: 5px; border-radius: 9px;
    background: var(--danger, #e5484d); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.etbl-acc {
    display: inline-block; margin: 0 6px; padding: 1px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; background: var(--bg-elevated); color: var(--text-secondary);
}

/* Onay bekleyen değişiklikler bilgi bandı (üye görünümü) */
.pending-banner {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; padding: 9px 14px; border-radius: 10px;
    background: var(--accent2-soft, rgba(74,147,255,.14));
    border: 1px solid var(--accent2, #4a93ff);
    color: var(--text-primary); font-size: 13px; font-weight: 600;
}
.pending-banner svg { width: 16px; height: 16px; color: var(--accent2, #4a93ff); }