/* ORTAK TASARIM DİLİ — "Midnight Command" (docs/01 Madde 2) — paylaşılan bileşen stilleri */

/* docs/01 Madde 2.2 — palet token'ları CSS custom property olarak tanımlanır; açık tema
   (data-tema="acik") aynı token isimleriyle değerleri tersine çevirir. Varsayılan koyu tema. */
:root {
    --sy-arka-plan: #0B0F1A;
    --sy-yuzey: #141A2A;
    --sy-yuzey-2: #1C2438;
    --sy-kenarlik: #2A3350;
    --sy-birincil: #4F7CFF;
    --sy-birincil-parlak: #6E93FF;
    --sy-accent: #2DD4BF;
    --sy-uyari: #F5A524;
    --sy-hata: #F31260;
    --sy-metin-1: #EDF1FA;
    --sy-metin-2: #9AA6C0;
    --sy-metin-3: #5C6784;
    --sy-cam-arkaplan: rgba(20, 26, 42, 0.72);
    --sy-cam-kenarlik: rgba(255, 255, 255, 0.06);
    --sy-hata-yuzeyi: rgba(243, 18, 96, 0.12);
    --sy-basari-yuzeyi: rgba(45, 212, 191, 0.12);
    --sy-birincil-yuzeyi: rgba(79, 124, 255, 0.14);
    /* WCAG AA kontrastı için türetilmiş, yalnızca dolgu üzerine metin taşıyan bileşenlere özel tonlar
       (docs/01 Madde 7) — bkz. ".sy-btn-birincil" ve ".sy-btn-tehlike" altındaki notlar. */
    --sy-btn-birincil-bg: #3D63D6;
    --sy-btn-birincil-hover-bg: #3455BD;
    --sy-btn-tehlike-metin: #FF3D7A;
}

:root[data-tema="acik"] {
    --sy-arka-plan: #F4F6FB;
    --sy-yuzey: #FFFFFF;
    --sy-yuzey-2: #EDF0F7;
    --sy-kenarlik: #D8DEEC;
    --sy-birincil: #3D63D6;
    --sy-birincil-parlak: #2C4FBD;
    --sy-accent: #0E8074;
    --sy-uyari: #B45309;
    --sy-hata: #D0104C;
    --sy-metin-1: #12172A;
    --sy-metin-2: #4B5468;
    --sy-metin-3: #8891A6;
    --sy-cam-arkaplan: rgba(255, 255, 255, 0.72);
    --sy-cam-kenarlik: rgba(10, 15, 30, 0.08);
    --sy-hata-yuzeyi: rgba(208, 16, 76, 0.10);
    --sy-basari-yuzeyi: rgba(14, 128, 116, 0.10);
    --sy-birincil-yuzeyi: rgba(61, 99, 214, 0.10);
    --sy-btn-birincil-bg: #3D63D6;
    --sy-btn-birincil-hover-bg: #2C4FBD;
    --sy-btn-tehlike-metin: #D0104C;
}

.sy-not {
    color: var(--sy-metin-2);
    font-size: 14px;
}

h1, h2, h3 {
    color: var(--sy-metin-1);
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: 32px;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

/* .sy-shell'in height:100vh'i (bkz. MainLayout.razor.css) gerçek bir tavan oluşturabilsin diye
   html/body'nin de tam yükseklik olması gerekir — aksi halde height:100vh, auto yükseklikli bir
   body içinde anlamsızca üst öğeye göre hesaplanmaya çalışılır. */
html, body {
    height: 100%;
}

body {
    line-height: 1.55;
}

/* Sayısal/kod/metrik değerler — docs/01 Madde 2.4 */
.sy-mono {
    font-family: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
}

/* Skeleton yükleniyor durumu — docs/01 Madde 2.6 ("skeleton (nabız), spinner değil") */
.sy-iskelet {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--sy-yuzey-2) 0%, var(--sy-kenarlik) 50%, var(--sy-yuzey-2) 100%);
    background-size: 200% 100%;
    animation: sy-iskelet-nabiz 1.4s ease-in-out infinite;
}

@keyframes sy-iskelet-nabiz {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Kart */
.sy-kart {
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

/* Butonlar */
/* Not: palettedeki Birincil (#4F7CFF) metinle (#EDF1FA) yan yana ~3.3:1 kontrast verir — WCAG AA'nın
   normal metin için istediği 4.5:1'in altında kalır (docs/01 Madde 7). Buton dolgusu için aynı marka
   tonunun biraz koyultulmuş bir hali kullanılır; palet tablosundaki Birincil değeri diğer tüm
   kullanımlarda (link, aktif sekme, odak halkası — koyu zemin üzerinde) değişmeden kalır. Bu buton
   tonu, dolgusu her zaman koyu kaldığı ve üzerinde her zaman açık renkli metin durduğu için (bir
   buton, sayfa temasından bağımsız olarak hep "dolu" bir bileşendir) iki temada da aynı kalabilir. */
.sy-btn-birincil {
    background: var(--sy-btn-birincil-bg);
    color: #EDF1FA;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .sy-btn-birincil:hover {
        /* Aynı kontrast gerekçesiyle (yukarı bakınız) hover'da parlaklaştırmak yerine koyulaştırılır. */
        background: var(--sy-btn-birincil-hover-bg);
    }

    .sy-btn-birincil:disabled {
        background: var(--sy-kenarlik);
        color: var(--sy-metin-3);
        cursor: not-allowed;
    }

.sy-btn-ikincil {
    background: var(--sy-yuzey-2);
    color: var(--sy-metin-1);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

    .sy-btn-ikincil:hover {
        background: var(--sy-kenarlik);
    }

.sy-btn-tehlike {
    background: transparent;
    /* Palet Hata rengi kendi zemininde (sy-yuzey) WCAG AA'nın 4.5:1 eşiğinin az altında kalabildiğinden
       (docs/01 Madde 7), metin için türetilmiş --sy-btn-tehlike-metin kullanılır; kenarlık ve durum
       rozetlerindeki Hata rengi (kenarlık için yalnızca 3:1 yeterlidir) değişmeden kalır. */
    color: var(--sy-btn-tehlike-metin);
    border: 1px solid var(--sy-hata);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}

    .sy-btn-tehlike:hover {
        background: var(--sy-hata-yuzeyi);
    }

/* Form alanları */
.sy-input, select.sy-input, textarea.sy-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--sy-arka-plan);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--sy-metin-1);
    font-size: 14px;
}

.sy-alan {
    margin-bottom: 16px;
}

    .sy-alan label {
        display: block;
        color: var(--sy-metin-2);
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 6px;
    }

/* Tablo */
.sy-tablo {
    width: 100%;
    border-collapse: collapse;
}

    .sy-tablo th {
        text-align: left;
        color: var(--sy-metin-2);
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 10px 12px;
        border-bottom: 1px solid var(--sy-kenarlik);
    }

    .sy-tablo td {
        padding: 12px;
        border-bottom: 1px solid var(--sy-kenarlik);
        font-size: 14px;
        color: var(--sy-metin-1);
    }

    .sy-tablo tr:last-child td {
        border-bottom: none;
    }

/* Durum rozeti */
.sy-durum-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sy-metin-1);
    background: var(--sy-yuzey-2);
    border-radius: 999px;
    padding: 4px 12px;
}

.sy-durum-nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Ekip Listesi — satırdan tek tıkla Aktif/Pasif değiştirme anahtarı (DurumRozeti'ni sarar). */
.sy-durum-anahtari {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .sy-durum-anahtari input[type="checkbox"] {
        width: auto;
        margin: 0;
        cursor: pointer;
    }

/* Boş durum */
.sy-bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--sy-metin-2);
    gap: 12px;
}

/* Maskeli input */
.sy-maskeli-input {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .sy-maskeli-input .sy-input {
        flex: 1;
    }

/* İçerik-içi yatay sekme şeridi — Sekmeler.razor'daki (Sol Kenar Menü/Fluent Rail, position:absolute
   bir açılır/kayan menü) bileşeninden BİLEREK AYRI: bir sayfanın İÇERİĞİ içinde (ör. "Sistem
   Parametreleri") birden fazla kategori arasında geçiş için kullanılan, position:static basit bir
   sekme çubuğu. Sekmeler.razor NESTED olarak kullanılırsa kendi <nav>'ı (position:absolute) ana
   kenar menüsünün ÜSTÜNE biniyordu (gerçek bir kullanıcı raporuyla bulunan hata) — bu yüzden
   sayfa-içi sekmeler için Sekmeler/Sekme ASLA yeniden kullanılmaz, bunun yerine bu basit
   sınıflar sayfanın kendi @code bloğundaki düz bir string state ile kullanılır.*/
.sy-ic-sekme-basliklari {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--sy-kenarlik);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sy-ic-sekme-baslik {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    color: var(--sy-metin-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

    .sy-ic-sekme-baslik:hover {
        color: var(--sy-metin-1);
    }

    .sy-ic-sekme-baslik.aktif {
        color: var(--sy-birincil);
        border-bottom-color: var(--sy-birincil);
    }

/* Sol Kenar Menü (Fluent Rail) — docs/01 ORTAK TASARIM DİLİ ile uyumlu, JS'siz.
   Eski yatay ".sy-sekme-basliklar" şeridi bu bileşenle değiştirildi (bkz. Sekmeler.razor). */

/* .sy-icerik'in (bkz. MainLayout.razor.css) flex:1/min-height:0'ını yatay eksene devrettiren
   ara katman — rail + içerik yan yana durur, ikisi de tam yüksekliği paylaşır. Bu zincir
   SohbetSekmesi'nin kendi iç kaydırması için kritik (bkz. .sy-sekme-icerik notu). position:relative
   — .sy-kenar-menu bu kutuya göre mutlak konumlanıp (overlay) genişlediğinde içeriği itmez. */
.sy-kenar-menu-duzen {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    /* stretch (varsayılan) — menü VE içerik (ör. Sohbet) her zaman tam dikey alanı doldursun;
       flex-start bırakılsaydı ikisi de kendi içerik yüksekliğine küçülüp altta boşluk kalırdı. */
    align-items: stretch;
    gap: 20px;
}

/* Menünün daraltılmış (64px) haldeki alanını normal akışta HER ZAMAN ayıran bir yer tutucu —
   .sy-sekme-icerik'in genişliği menü genişletilse de DEĞİŞMEZ; asıl <nav> (position:absolute)
   bu yer tutucunun üzerine biner ve genişlediğinde içeriği itmeden ÜZERİNE taşar. */
.sy-kenar-menu-yer-tutucu {
    flex-shrink: 0;
    width: 64px;
}

.sy-kenar-menu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 16px;
    padding: 16px 8px;
    gap: 4px;
    overflow: hidden;
    z-index: 50;
    transition: width .18s ease, box-shadow .18s ease;
}

    /* Genişletilmiş hal: sabit akışı itmek yerine içeriğin ÜZERİNE bir overlay/flyout olarak
       taşar (bkz. kullanıcı isteği — gridler menü açıldığında daralmasın). */
    .sy-kenar-menu:not(.daraltilmis) {
        width: 264px;
        align-items: stretch;
        padding: 16px 12px;
        box-shadow: 0 20px 45px rgba(0,0,0,.35);
    }

.sy-kenar-menu-ust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
    width: 100%;
}

    .sy-kenar-menu.daraltilmis .sy-kenar-menu-ust {
        flex-direction: column;
    }

.sy-kenar-arama {
    flex: 1;
    min-width: 0;
    background: var(--sy-yuzey-2);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--sy-metin-1);
}

.sy-kenar-arama-ikon-btn,
.sy-kenar-daralt-btn,
.sy-kenar-icon-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--sy-metin-2);
    text-decoration: none;
    cursor: pointer;
}

    .sy-kenar-arama-ikon-btn:hover,
    .sy-kenar-daralt-btn:hover,
    .sy-kenar-icon-btn:hover {
        background: var(--sy-yuzey-2);
        color: var(--sy-metin-1);
    }

.sy-kenar-menu-liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.sy-kenar-ogesi {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--sy-metin-2);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
}

.sy-kenar-kategori-baslik {
    padding: 14px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sy-metin-3);
}

    .sy-kenar-menu.daraltilmis .sy-kenar-ogesi {
        justify-content: center;
        padding: 10px 0;
    }

    .sy-kenar-menu.daraltilmis .sy-kenar-oge-metin {
        display: none;
    }

    .sy-kenar-ogesi:hover {
        background: var(--sy-yuzey-2);
        color: var(--sy-metin-1);
    }

    .sy-kenar-ogesi.aktif {
        background: var(--sy-birincil-yuzeyi);
        color: var(--sy-metin-1);
    }

        .sy-kenar-ogesi.aktif::before {
            content: "";
            position: absolute;
            left: -12px;
            top: 8px;
            bottom: 8px;
            width: 3px;
            border-radius: 0 2px 2px 0;
            background: var(--sy-birincil);
        }

.sy-kenar-ikon {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}

    .sy-kenar-ikon svg {
        width: 18px;
        height: 18px;
    }

.sy-kenar-bos-durum {
    padding: 16px 8px;
    color: var(--sy-metin-3);
    font-size: 13px;
    text-align: center;
}

.sy-kenar-alt {
    border-top: 1px solid var(--sy-kenarlik);
    margin-top: 8px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
}

    .sy-kenar-alt.daraltilmis {
        align-items: center;
    }

.sy-kenar-profil {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--sy-metin-1);
    padding: 6px;
    border-radius: 10px;
}

    .sy-kenar-profil:hover {
        background: var(--sy-yuzey-2);
    }

.sy-kenar-profil-metin {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
}

    .sy-kenar-profil-metin span {
        color: var(--sy-metin-2);
        font-size: 12px;
    }

.sy-kenar-cikis-form {
    width: 100%;
}

.sy-kenar-cikis-btn {
    width: 100%;
    text-align: center;
    padding: 8px;
    font-size: 13px;
}

/* .sy-sekme-icerik AYNEN korunur — SohbetSekmesi'nin iç kaydırması için gereken
   flex:1/min-height:0 zinciri değişmez, sadece artık .sy-kenar-menu-duzen'in yatay flex
   satırında bir kardeş olarak konumlanır (min-width:0 eklendi, flex-row içinde taşma/kırpma
   davranışı doğru çalışsın diye). */
.sy-sekme-icerik {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Mobilde .sy-icerik'in sol dolgusu (32px) Sol Kenar Menü ile ekran kenarı arasında gereksiz bir
   boşluk yaratıyordu — dar ekranlarda menü sıfır dayalı (ekranın soluna bitişik) gösterilir, sağ
   dolgu (içerik alanı için) değişmeden kalır. Genişliğe 32px eklenmesi, sol dolgunun negatif
   margin ile iptal edilmesinden kaynaklanan eksikliği telafi eder (aksi halde sağda da fazladan
   boşluk oluşurdu). */
@media (max-width: 640px) {
    .sy-kenar-menu-duzen {
        margin-left: -32px;
        width: calc(100% + 32px);
    }

    .sy-kenar-menu {
        border-radius: 0 16px 16px 0;
    }
}

.sy-satir-basligi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sy-satir-basligi-aksiyonlar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sy-hata-mesaji {
    background: var(--sy-hata-yuzeyi);
    border: 1px solid var(--sy-hata);
    color: var(--sy-hata);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Cron taslak etiketleri (Periyodik Görevler) — tıklanabilir hazır ifade önerileri */
.sy-etiket-listesi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.sy-etiket-buton {
    background: var(--sy-yuzey-2);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 999px;
    color: var(--sy-metin-2);
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
}

    .sy-etiket-buton:hover {
        background: var(--sy-birincil-yuzeyi);
        border-color: var(--sy-birincil);
        color: var(--sy-metin-1);
    }

.sy-rol-secenegi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    color: var(--sy-metin-1);
    font-size: 14px;
    font-weight: 400;
}

.sy-basari-mesaji {
    background: var(--sy-basari-yuzeyi);
    border: 1px solid var(--sy-accent);
    color: var(--sy-accent);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Dashboard — metrik kartları */
.sy-metrik-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.sy-metrik-kart {
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-left: 3px solid var(--sy-birincil);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .sy-metrik-kart.sy-metrik-uyari {
        border-left-color: var(--sy-uyari);
    }

    .sy-metrik-kart.sy-metrik-hata {
        border-left-color: var(--sy-hata);
    }

    .sy-metrik-kart.sy-metrik-sonuc-yok {
        border-left-color: var(--sy-metin-3);
    }

.sy-metrik-baslik {
    color: var(--sy-metin-2);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sy-metrik-deger {
    color: var(--sy-metin-1);
    font-size: 26px;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
}

.sy-metrik-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sy-metrik-ikon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--sy-birincil-yuzeyi);
    color: var(--sy-birincil);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sy-metrik-trend {
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .sy-metrik-trend.sy-metrik-trend-artis {
        color: var(--sy-accent);
    }

    .sy-metrik-trend.sy-metrik-trend-dusus {
        color: var(--sy-hata);
    }

.sy-metrik-alt-not {
    color: var(--sy-metin-3);
    font-size: 12px;
}

/* Dashboard — LLM kartları + genel grafik ızgarası */
.sy-llm-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.sy-llm-karti .sy-satir-basligi {
    margin-bottom: 0;
}

.sy-grafik-izgara {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .sy-grafik-izgara {
        grid-template-columns: 1fr;
    }
}

/* Alan grafiği */
.sy-alan-grafik-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sy-grafik-baslik {
    color: var(--sy-metin-2);
    font-size: 13px;
    margin-bottom: 8px;
}

.sy-grafik-etiketler {
    display: flex;
    justify-content: space-between;
    color: var(--sy-metin-3);
    font-size: 11px;
    margin-top: 4px;
}

/* Donut grafiği */
.sy-donut-grafik {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sy-donut-svg {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.sy-donut-lejant {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--sy-metin-1);
    font-size: 13px;
}

.sy-donut-nokta {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

/* Sohbet (Chatbot) — sabit/tahmini bir yükseklik (60vh, calc(100vh - Npx) vb.) yerine, .sy-icerik
   → .sy-sekme-icerik zincirindeki flex:1 (bkz. MainLayout.razor.css ve yukarıdaki .sy-sekme-icerik)
   sayesinde üstteki kroma (topbar/sekme başlığı) ne yükseklikte olursa olsun geri kalan TÜM dikey
   alanı otomatik kaplar; sabit bir piksel/vh değeri tahmin etmeye gerek kalmaz. */
.sy-sohbet-duzen {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 420px;
}

/* Geçmiş listesi varsayılan olarak gizli — üstteki butonla SAĞDAN açılan bir overlay/menü
   olarak gösterilir (bkz. SohbetSekmesi.razor _listeAcik), sabit bir grid sütunu ayırıp sohbet
   penceresini daraltmaz. Sol Kenar Menü (bkz. Sekmeler.razor) ekranın solunda durduğundan, liste
   BİLEREK sağdan açılır — soldan açılsaydı kenar menüsüyle görsel olarak çakışırdı. */
.sy-sohbet-liste {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 16px;
    padding: 12px;
    overflow: hidden;
    transform: translateX(110%);
    transition: transform .18s ease;
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

.sy-sohbet-liste-acik {
    transform: translateX(0);
}

.sy-sohbet-liste-arkaplan {
    position: absolute;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, .25);
    border-radius: 16px;
}

.sy-sohbet-yeni-buton {
    width: 100%;
}

.sy-sohbet-liste-govde {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sy-sohbet-liste-oge-satir {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .sy-sohbet-liste-oge-satir .sy-sohbet-oturum-sil-btn {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        opacity: 0.35;
    }

    .sy-sohbet-liste-oge-satir:hover .sy-sohbet-oturum-sil-btn {
        opacity: 1;
    }

.sy-sohbet-liste-oge {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sy-metin-1);
    cursor: pointer;
    text-align: left;
}

    .sy-sohbet-liste-oge:hover {
        background: var(--sy-yuzey-2);
    }

    .sy-sohbet-liste-oge-aktif,
    .sy-sohbet-liste-oge-aktif:hover {
        background: var(--sy-yuzey-2);
        border-color: var(--sy-accent);
    }

.sy-sohbet-liste-baslik {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sy-sohbet-liste-tarih {
    font-size: 11px;
    color: var(--sy-metin-3);
}

.sy-sohbet-pencere {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 16px;
    overflow: hidden;
}

.sy-sohbet-arac-cubugu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sy-kenarlik);
}

.sy-sohbet-arac-baslik {
    font-size: 13px;
    font-weight: 600;
    color: var(--sy-metin-2);
}

.sy-sohbet-arac-aksiyonlar {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Sesli Sohbet — bkz. SohbetSekmesi.razor, wwwroot/js/sesliSohbet.js */
.sy-sesli-durum {
    font-size: 12px;
    color: var(--sy-birincil);
    white-space: nowrap;
}

.sy-sesli-aktif {
    background: var(--sy-birincil) !important;
    border-color: var(--sy-birincil) !important;
    color: #FFFFFF !important;
}

/* Madde 5 — Sohbet ekranını ekranı kaplayacak şekilde büyütme: kenar çubuğu + pencere birlikte
   tam ekran overlay'e döner, sekme içeriğinin geri kalanı görünür kalmaya devam eder ama arkada
   kaybolur (z-index). İçerik görüntüleyici modalının (z-index:1000) altında kalır. */
.sy-sohbet-tam-ekran {
    position: fixed;
    inset: 16px;
    z-index: 900;
    height: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.sy-sohbet-mesajlar {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sy-sohbet-balon {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 640px) {
    /* Mobilde %70 sınırı çok dar kalıyordu (gerçek kullanıcı şikayeti) — geniş içerik (tablo,
       rapor grid'i) balonun İÇİNDE gereksiz yere yatay kaydırmaya zorlanıyordu; artık geniş
       içerikli balonlar sohbet ekranının TAMAMINI (.sy-sohbet-mesajlar'ın mevcut dolgusu içinde)
       kullanabiliyor. Kısa metinli balonlar zaten kendi doğal içerik genişliğinde kaldığından
       (max-width bir ÜST SINIR, zorunlu genişlik değil) bu değişiklik onları etkilemez. */
    .sy-sohbet-balon {
        max-width: 100%;
    }
}

/* LLM'in ürettiği rapor tabloları balonun genişliğinden daha geniş olabilir — govde'ye kendi
   yatay kaydırma çubuğunu vererek taşmayı balonun İÇİNDE tutuyoruz (dışarı sızmasını engelliyoruz).
   min-width: 0, flex column içindeki varsayılan min-width: auto davranışını (içerik büzülmesini
   engelleyen) devre dışı bırakır; bu olmadan overflow-x tek başına yeterli olmuyor. */
.sy-sohbet-govde {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

    .sy-sohbet-govde table {
        border-collapse: collapse;
    }

    .sy-sohbet-govde th,
    .sy-sohbet-govde td {
        padding: 6px 10px;
        border: 1px solid var(--sy-kenarlik);
        font-size: 13px;
        /* LLM, tablo hücrelerine HER ZAMAN koyu-tema metin/zemin renklerini (ör. açık gri metin)
           doğrudan inline style olarak yazıyor — sarmalayıcının artık sabit koyu bir zemin
           dayatmaması (yukarıdaki not) sonucunda açık temada bu metin okunmaz hale geliyordu.
           Rengi burada, hangi hex'i yazmış olursa olsun, temaya göre ZORLA doğru kontrastta
           tutuyoruz. */
        color: var(--sy-metin-1) !important;
        background: transparent !important;
    }

    .sy-sohbet-govde thead th {
        background: var(--sy-birincil-yuzeyi) !important;
        color: var(--sy-birincil) !important;
    }

/* HTML_OLUSTUR (Server) cevabı Agent/Mobil için (hep koyu tema, kendi çerçeve/zemin/etiketine
   ihtiyaç duyarlar) sabit koyu renkli bir dış <div> + kendi "Sanal Yönetici" etiketiyle sarmalı
   gelir — Web'de bu, balonun ZATEN temalı (açık/koyu) zemin+kenarlığının (.sy-sohbet-balon-bot)
   ve kendi etiketinin (.sy-sohbet-etiket) İÇİNE ikinci, sabit-koyu bir çerçeve olarak biner ve
   açık temada yanlış renkte görünür. Yalnızca Web'de bu iç sarmalayıcının kendi zemin/kenarlık/
   etiketi bastırılır — Agent/Mobil bu CSS'i hiç yüklemediğinden onlar etkilenmez.
   !important gereklidir: LLM'in ürettiği inline style, harici kurallardan normalde önceliklidir. */
.sy-sohbet-govde > div:first-child {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
}

    .sy-sohbet-govde > div:first-child > div:first-child {
        display: none;
    }

.sy-sohbet-balon-kullanici {
    align-self: flex-end;
    background: var(--sy-birincil);
    color: #EDF1FA;
    border-bottom-right-radius: 4px;
}

.sy-sohbet-balon-bot {
    align-self: flex-start;
    background: var(--sy-yuzey-2);
    color: var(--sy-metin-1);
    border: 1px solid var(--sy-kenarlik);
    border-bottom-left-radius: 4px;
}

/* Balon her zaman doygun/koyu bir zemin taşır (kullanıcı: birincil mavi, bot: yüzey-2) — zaman
   damgası bu nedenle sayfa temasına göre değil, kendi balonunun zemin karakterine göre renklenir. */
.sy-sohbet-balon-kullanici .sy-sohbet-zaman {
    color: rgba(237, 241, 250, 0.7);
}

.sy-sohbet-balon-bot .sy-sohbet-zaman {
    color: var(--sy-metin-3);
}

.sy-sohbet-zaman {
    font-size: 11px;
}

.sy-sohbet-alt-cubuk {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    align-self: flex-end;
}

/* Mesajı sil butonu — dikkat dağıtmaması için varsayılan olarak soluk, balon üzerine gelince belirginleşir. */
.sy-sohbet-sil-btn {
    width: 20px;
    height: 20px;
    opacity: 0.35;
}

.sy-sohbet-balon:hover .sy-sohbet-sil-btn {
    opacity: 1;
}

.sy-sohbet-etiket {
    font-size: 11px;
    font-weight: 600;
    color: var(--sy-accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sy-sohbet-yaziyor {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 14px 16px;
}

    .sy-sohbet-yaziyor span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sy-metin-2);
        animation: sy-yaziyor-zip 1.2s infinite ease-in-out;
    }

        .sy-sohbet-yaziyor span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .sy-sohbet-yaziyor span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes sy-yaziyor-zip {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.sy-sohbet-giris {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 16px;
    border-top: 1px solid var(--sy-kenarlik);
}

    .sy-sohbet-giris textarea {
        flex: 1;
        resize: none;
    }

/* Sohbete dosya ekleme (bkz. SohbetSekmesi.razor) — InputFile görsel olarak gizlenir, yerine
   label ile stillendirilmiş bir ataç butonu gösterilir. */
.sy-sohbet-dosya-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.sy-sohbet-dosya-etiket {
    flex-shrink: 0;
}

.sy-sohbet-ek-cip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    font-size: 13px;
    color: var(--sy-metin-2);
    width: fit-content;
}

.sy-sohbet-ek-notu {
    font-size: 12px;
    color: var(--sy-metin-2);
    opacity: 0.85;
}

.sy-uyari-metni {
    margin: 0 16px 8px;
    font-size: 13px;
    color: var(--sy-btn-tehlike-metin, #f87171);
}

/* İçerik görüntüleyici (sandbox iframe modal) — ekranı komple kaplar */
.sy-icerik-goruntuleyici-arkaplan {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 12, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.sy-icerik-goruntuleyici {
    background: var(--sy-arka-plan);
    border: none;
    border-radius: 0;
    padding: 20px;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.sy-icerik-iframe {
    flex: 1;
    width: 100%;
    border: 1px solid var(--sy-kenarlik);
    border-radius: 10px;
    background: #EDF1FA;
}

/* Küçük merkezi diyaloglar (ör. dashboard düzenleme formu) aynı arkaplanı, kendi boyutunu kullanır */
.sy-icerik-goruntuleyici-arkaplan .sy-dialog-kart {
    width: min(520px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

/* Liste görünümü — Dashboard'larım/Uygulamalarım için ikonlu satır listesi */
.sy-liste-gorunumu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sy-liste-ogesi {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 12px;
    padding: 14px 16px;
}

.sy-liste-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--sy-birincil-yuzeyi);
    color: var(--sy-birincil);
    flex-shrink: 0;
}

.sy-liste-govde {
    flex: 1;
    min-width: 0;
}

.sy-liste-baslik {
    font-size: 14px;
    font-weight: 600;
    color: var(--sy-metin-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sy-liste-alt-baslik {
    font-size: 12px;
    color: var(--sy-metin-2);
    margin-top: 2px;
}

/* Dashboard'larım — otomatik yeniden üretim zamanlaması aktifken listede gösterilen rozet. */
.sy-dashboard-zamanlama-rozeti {
    background: var(--sy-birincil-yuzeyi);
    color: var(--sy-birincil);
    margin-left: 8px;
    font-size: 11px;
    padding: 2px 8px;
}

.sy-liste-aksiyonlar {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Dosya görünümü (Explorer tarzı) — Uygulamalarım */
.sy-dosya-gorunumu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 12px;
}

.sy-dosya-ogesi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
}

    .sy-dosya-ogesi:hover {
        background: var(--sy-yuzey-2);
        border-color: var(--sy-kenarlik);
    }

.sy-dosya-tikla {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.sy-dosya-ikon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--sy-birincil-yuzeyi);
    color: var(--sy-birincil);
    flex-shrink: 0;
}

    .sy-dosya-ikon svg {
        width: 26px;
        height: 26px;
    }

.sy-dosya-adi {
    font-size: 12.5px;
    color: var(--sy-metin-1);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    max-width: 100px;
}

.sy-dosya-aksiyonlar {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.sy-dosya-aksiyon-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--sy-kenarlik);
    background: var(--sy-yuzey);
    color: var(--sy-metin-2);
    cursor: pointer;
}

    .sy-dosya-aksiyon-btn:hover {
        background: var(--sy-yuzey);
        color: var(--sy-metin-1);
    }

    .sy-dosya-aksiyon-btn.tehlike:hover {
        color: var(--sy-btn-tehlike-metin);
        background: var(--sy-hata-yuzeyi);
        border-color: var(--sy-hata);
    }

/* Sohbet mesajı Kopyala/Sesli Oku butonları — durum tamamen JS'te (data-durum attribute) tutulur,
   burada yalnızca hangi ikonun görüneceği CSS ile seçilir (bkz. SohbetBalonu.razor/panoyaKopyala.js/
   sesliSohbet.js). */
.sy-sohbet-kopyala-btn .sy-sohbet-kopyala-ikon-tik {
    display: none;
}

.sy-sohbet-kopyala-btn[data-durum="kopyalandi"] .sy-sohbet-kopyala-ikon-varsayilan {
    display: none;
}

.sy-sohbet-kopyala-btn[data-durum="kopyalandi"] .sy-sohbet-kopyala-ikon-tik {
    display: inline;
}

.sy-sohbet-sesli-btn .sy-sohbet-sesli-ikon-durdur {
    display: none;
}

.sy-sohbet-sesli-btn[data-durum="okunuyor"] .sy-sohbet-sesli-ikon-oynat {
    display: none;
}

.sy-sohbet-sesli-btn[data-durum="okunuyor"] .sy-sohbet-sesli-ikon-durdur {
    display: inline;
}

/* İkon seçici — Uygulamalarım oluşturma/düzenleme formu */
.sy-ikon-secici {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sy-ikon-secenegi {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--sy-kenarlik);
    background: var(--sy-yuzey);
    color: var(--sy-metin-2);
    cursor: pointer;
}

    .sy-ikon-secenegi:hover {
        background: var(--sy-yuzey-2);
        color: var(--sy-metin-1);
    }

    .sy-ikon-secenegi.secili {
        border-color: var(--sy-birincil);
        color: var(--sy-birincil);
        background: var(--sy-birincil-yuzeyi);
    }

/* Ajandam — Hatırlatma takvimi (aylık ızgara) */
.sy-takvim-baslik {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .sy-takvim-baslik h3 {
        flex: 1;
        text-align: center;
        text-transform: capitalize;
    }

.sy-takvim-izgara {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.sy-takvim-gun-basligi {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--sy-metin-2);
    padding-bottom: 6px;
    text-transform: uppercase;
}

.sy-takvim-hucre {
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 10px;
    min-height: 96px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .sy-takvim-hucre:hover {
        border-color: var(--sy-birincil);
    }

.sy-takvim-disi {
    opacity: 0.4;
}

.sy-takvim-bugun {
    border-color: var(--sy-birincil);
    background: var(--sy-birincil-yuzeyi);
}

.sy-takvim-gun-no {
    font-size: 12px;
    font-weight: 600;
    color: var(--sy-metin-2);
}

.sy-takvim-oge {
    background: var(--sy-yuzey-2);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--sy-metin-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

    .sy-takvim-oge:hover {
        background: var(--sy-birincil-yuzeyi);
        color: var(--sy-birincil);
    }

.sy-takvim-oge-tamamlandi {
    color: var(--sy-metin-3);
    text-decoration: line-through;
}

/* ---- Görevlerim sekmesi (Liste/Kanban/Gantt) ---- */

.sy-view-secici {
    display: inline-flex;
    background: var(--sy-yuzey-2);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}

    .sy-view-secici button {
        background: transparent;
        border: none;
        color: var(--sy-metin-2);
        font-size: 13px;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 9px;
        cursor: pointer;
    }

    .sy-view-secici button.aktif {
        background: var(--sy-birincil-yuzeyi);
        color: var(--sy-birincil);
    }

/* Durum rozeti renk varyantları — GorevDurumuGorunumu.CssSinifi */
.sy-durum-bekliyor { background: var(--sy-yuzey-2); color: var(--sy-metin-2); }
.sy-durum-calisiliyor { background: var(--sy-birincil-yuzeyi); color: var(--sy-birincil); }
.sy-durum-feedback { background: rgba(245, 165, 36, 0.14); color: var(--sy-uyari); }
.sy-durum-tamamlandi { background: var(--sy-basari-yuzeyi); color: var(--sy-accent); }
.sy-durum-iptal { background: var(--sy-hata-yuzeyi); color: var(--sy-hata); }

.sy-gorev-liste-ogesi { align-items: flex-start; }
.sy-gorev-liste-ogesi .sy-liste-baslik { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; white-space: normal; }
.sy-gorev-konu-rozeti { background: var(--sy-yuzey-2); color: var(--sy-metin-2); }

/* İlerleme çubuğu — aşama tamamlanma oranı */
.sy-ilerleme-cubugu {
    width: 100%;
    max-width: 220px;
    height: 6px;
    background: var(--sy-yuzey-2);
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden;
}

.sy-ilerleme-cubugu-kucuk {
    max-width: none;
    margin-top: 8px;
}

.sy-ilerleme-dolgu {
    height: 100%;
    background: var(--sy-accent);
    border-radius: 999px;
    transition: width 0.2s ease;
}

/* Kanban panosu */
.sy-kanban-pano {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.sy-kanban-sutun {
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 14px;
    padding: 12px;
    min-height: 120px;
    transition: border-color 0.12s ease, background 0.12s ease;
}

/* Bir kart bu sütunun üzerine sürüklenirken (dragenter) — bırakılabilir hedefi görsel olarak belirginleştirir. */
.sy-kanban-sutun-hedef {
    border-color: var(--sy-birincil);
    background: var(--sy-birincil-yuzeyi);
}

.sy-kanban-sutun-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sy-kanban-sayac {
    font-size: 12px;
    color: var(--sy-metin-3);
    font-weight: 600;
}

.sy-kanban-kartlar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sy-kanban-karti {
    background: var(--sy-yuzey-2);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: grab;
}

    .sy-kanban-karti:active {
        cursor: grabbing;
    }

.sy-kanban-karti-baslik {
    font-size: 13px;
    font-weight: 600;
    color: var(--sy-metin-1);
}

.sy-kanban-karti-tarih {
    font-size: 11px;
    color: var(--sy-metin-3);
    margin-top: 6px;
}

.sy-kanban-bos {
    font-size: 12px;
    color: var(--sy-metin-3);
    text-align: center;
    padding: 12px 0;
}

/* Gantt görünümü — CSS grid tabanlı basit zaman çizelgesi */
.sy-gantt-sarmalayici {
    overflow-x: auto;
    border: 1px solid var(--sy-kenarlik);
    border-radius: 14px;
}

.sy-gantt-govde {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-width: 720px;
}

.sy-gantt-etiket-sutunu {
    border-right: 1px solid var(--sy-kenarlik);
}

.sy-gantt-etiket {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
    color: var(--sy-metin-1);
    border-bottom: 1px solid var(--sy-kenarlik);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.sy-gantt-etiket-baslik {
    font-weight: 600;
    color: var(--sy-metin-2);
    font-size: 12px;
    text-transform: uppercase;
    cursor: default;
}

.sy-gantt-zaman-alani {
    position: relative;
}

.sy-gantt-tarih-basliklari {
    display: grid;
    grid-template-columns: repeat(var(--sy-gantt-sutun-sayisi, 4), 1fr);
    height: 36px;
    border-bottom: 1px solid var(--sy-kenarlik);
}

.sy-gantt-tarih-hucre {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--sy-metin-2);
    border-left: 1px solid var(--sy-kenarlik);
}

.sy-gantt-satir {
    position: relative;
    height: 36px;
    border-bottom: 1px solid var(--sy-kenarlik);
}

.sy-gantt-cubuk {
    position: absolute;
    top: 6px;
    height: 24px;
    border-radius: 6px;
    background: var(--sy-birincil-yuzeyi);
    border: 1px solid var(--sy-birincil);
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: pointer;
    overflow: hidden;
}

.sy-gantt-cubuk-etiket {
    font-size: 10px;
    font-weight: 600;
    color: var(--sy-birincil);
    white-space: nowrap;
}

/* Görev düzenleme dialogu */
.sy-gorev-dialog {
    width: min(640px, calc(100vw - 48px));
}

.sy-gorev-tarih-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.sy-gorev-asamalar-basligi {
    margin-top: 24px;
}

.sy-asama-karti, .sy-asama-yeni-karti {
    background: var(--sy-yuzey-2);
    margin-bottom: 12px;
    padding: 16px;
}

/* Tema değiştirme butonu (topbar) */
.sy-tema-btn {
    background: transparent;
    border: 1px solid var(--sy-kenarlik);
    color: var(--sy-metin-2);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .sy-tema-btn:hover {
        background: var(--sy-yuzey-2);
        color: var(--sy-metin-1);
    }

/* Sağ üst dil-geçiş combosu (DilSeciciFormu.razor) — .sy-tema-btn ile aynı görsel dil. */
.sy-dil-formu {
    display: inline-flex;
}

.sy-dil-select {
    background: transparent;
    border: 1px solid var(--sy-kenarlik);
    color: var(--sy-metin-2);
    border-radius: 10px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
    cursor: pointer;
}

    .sy-dil-select:hover {
        background: var(--sy-yuzey-2);
        color: var(--sy-metin-1);
    }

/* ===================================================================================
   Anonim Tanıtım (Home) + Self-Servis Kayıt Sayfaları (FirmaKaydi/KullaniciKaydi) —
   TanitimUstBar.razor, Home.razor, FirmaKaydi.razor, KullaniciKaydi.razor bu sınıfları
   paylaşır; Blazor CSS isolation yalnızca bir bileşenin kendi markup'ına uygulandığından
   (component-scoped .razor.css'ler diğer sayfalarda etkisiz kalır) birden fazla sayfa/
   bileşen tarafından kullanılan sınıflar BİLEREK burada, global olarak tanımlanır. Renk
   token'ları dışında yeni bir renk EKLENMEMİŞTİR.
   =================================================================================== */

.sy-tanitim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

.sy-tanitim-btn-hayalet {
    color: var(--sy-metin-1);
    background: var(--sy-cam-arkaplan);
    border: 1px solid var(--sy-cam-kenarlik);
}

    .sy-tanitim-btn-hayalet:hover {
        border-color: var(--sy-birincil);
    }

.sy-tanitim-btn-birincil {
    color: #EDF1FA;
    background: var(--sy-btn-birincil-bg);
}

    .sy-tanitim-btn-birincil:hover {
        background: var(--sy-btn-birincil-hover-bg);
    }

.sy-tanitim-sayfasi {
    background: var(--sy-arka-plan);
    min-height: 100vh;
}

.sy-tanitim-yukleniyor {
    min-height: 100vh;
    background: var(--sy-arka-plan);
}

.sy-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 32px 72px;
    text-align: center;
}

.sy-hero-icerik {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.sy-hero-etiket {
    display: inline-block;
    color: var(--sy-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sy-hero h1 {
    font-size: 38px;
    margin: 0 0 16px 0;
}

.sy-hero-alt {
    color: var(--sy-metin-2);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 32px 0;
}

.sy-hero-butonlar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sy-hero-btn-buyuk {
    padding: 13px 26px;
    font-size: 15px;
}

.sy-bolum {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 32px;
    text-align: center;
}

.sy-bolum-alternatif {
    background: var(--sy-yuzey);
    max-width: none;
    border-radius: 0;
}

.sy-bolum h2 {
    margin: 0 0 8px 0;
}

.sy-bolum-alt {
    color: var(--sy-metin-2);
    font-size: 15px;
    margin: 0 0 32px 0;
}

.sy-ozellik-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    text-align: left;
}

.sy-ozellik-karti {
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 16px;
    padding: 22px;
}

.sy-bolum-alternatif .sy-ozellik-karti {
    background: var(--sy-yuzey-2);
}

.sy-ozellik-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--sy-birincil-yuzeyi);
    color: var(--sy-birincil);
    margin-bottom: 12px;
}

.sy-ozellik-karti h3 {
    font-size: 16px;
    margin: 0 0 6px 0;
}

.sy-ozellik-karti p {
    color: var(--sy-metin-2);
    font-size: 14px;
    margin: 0;
}

/* Sistem Admini "Sistem Özellikleri" formundaki canlı önizleme — .sy-ozellik-karti'nin aynısı,
   yalnızca admin formunda tam genişliğe yayılmaması için sınırlı bir genişlik eklenir. */
.sy-ozellik-onizleme {
    max-width: 360px;
    margin-top: 8px;
}

/* Sistem Admini "Abonelik Paketleri" formundaki 17 özellik checkbox grid'i. */
.sy-abonelik-ozellik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 16px;
    margin: 8px 0 16px 0;
}

.sy-abonelik-ozellik-oge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--sy-metin-2);
    font-weight: 400;
}

/* Fiyatlandırma sayfası + ana sayfa "Paketlerimiz" bölümü. */
.sy-paket-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    text-align: left;
    align-items: stretch;
}

.sy-paket-karti {
    display: flex;
    flex-direction: column;
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 16px;
    padding: 26px;
    position: relative;
}

.sy-bolum-alternatif .sy-paket-karti {
    background: var(--sy-yuzey-2);
}

.sy-paket-karti-vurgulu {
    border-color: var(--sy-birincil);
    box-shadow: 0 0 0 1px var(--sy-birincil);
}

.sy-paket-rozet {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--sy-birincil);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}

.sy-paket-baslik {
    font-size: 20px;
    margin: 0 0 4px 0;
}

.sy-paket-aciklama {
    color: var(--sy-metin-2);
    font-size: 14px;
    margin: 0 0 16px 0;
    min-height: 20px;
}

.sy-paket-fiyat {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.sy-paket-fiyat-donem {
    font-size: 14px;
    font-weight: 400;
    color: var(--sy-metin-2);
}

.sy-paket-donem-secici {
    display: inline-flex;
    gap: 4px;
    background: var(--sy-yuzey-2);
    border-radius: 999px;
    padding: 4px;
    margin: 0 auto 32px auto;
}

.sy-paket-donem-secici button {
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    color: var(--sy-metin-2);
}

.sy-paket-donem-secici button.sy-paket-donem-aktif {
    background: var(--sy-birincil);
    color: #fff;
}

.sy-paket-ozellik-listesi {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.sy-paket-ozellik-listesi li {
    padding: 6px 0;
    font-size: 14px;
    color: var(--sy-metin-2);
}

.sy-paket-ozellik-listesi li::before {
    content: "✓";
    color: var(--sy-accent);
    font-weight: 700;
    margin-right: 8px;
}

.sy-neden-listesi {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .sy-neden-listesi li {
        color: var(--sy-metin-2);
        font-size: 15px;
        line-height: 1.5;
        padding-left: 28px;
        position: relative;
    }

        .sy-neden-listesi li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--sy-accent);
            font-weight: 700;
        }

        .sy-neden-listesi li strong {
            color: var(--sy-metin-1);
        }

.sy-referans-not {
    font-size: 13px;
    font-style: italic;
}

.sy-referans-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    text-align: left;
}

.sy-referans-karti {
    background: var(--sy-yuzey);
    border: 1px dashed var(--sy-kenarlik);
    border-radius: 16px;
    padding: 22px;
}

.sy-referans-logo {
    max-height: 40px;
    max-width: 140px;
    object-fit: contain;
    margin-bottom: 14px;
    display: block;
}

.sy-referans-logo-kucuk {
    max-height: 32px;
    max-width: 80px;
    object-fit: contain;
    display: block;
}

.sy-referans-logo-onizleme {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sy-referans-logo-onizleme img {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
    border: 1px dashed var(--sy-kenarlik);
    border-radius: 8px;
    padding: 4px;
}

.sy-form-tasarim-onizleme {
    max-width: 100%;
    border: 1px solid var(--sy-kenarlik);
    border-radius: 8px;
    margin-bottom: 12px;
    background: #fff;
}

.sy-referans-alinti {
    color: var(--sy-metin-1);
    font-size: 15px;
    font-style: italic;
    margin: 0 0 14px 0;
}

.sy-referans-firma {
    display: block;
    color: var(--sy-metin-1);
    font-weight: 600;
    font-size: 14px;
}

.sy-referans-sektor {
    display: block;
    color: var(--sy-metin-3);
    font-size: 12px;
    margin-top: 2px;
}

.sy-sss-listesi {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sy-sss-ogesi {
    background: var(--sy-yuzey-2);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 12px;
    overflow: hidden;
}

.sy-sss-soru {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    color: var(--sy-metin-1);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    padding: 16px 18px;
    cursor: pointer;
}

.sy-sss-ok {
    color: var(--sy-birincil);
    font-size: 18px;
    line-height: 1;
}

.sy-sss-cevap {
    color: var(--sy-metin-2);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0 18px 16px 18px;
}

.sy-tanitim-cagri {
    text-align: center;
    padding: 56px 32px;
}

    .sy-tanitim-cagri h2 {
        margin: 0 0 20px 0;
    }

.sy-tanitim-altbilgi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    margin-top: 24px;
    padding: 32px 32px 40px;
    background: var(--sy-yuzey-2);
    border-top: 1px solid var(--sy-kenarlik);
    color: var(--sy-metin-3);
    font-size: 13px;
}

.sy-tanitim-altbilgi-ust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sy-tanitim-altbilgi-linkler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.sy-tanitim-altbilgi-linkler a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sy-metin-3);
    text-decoration: none;
}

.sy-tanitim-altbilgi-linkler a svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sy-tanitim-altbilgi-linkler a:hover {
    color: var(--sy-accent);
    text-decoration: underline;
}

/* Ödeme güvenliği rozetleri — verilen SVG'ler BEYAZ (yalnızca koyu zemin üzerinde okunaklı) olduğundan
   .sy-odeme-guven-rozeti sabit/tema-BAĞIMSIZ koyu bir "chip" sağlar; footer açık temada bile bu chip
   sayesinde rozetler okunaklı kalır. Aynı sınıf Abonelik Yönetimi ekranındaki (tema-reaktif .sy-kart
   yüzeyi üzerindeki) kredi kartı ödeme rozetleri için de yeniden kullanılır. */
.sy-tanitim-altbilgi-guven {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.sy-odeme-guven-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #141A2A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 18px;
}

.sy-odeme-guven-rozeti img {
    display: block;
    width: auto;
    max-width: 100%;
}

.sy-odeme-guven-rozeti img.sy-odeme-rozeti-iyzico {
    height: 28px;
}

.sy-odeme-guven-rozeti img.sy-odeme-rozeti-kartlar {
    height: 18px;
}

/* Anonim döküman görüntüleme sayfası (DokumanGoruntule.razor) — Gizlilik Politikası/KVKK vb. */
.sy-dokuman-sayfasi {
    background: var(--sy-arka-plan);
    min-height: 100vh;
}

.sy-dokuman-govde {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 32px 64px;
}

.sy-dokuman-govde h1 {
    margin: 24px 0 8px 0;
}

.sy-dokuman-icerik {
    color: var(--sy-metin-1);
    line-height: 1.7;
}

.sy-dokuman-icerik h2 {
    margin: 28px 0 10px 0;
    font-size: 19px;
}

.sy-dokuman-icerik h3 {
    margin: 20px 0 8px 0;
    font-size: 16px;
}

.sy-dokuman-icerik p {
    margin: 0 0 14px 0;
}

.sy-dokuman-icerik ul,
.sy-dokuman-icerik ol {
    margin: 0 0 14px 0;
    padding-left: 22px;
}

.sy-dokuman-icerik li {
    margin-bottom: 6px;
}

/* Self-servis kayıt formları (FirmaKaydi.razor, KullaniciKaydi.razor) */
.sy-kayit-sayfasi {
    background: var(--sy-arka-plan);
    min-height: 100vh;
}

.sy-kayit-icerik {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 24px 64px;
}

.sy-kayit-karti {
    background: var(--sy-yuzey);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 16px;
    padding: 32px;
}

    .sy-kayit-karti h1 {
        font-size: 24px;
        margin: 0 0 6px 0;
    }

.sy-kayit-alt-baslik {
    color: var(--sy-metin-2);
    font-size: 14px;
    margin: 0 0 24px 0;
}

.sy-kayit-alt-bolum-baslik {
    color: var(--sy-metin-1);
    font-size: 14px;
    font-weight: 600;
    margin: 24px 0 4px 0;
}

.sy-kayit-karti label {
    display: block;
    color: var(--sy-metin-2);
    font-size: 13px;
    font-weight: 500;
    margin: 14px 0 6px 0;
}

.sy-kayit-karti input[type="text"],
.sy-kayit-karti input[type="email"],
.sy-kayit-karti input[type="tel"],
.sy-kayit-karti input[type="password"],
.sy-kayit-karti textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--sy-yuzey-2);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--sy-metin-1);
    font-size: 14px;
    font-family: inherit;
}

.sy-kayit-rol-listesi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.sy-kayit-rol-etiketi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sy-yuzey-2);
    border: 1px solid var(--sy-kenarlik);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--sy-metin-2);
    cursor: pointer;
}

    .sy-kayit-rol-etiketi input {
        width: auto;
        margin: 0;
    }

.sy-kayit-gonder-btn {
    width: 100%;
    margin-top: 24px;
    background: var(--sy-btn-birincil-bg);
    color: #EDF1FA;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .sy-kayit-gonder-btn:hover {
        background: var(--sy-btn-birincil-hover-bg);
    }

    .sy-kayit-gonder-btn:disabled {
        opacity: .6;
        cursor: default;
    }

.sy-kayit-hata {
    background: var(--sy-hata-yuzeyi);
    border: 1px solid var(--sy-hata);
    color: var(--sy-hata);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    margin-top: 16px;
}

.sy-kayit-basari {
    background: var(--sy-basari-yuzeyi);
    border: 1px solid var(--sy-accent);
    color: var(--sy-metin-1);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
}

.sy-kayit-not {
    color: var(--sy-metin-3);
    font-size: 12px;
    margin-top: 4px;
}

.sy-kayit-geri-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--sy-birincil);
    font-size: 14px;
    text-decoration: none;
}

    .sy-kayit-geri-link:hover {
        text-decoration: underline;
    }

/* İletişim sayfası (Iletisim.razor) — form kartı + iletişim bilgisi/harita kartı yan yana ızgarası.
   Masaüstünde 2 sütun, 900px altında (.sy-grafik-izgara'daki AYNI kırılma noktasıyla tutarlı) tek
   sütuna düşer. */
.sy-iletisim-govde {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 24px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 24px;
}

@media (max-width: 900px) {
    .sy-iletisim-govde {
        grid-template-columns: 1fr;
    }
}

.sy-iletisim-bilgi-karti h2 {
    font-size: 18px;
    margin: 0 0 16px 0;
}

.sy-iletisim-bilgi-satiri {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
    color: var(--sy-metin-2);
    font-size: 14px;
    line-height: 1.5;
}

    .sy-iletisim-bilgi-satiri svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--sy-accent);
    }

    .sy-iletisim-bilgi-satiri strong {
        display: block;
        color: var(--sy-metin-1);
        font-weight: 600;
    }

    .sy-iletisim-bilgi-satiri a {
        color: var(--sy-metin-1);
        text-decoration: none;
    }

    .sy-iletisim-bilgi-satiri a:hover {
        color: var(--sy-accent);
        text-decoration: underline;
    }

.sy-iletisim-harita {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--sy-kenarlik);
}

    .sy-iletisim-harita iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* Sistem Admini "Yönet" impersonation şeridi — MainLayout.razor */
.sy-impersonation-seridi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 24px;
    background: var(--sy-uyari);
    color: #1C2438;
    font-size: 13px;
    font-weight: 600;
}

    .sy-impersonation-seridi form {
        margin: 0;
    }

    .sy-impersonation-seridi .sy-btn-ikincil {
        background: rgba(28, 36, 56, 0.12);
        color: #1C2438;
        border-color: rgba(28, 36, 56, 0.3);
    }

/* Sistem Admini — Token Raporu filtre çubuğu (Firma/Yıl/Ay) */
.sy-istatistik-filtre {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 8px;
}

    .sy-istatistik-filtre .sy-alan {
        margin-bottom: 0;
        min-width: 180px;
    }

/* Kullanıcı Panosu — ikonlu aksiyon butonları (bkz. Components/Shared/AksiyonButonu.razor).
   Bu kural bilerek dosyanın SONUNDA duruyor: .sy-btn-birincil/ikincil/tehlike ile AYNI
   özgüllükte (tek sınıf seçici) padding tanımlıyor, kazanması için kaynak sırasında SONRA
   gelmesi gerekiyor (medya sorgusu özgüllük eklemez, yalnızca kaynak sırası kazanır). */
.sy-btn-ikon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.sy-btn-ikon-svg {
    display: inline-flex;
    flex-shrink: 0;
}

    .sy-btn-ikon-svg svg {
        display: block;
    }

@media (max-width: 640px) {
    /* Liste görünümündeki çok-butonlu satırlar mobilde taşıp çok yer kaplıyordu (gerçek kullanıcı
       şikayeti) — metin gizlenip yalnızca ikon+küçük dolgu kalır, tooltip (title) tek ipucu olur. */
    .sy-btn-ikon {
        padding: 8px 10px;
    }

        .sy-btn-ikon .sy-btn-metin {
            display: none;
        }

    /* Dashboard'larım gibi çok butonlu (Görüntüle/Düzenle/Çalıştır/Paylaş/Sil) liste satırlarında
       ikon-only butonlar bile başlık/açıklama metniyle aynı satırda sıkışıyordu (gerçek kullanıcı
       şikayeti) — aksiyon grubu artık kendi TAM GENİŞLİKTE satırına düşer, başlık/açıklama üstte
       tam genişlikte kalır. .sy-liste-ogesi zaten flex olduğundan yalnızca wrap açılıp
       .sy-liste-aksiyonlar'a flex-basis:100% verilmesi yeterli (klasik "flex satır sonu zorlama"
       deseni) — .sy-liste-ikon/.sy-liste-govde (başlık/açıklama) aynı üst satırda kalmaya devam eder.
       Tüm liste görünümleri (Dashboard/Uygulama/Rapor/Toplantı/Belge/Görev) bu ortak sınıfları
       paylaştığından düzeltme hepsinde tutarlı şekilde uygulanır. */
    .sy-liste-ogesi {
        flex-wrap: wrap;
    }

    .sy-liste-aksiyonlar {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}