/* Site geneli düzen: base.html içindeki satır içi stilden taşındı; tarayıcı önbelleğe alır. */
    /* Eski statik CSS sürümündeki navbar alt çizgisini de kaldırır. */
    .app-navbar .hori-selector::after {
        content: none !important;
        display: none !important;
    }
    /* Sayfanın tam yüksekliğini kullanmak için */
    html, body {
        height: 100%;
        margin: 0;
    }
    /* Body'yi flex konteyner haline getiriyoruz */
    body {
        display: flex;
        flex-direction: column;
    }
    /* İçerik alanı esneyerek footer'ı aşağı iter */
    .content {
        flex: 1;
    }






      /* MathLive sanal klavyenin yüksekliğini küçült */
      /* 1) Klavyeyi tam olarak sağa yasla, soldan otomatik kaldır */
.ML__keyboard {
  position: fixed !important;
  bottom: 0;
  right: 0 !important;
  left: auto !important;

  /* 2) Genişlik: Bildschirm yüksekliğinin %80’i kadar (80vh) */
  /* width: min(100%, 80vh);   ✔ Eğer tarayıcı desteği varsa */
  width: 80vh !important;
  max-height: 40vh;          /* yükseklik sınırı */
  overflow-y: auto;

  background: #fff;

  /* 3) Sınırı üstten değil soldan çiz */
  border-top: none !important;
  border-left: 1px solid #ddd;

  /* 4) Gölgeyi yukarı yerine sola ver */
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);

  font-size: 0.9rem;
  z-index: 2000 !important;
}

/* 5) İçerik paneli klavye açıldığında sağa taşınsın */
body.keyboard-open {
  padding-bottom: 0 !important;
  padding-right: 80vh !important;  /* width ile eşleşmeli */
}

/* List styling for sidebars and data lists */
.list-group-item {
    margin-bottom: .5rem;
}
.list-group-item.active {
    background: linear-gradient(90deg, #0d6efd 0%, #6610f2 100%);
    border: none;
}

.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: .75rem 0;
    background: rgb(129 180 255 / 10%) !important;
    backdrop-filter: blur(2px);
    transition: background-color .28s ease, backdrop-filter .28s ease;
}

:root {
    --app-shell-gap: 1.5rem;
}

@media (max-width: 768px) {
    :root {
        --app-shell-gap: .75rem;
    }

    /* Bootstrap row'larinin negatif kenar boslugu (gutter / 2) sayfa
       kenar boslugunu asip yatay kaydirma olusturmasin. clip, hidden'in
       aksine kaydirma kabi olusturmaz; sticky ogeler bozulmaz. */
    .app-content-shell {
        overflow-x: clip;
    }

    /* Kart ici (px-4) ve gri form paneli (p-4 bg-light) dolgulari ust uste
       binince icerik her yandan ~50px iceride kaliyordu; telefonda
       daraltilir. Test Olustur, Hizli Test, Soru Ekle, Soru Listesi ve
       Sinav Olustur sayfalarindaki ortak kalip. */
    .app-content-shell :is(.card-body, .card-header).px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .app-content-shell .card-body .p-4.rounded.shadow-sm.bg-light {
        padding: 0.5rem !important;
    }
}

.app-content-shell {
    max-width: min(1320px, calc(100% - var(--app-shell-gap)));
    margin-left: auto;
    margin-right: auto;
}

.app-content-shell > .container,
.app-content-shell > .container-fluid {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.app-navbar .navbar-shell {
    max-width: min(1320px, calc(100% - var(--app-shell-gap)));
    margin: 0 auto;
    border-radius: 1rem;
    background: rgb(129 180 255 / 16%);
    border: 1px solid rgb(129 180 255 / 36%);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
    padding-top: .5rem;
    padding-bottom: .5rem;
    transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* Logo kutusunun solundaki boşluk, üst ve alt boşlukla (.5rem) aynı olsun. */
.app-navbar .navbar-shell.container-fluid {
    padding-left: .5rem !important;
}

.app-navbar.is-scrolled {
    background: rgb(129 180 255 / 18%) !important;
    backdrop-filter: blur(8px);
}

.app-navbar.is-scrolled .navbar-shell {
    background: rgb(129 180 255 / 26%);
    border-color: rgb(129 180 255 / 42%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.app-navbar .navbar-brand {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 1.08rem;
    letter-spacing: .01em;
    color: #1f2937;
    padding: .35rem .7rem .35rem .4rem;
    border-radius: .75rem;
    background: rgb(129 180 255 / 19%);
    border: 1px solid rgb(129 180 255 / 36%);
    transition: background-color .28s ease, transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

@media (min-width: 1200px) {
    .app-navbar .navbar-brand {
        margin-right: .35rem;
    }
}

.app-navbar .navbar-brand:hover {
    background: rgb(129 180 255 / 22%);
    border-color: rgb(129 180 255 / 42%);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

body.page-home .app-navbar .navbar-brand:hover {
    background: rgb(129 180 255 / 14%);
    border-color: rgb(129 180 255 / 36%);
    transform: none;
    box-shadow: none;
}


.app-navbar .brand-logo-wrap {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .95rem;
    padding: .22rem;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-navbar .brand-logo {
    width: 100%;
    height: 100%;
    border-radius: .75rem;
    object-fit: cover;
}

/* Koyu temada zemin kalktığı için lacivert "?" kaybolmasın: logoya ince açık hale */
.app-navbar[data-bs-theme="dark"] .brand-logo {
    filter: drop-shadow(0 0 1px rgb(255 255 255 / 85%)) drop-shadow(0 0 3px rgb(255 255 255 / 45%));
}

.app-navbar .brand-title {
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.app-navbar .nav-link {
    border-radius: .75rem;
    color: #475569;
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.4;
    padding: .5rem .4rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease;
}

.app-navbar .nav-link:hover {
    color: #0f172a;
    background: rgb(129 180 255 / 28%);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    text-decoration: none;
}

.app-navbar .nav-link.active {
    color: #0f172a;
    background: rgb(129 180 255 / 44%);
    box-shadow: inset 0 0 0 1px rgb(95 148 230 / 45%);
}

.app-navbar .btn-link.nav-link {
    text-decoration: none;
}

/* Masaüstünde vurguyu yalnızca hareketli "lavalamp" (.hori-selector) verir. Bağlantıların kendi
   hover/aktif arka planı, gölgesi ve kayması hem arkada gri bir iz bırakıyor hem de seçicinin
   ölçtüğü konumu bozuyordu. */
@media (min-width: 1200px) {
    .app-navbar .nav-link:hover,
    .app-navbar .nav-link.active,
    .app-navbar[data-bs-theme="dark"] .nav-link:hover,
    .app-navbar[data-bs-theme="dark"] .nav-link.active {
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .app-navbar .navbar-brand:hover {
        background: rgb(129 180 255 / 14%);
        border-color: rgb(129 180 255 / 36%);
        box-shadow: none;
        transform: none;
    }
}

.app-navbar .navbar-nav {
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.app-navbar .nav-link .bi {
    flex-shrink: 0;
}

/* Hesap bağlantıları navbar zeminine uyumlu ortak bir kartta tutulur. */
.app-navbar .navbar-account-card {
    flex-wrap: nowrap;
    gap: .1rem;
    padding: .25rem;
    border: 1px solid rgb(129 180 255 / 36%);
    border-radius: .9rem;
    background: rgb(129 180 255 / 14%);
    box-shadow: inset 0 0 14px rgb(96 165 250 / 18%), inset 0 0 3px rgb(96 165 250 / 24%), 0 2px 8px rgb(15 23 42 / 5%);
}

.app-navbar .navbar-account-card .nav-link {
    white-space: nowrap;
}

.app-navbar .navbar-account-card--platform {
    flex-wrap: nowrap;
    gap: .1rem;
    padding: .15rem .2rem;
}

.app-navbar .navbar-account-card--platform .nav-link {
    font-size: .8125rem;
}

.app-navbar[data-bs-theme="dark"] .navbar-account-card {
    box-shadow: inset 0 0 16px rgb(96 165 250 / 20%), inset 0 0 3px rgb(147 197 253 / 28%), 0 2px 8px rgb(0 0 0 / 15%);
}

@media (max-width: 1199.98px) {
    .app-navbar .navbar-account-card {
        margin-top: .75rem;
        width: 100%;
        overflow: visible;
    }
}

@media (max-width: 1199.98px) {
    .app-navbar .navbar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem;
        overflow: visible;
        max-width: 100%;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .app-navbar .navbar-nav .nav-item {
        min-width: 0;
    }

    .app-navbar .navbar-nav .nav-link {
        width: 100%;
        min-height: 44px;
        padding: .6rem .75rem;
        font-size: .875rem;
        justify-content: flex-start;
        white-space: normal;
        text-align: left;
    }

    .app-navbar .navbar-nav .nav-link:hover {
        transform: none;
        box-shadow: none;
    }

    .app-navbar .navbar-nav form {
        display: block !important;
        width: 100%;
    }

    .app-navbar .navbar-toggler {
        flex-shrink: 0;
        padding: .5rem;
        border-color: rgb(129 180 255 / 36%);
        border-radius: .75rem;
    }

    /* Menü açılır-kapanır (hamburger) modda gezinen "lavalamp" gösterilmez: dokunmatikte hover yok,
       kapalı menüdeki gizli bağlantıya sıfır boyutla gidip köşeden uçarak geliyordu. Aktif sayfayı
       bağlantının kendi arka planı gösterir. */
    .app-navbar .hori-selector {
        display: none;
    }

    /* Aktif bağlantı, masaüstündeki seçicinin hafif dolgusu ve ince kenarlığını kullanır. */
    .app-navbar .nav-link.active {
        background: rgb(129 180 255 / 23%);
        box-shadow: inset 0 0 0 1px rgb(95 148 230 / 30%);
    }

    .app-navbar[data-bs-theme="dark"] .nav-link.active {
        background: rgb(164 200 255 / 15%);
        box-shadow: inset 0 0 0 1px rgb(164 200 255 / 28%);
    }

    .app-navbar .navbar-brand {
        font-size: 1rem;
        gap: .3rem;
        padding: .3rem .55rem .3rem .35rem;
    }

    .app-navbar .brand-logo-wrap {
        width: 2.8rem;
        height: 2.8rem;
    }
    .app-navbar .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        min-width: 0;
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px solid rgba(13, 35, 67, 0.08);
    }

    /* Yükseklik animasyonu düşük güçlü telefonlarda her karede yeniden yerleşim ve bulanıklık
       hesabı yaptırıp menüyü kare kare açıyordu. Menü anında açılır; yalnız ekran kartının
       işlediği kısa bir saydamlık geçişi kalır. */
    .app-navbar .navbar-collapse.collapsing {
        transition: none;
    }

    /* Açılış animasyonu yalnız saydamlık, kaydırma ve ölçek kullanır; bunları ekran kartı işler,
       sayfa yerleşimi yeniden hesaplanmaz. Bağlantılar sırayla belirir. */
    .app-navbar .navbar-collapse.show {
        animation: app-nav-open .24s cubic-bezier(.2, .8, .2, 1);
        transform-origin: top center;
    }

    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > *,
    .app-navbar .navbar-collapse.show .navbar-account-card {
        animation: app-nav-item .28s cubic-bezier(.2, .8, .2, 1) both;
    }

    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(2) { animation-delay: 0.025s; }
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(3) { animation-delay: 0.050s; }
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(4) { animation-delay: 0.075s; }
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(5) { animation-delay: 0.100s; }
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(6) { animation-delay: 0.125s; }
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(7) { animation-delay: 0.150s; }
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(8) { animation-delay: 0.175s; }
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(9) { animation-delay: 0.200s; }
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > :nth-child(10) { animation-delay: 0.225s; }
    .app-navbar .navbar-collapse.show .navbar-account-card { animation-delay: .12s; }

    .app-navbar.is-menu-open,
    .app-navbar.is-menu-open.is-scrolled {
        transition: none;
        backdrop-filter: none;
        background: var(--bs-body-bg) !important;
    }

    .app-navbar .navbar-collapse.show {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding-bottom: .25rem;
    }
}

/* transform yerine translate/scale: bazı menülerde transform !important ile sabitleniyor. */
@keyframes app-nav-open {
    from { opacity: 0; translate: 0 -10px; scale: .985; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes app-nav-item {
    from { opacity: 0; translate: 0 -6px; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .app-navbar .navbar-collapse.show,
    .app-navbar .navbar-collapse.show .navbar-nav:not(.navbar-account-card) > *,
    .app-navbar .navbar-collapse.show .navbar-account-card,
    .app-navbar .dropdown-menu.show { animation: none; }
}