/* ===================================================================
   07.11.2026 - YENİ DOSYA: mobile-override.css
   Amaç: Mobil taraf için güvenli, geri alınabilir (silinince hiçbir
   şeyi bozmayan) ek CSS. Mevcut style.min.css / custom.css / main.scss
   dosyalarının İÇERİĞİ değiştirilmedi; bu dosya sadece base.html.twig'de
   custom.css'ten SONRA yüklenip, gerekli yerlerde daha spesifik seçici
   ile üzerine yazıyor. Geri almak için: tek yapılması gereken bu
   dosyayı silmek ve base.html.twig'deki <link> satırını kaldırmak.

   Düzeltilen asıl sorun:
   style.min.css içinde ".sidebar" şöyle tanımlı:
       .sidebar{ ... height:calc(100vh - 0px); position:fixed; ... }
   Bu kuralda "overflow" HİÇ tanımlanmamış (varsayılan: visible). Yani
   soldaki menü (ul.list) viewport'tan uzun olduğunda, taşan alt
   başlıklar görünmüyor VE kaydırılamıyor (scrollbar yok) - kullanıcının
   bildirdiği "menü uzun olduğunda alttaki başlıklar gözükmüyor" sorunu
   tam olarak budur. Çözüm: aside'ı flex column yapıp sadece ".menu"
   kısmını kendi içinde dikey kaydırılabilir hale getiriyoruz; böylece
   logo/toggle (".navbar-brand") üstte sabit kalıyor, menü listesi
   kendi alanında scroll oluyor.
   =================================================================== */

/* --- 1) Sol menü taşma/scroll düzeltmesi (tüm ekran boyutları) --- */
#mavera .sidebar {
    display: flex;
    flex-direction: column;
}

#mavera .sidebar .navbar-brand {
    flex: 0 0 auto;
}

#mavera .sidebar .menu {
    flex: 1 1 auto;
    min-height: 0; /* flex item'ın içeriği taşırmadan scroll alabilmesi için şart */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* mobilde (iOS) yumuşak/momentum scroll */
}

/* Menü scrollbar'ını ince ve sade göster (tema ile uyumlu, nötr gri) */
#mavera .sidebar .menu::-webkit-scrollbar {
    width: 4px;
}
#mavera .sidebar .menu::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
#mavera .sidebar .menu::-webkit-scrollbar-track {
    background: transparent;
}

/* --- 2) Mobil (<=767px) iyileştirmeleri --- */
@media only screen and (max-width: 767px) {
    /* Menü açılıp kapanırken (left: -250px <-> 0) geçişi biraz daha
       akıcı/yavaş yapalım; mevcut "transition: all 0.5s" kuralını
       bozmuyoruz, sadece hızını (timing function) inceltiyoruz. */
    #mavera .sidebar {
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Menü içindeki linkler mobilde dokunması daha kolay olsun diye
       biraz daha ferah bir dokunma alanı. */
    #mavera .sidebar .menu .list > li.main-li > a {
        padding: 14px 10px;
    }

    /* Açılan alt menüler (.ml-menu) de kendi başına çok uzarsa, ekranın
       dışına taşmadan kendi içinde kaydırılsın. */
    #mavera .sidebar .menu .list .ml-menu {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Üstteki karartma (overlay) için yumuşak bir geçiş; JS zaten
       fadeIn/fadeOut ile açıp kapatıyor, burada sadece destekliyoruz. */
    #mavera .overlay {
        transition: opacity 0.3s ease;
    }
}

/* --- 1b) Profil ikonu (_left.html.twig'deki görsel değişikliğin stili).
   07.11.2026 - düzeltme: önce baş harf rozeti (initials-avatar) denendi ama ortalanmadı/garip
   durdu; kullanıcı isteğiyle sade bir profil ikonuna çevrildi. Eski <img> (50x50, 8px radius,
   3px beyaz border, gölge) ile aynı boyut/çerçeve korunuyor; "min-width" + "flex-shrink:0" ile
   kutunun küçülüp metnin üstüne binmesi (bir önceki sürümdeki görünüm bozukluğu) engelleniyor,
   "margin-right" ile isim yazısından net bir boşluk bırakılıyor. --- */
#mavera .sidebar .user-info {
    align-items: center;
}
#mavera .sidebar .user-info .image.profile-icon-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 3px solid #fff;
    box-shadow: 0px 5px 5px 0px rgba(41, 42, 51, 0.2);
    background: linear-gradient(135deg, #e31f1c, #ff6a59);
    color: #fff;
    font-size: 24px;
    margin-right: 12px;
    line-height: 1;
}
#mavera .sidebar .user-info .detail {
    min-width: 0;
}

/* --- 1c) Sağ üst ikon şeridi (bildirim/dil/ayarlar/çıkış) mobilde biraz daha nefes alsın --- */
@media only screen and (max-width: 767px) {
    #mavera .navbar-right .navbar-nav > li > a {
        padding: 0 8px;
    }
}

/* --- 3) Sayfa yükleme animasyonu (loader) - mobilde daha hafif/akıcı --- */
#mavera .page-loader-wrapper {
    animation: mobileOverrideFadeIn 0.25s ease-in;
}

@keyframes mobileOverrideFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media only screen and (max-width: 767px) {
    #mavera .page-loader-wrapper .loader img {
        width: 36px;
        height: 36px;
    }
}

/* ===================================================================
   07.11.2026 - YENİ BÖLÜM: genel "yeni program" hissi (buton/animasyon/
   loading/giriş-çıkış/mobilite). Hepsi SADECE CSS - hiçbir JS/PHP/twig
   davranışı değişmedi, hiçbir fonksiyon/isim/id dokunulmadı. Geri almak
   için yine sadece bu dosyayı silmek yeterli.
   =================================================================== */

/* --- 4) Sayfa her açıldığında yumuşak bir "giriş" hissi --- */
@keyframes mvrPageEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
#mavera section.content {
    animation: mvrPageEnter 0.35s ease-out;
}
#mavera .sidebar {
    animation: mvrPageEnter 0.45s ease-out;
}
#mavera .navbar-right {
    animation: mvrPageEnter 0.45s ease-out;
}

/* --- 5) Butonlarda hafif, "canlı" bir dokunuş (hover/active) ---
   Not: sadece transform/box-shadow/filter eklendi; mevcut renk/boyut/
   class'lara dokunulmadı, tıklama davranışı (onclick/submit) aynı. */
#mavera .btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#mavera .btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
#mavera .btn:active {
    transform: translateY(0) scale(0.97);
    filter: brightness(0.98);
}
#mavera .btn:disabled,
#mavera .btn.disabled {
    opacity: 0.7;
    cursor: progress;
    transform: none;
}

/* İkon butonları (menu toggle, right_icon_toggle_btn vb.) için de aynı dokunuş */
#mavera .btn-icon,
#mavera .ls-toggle-btn,
#mavera .navbar-right .navbar-nav > li > a {
    transition: transform 0.15s ease, opacity 0.15s ease;
}
#mavera .btn-icon:hover,
#mavera .ls-toggle-btn:hover,
#mavera .navbar-right .navbar-nav > li > a:hover {
    transform: translateY(-1px);
}
#mavera .btn-icon:active,
#mavera .ls-toggle-btn:active,
#mavera .navbar-right .navbar-nav > li > a:active {
    transform: scale(0.92);
}

/* Form alanlarına odaklanınca (focus) yumuşak, tema rengine uygun bir halka */
#mavera .form-control:focus {
    border-color: #e31f1c;
    box-shadow: 0 0 0 3px rgba(227, 31, 28, 0.12);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* --- 6) Loading ikonu - sade spin'in arkasına yumuşak bir "nabız" halkası --- */
#mavera .page-loader-wrapper .loader {
    position: relative;
    display: inline-block;
}
#mavera .page-loader-wrapper .loader:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-radius: 50%;
    background: rgba(227, 31, 28, 0.10);
    animation: mvrLoaderPulse 1.6s ease-out infinite;
    z-index: 0;
}
#mavera .page-loader-wrapper .loader img {
    position: relative;
    z-index: 1;
}
@keyframes mvrLoaderPulse {
    0%   { transform: scale(0.55); opacity: 0.9; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* --- 7) Mobilde dokunma geri bildirimi (native app hissi) ---
   "hover: none" = fare değil parmakla kullanılan ekranlar (telefon/tablet). */
@media (hover: none) {
    #mavera .sidebar .menu .list > li.main-li > a:active {
        background: rgba(0, 0, 0, 0.045);
    }
    #mavera .btn:active {
        filter: brightness(0.95);
    }
}

/* --- 8) Dropdown/menu açılışlarına küçük bir "pop" hissi --- */
@keyframes mvrDropdownPop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#mavera .dropdown-menu.show,
#mavera .dropdown-menu.slideUp2 {
    animation: mvrDropdownPop 0.18s ease-out;
}