/* ============================================================================
   Edutech gorsel dili - OLCU KATMANI
   ----------------------------------------------------------------------------
   Kaynak: docs/EDUTECH_GORSEL_OZELLIKLER.md
   Kapsam: tipografi olcegi, nav menu olculeri, satir yukseklikleri, yogunluk
           sistemi, yuvarlaklik olcegi, bilesen boyutlari.

   RENK UYGULANMAZ. Doküman renk paletleri (str/edu/landing) bilerek disarida
   birakildi; projenin mevcut renk semasi korunur. Yapisal olarak bir cizgiye
   ihtiyac duyulan yerlerde notr gri (rgba(128,128,128,...)) kullanildi; bu
   hem acik hem koyu zeminde okunur ve kaynak projenin kimlik rengi degildir.
   Vurgu gerektiren yerlerde `currentColor` kullanilir, boylece mevcut tema
   rengi neyse ona uyar.

   YUKLEME SIRASI: site.css ve DepoSmart.styles.css'ten SONRA (bkz. _Host.cshtml)
   ============================================================================ */

:root {
    /* --- Yuvarlaklik olcegi (§8.1) --- */
    --em-radius-pill: 999px;
    --em-radius-xs: 6px;
    --em-radius-sm: 13px;
    --em-radius-md: 18px;
    --em-radius-lg: 22px;
    --em-radius-xl: 26px;

    /* --- Kabuk olculeri (§5.2) --- */
    --em-sidebar-width: 250px;
    --em-content-padding: 25px;
    --em-topbar-padding-y: 12px;
    --em-topbar-padding-x: 25px;

    /* --- Nav olculeri (§6.3) --- */
    --em-nav-link-padding: 12px 25px;
    --em-nav-category-padding: 14px 25px;
    --em-nav-category-min-height: 56px;
    --em-nav-submenu-link-padding: 8px 15px;
    --em-nav-group-label-padding: 10px 25px 4px;

    /* --- Yapisal cizgiler (notr, kimlik rengi degil) --- */
    --em-line: rgba(128, 128, 128, .22);
    --em-line-soft: rgba(128, 128, 128, .13);
    --em-surface-soft: rgba(128, 128, 128, .05);
    --em-surface-hover: rgba(128, 128, 128, .10);

    /* --- Kapsayici genislikleri (§7.4) --- */
    --em-container-narrow: min(1080px, calc(100% - 28px));
    --em-container-wide: min(1180px, calc(100vw - 48px));
}

/* ============================================================================
   1) TIPOGRAFI IMZASI (§4.2, §12.1/6, §13)
   "Kucuk metin = kalin metin": <=12px metinlerde agirlik 800-900 + harf araligi
   acilir. Projenin en belirgin tipografik imzasidir.
   ============================================================================ */

.label-micro,
.em-eyebrow {
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.em-meta-label {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Baslik olcegi - negatif harf araligi buyuk basliklarda tutarli (§4.4) */
.em-h1 { font-size: clamp(1.55rem, 2.4vw, 2.35rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
.em-h2 { font-size: clamp(19px, 1.8vw, 25px);       font-weight: 800; line-height: 1.2; }
.em-h3 { font-size: 17px; font-weight: 800; }
.em-h4 { font-size: 15px; font-weight: 800; }

/* Panel / kart basligi (§4.2) */
.em-panel-title { font-size: 16px; font-weight: 800; }

/* KPI (§4.2, §4.3) */
.em-kpi-value { font-size: 1.55rem; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.em-kpi-label { font-size: .69rem; }

/* ============================================================================
   2) NAV MENU (§6.1 yapi, §6.3 olculer)
   ----------------------------------------------------------------------------
   3 seviyeli akordiyon:
     .nav-item                       -> duz link
     .nav-item.nav-category          -> akordiyon bandi (button + chevron)
       ul.sub-menu.category-submenu
         li.nav-group-title          -> tiklanamaz alt grup etiketi
         li.nav-item                 -> NavLink, madde isaretli
   ============================================================================ */

.sidebar .nav,
.nav-menu-items .nav {
    padding: 10px 0;
    list-style: none;
    margin: 0;
}

/* --- Duz link --- */
.nav-menu-items .nav-item > .nav-link,
.nav-menu-items .nav-item > a.nav-link {
    padding: var(--em-nav-link-padding);
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    font-size: calc(0.9rem - 2px);   /* ~12.4px (§6.3) */
    font-weight: 600;
    border-radius: 0;
    transition: background .25s ease;
}

.nav-menu-items .nav-item > .nav-link > .bi,
.nav-menu-items .nav-item > .nav-link > .mdi,
.nav-menu-items .nav-item > .nav-link > .ti,
.nav-menu-items .nav-item > .nav-link > .fa,
.nav-menu-items .nav-item > .nav-link > .ri,
.nav-menu-items .nav-item > .nav-link > .oi,
.nav-menu-items .nav-item > .nav-link > [class^="icon-"] {
    font-size: 1.125rem;
    margin-right: 12px;
    line-height: 1;
    width: auto;
}

/* --- Kategori bandi --- */
.nav-menu-items .nav-category {
    border-top: 1px solid var(--em-line-soft);
    border-bottom: 1px solid var(--em-line-soft);
    background: var(--em-surface-soft);
}

.nav-menu-items .nav-accordion-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--em-nav-category-padding);
    min-height: var(--em-nav-category-min-height);
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    text-transform: capitalize;
    letter-spacing: .6px;
    transition: background .25s ease;
}

.nav-menu-items .nav-accordion-toggle:hover,
.nav-menu-items .nav-category.is-open .nav-accordion-toggle {
    background: var(--em-surface-hover);
}

.nav-menu-items .nav-accordion-toggle > .bi,
.nav-menu-items .nav-accordion-toggle > .mdi,
.nav-menu-items .nav-accordion-toggle > .ti,
.nav-menu-items .nav-accordion-toggle > .fa,
.nav-menu-items .nav-accordion-toggle > .ri,
.nav-menu-items .nav-accordion-toggle > .oi,
.nav-menu-items .nav-accordion-toggle > [class^="icon-"] {
    font-size: 1.05rem;
    margin-right: 12px;
    opacity: .95;
    width: auto;
}

.nav-menu-items .nav-category-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .7px;
    opacity: .95;
}

.nav-menu-items .menu-arrow {
    font-size: 1rem;
    margin-left: auto;
    transition: transform .2s ease;
}

.nav-menu-items .nav-category.is-open .menu-arrow {
    transform: rotate(90deg);
}

/* --- Alt menu --- */
.nav-menu-items .sub-menu {
    padding: 5px 0 10px 2ch;
    margin: 0;
    list-style: none;
    background: var(--em-surface-soft);
}

.nav-menu-items .sub-menu .nav-item > .nav-link {
    position: relative;
    padding: var(--em-nav-submenu-link-padding);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Madde isareti - 5px daire, rengi metinden alir */
.nav-menu-items .sub-menu .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .65;
}

/* --- Alt grup etiketi --- */
.nav-menu-items .nav-group-title {
    padding: var(--em-nav-group-label-padding);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: capitalize;
    opacity: .62;
    pointer-events: none;
    list-style: none;
}

.nav-menu-items .category-submenu .nav-group-title {
    padding: 10px 0 4px;
}

.nav-menu-items .category-submenu .nav-group-title::before {
    display: none;
}

/* --- Aktif durum: sol kenar isik cubugu (§6.3) --- */
.nav-menu-items .nav-item > .nav-link.active {
    box-shadow: inset 3px 0 0 currentColor;
}

/* --- Sidebar kaydirma cubugu (§5.2) --- */
.nav-menu-items {
    scrollbar-width: thin;
}

.nav-menu-items::-webkit-scrollbar { width: 4px; }
.nav-menu-items::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, .35);
    border-radius: 2px;
}

/* ============================================================================
   3) UST SERIT VE ICERIK ALANI (§5.2)
   ============================================================================ */

.em-topbar {
    padding: var(--em-topbar-padding-y) var(--em-topbar-padding-x);
    border-bottom: 1px solid var(--em-line-soft);
}

.em-topbar-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.em-content {
    padding: var(--em-content-padding);
}

/* ============================================================================
   4) YOGUNLUK SISTEMI (§7.5)
   Ekrana daha cok satir sigdirmak icin.
   ============================================================================ */

.compact-workspace-page {
    min-height: calc(100dvh - 6.5rem);
}

.compact-workspace-page .row {
    --bs-gutter-y: 0.75rem;
}

.compact-workspace-page .card-header,
.compact-workspace-page .card-body,
.compact-workspace-page .card-footer {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.compact-workspace-page .alert {
    margin-bottom: .75rem;
    padding: .6rem .9rem;
}

.compact-workspace-page .table-responsive,
.compact-workspace-page .viewport-scroll-region,
.compact-workspace-page .list-group.compact-scroll {
    max-height: calc(100dvh - 15rem);
    overflow: auto;
}

@media (max-width: 991.98px) {
    .compact-workspace-page .table-responsive,
    .compact-workspace-page .viewport-scroll-region,
    .compact-workspace-page .list-group.compact-scroll {
        max-height: calc(100dvh - 18rem);
    }
}

.compact-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1rem;
}

/* ============================================================================
   5) TABLO SATIR YUKSEKLIKLERI (§7.5)
   ----------------------------------------------------------------------------
   ONEMLI: Bootstrap'in `.table > :not(caption) > * > *` kurali dolguyu ezer,
   bu yuzden secicilerin `.table` ile birlikte ve ayni ozgullukte yazilmasi
   sart. (Dokumandaki "sik yapilan hatalar" maddesi.)
   ============================================================================ */

/* --- Yogun liste --- */
.table.compact-data-table {
    font-size: .72rem;
    line-height: 1.2;
}

.table.compact-data-table > :not(caption) > * > * {
    padding: .2rem .4rem;
}

.table.compact-data-table .badge { font-size: .62rem; }

.table.compact-data-table .btn-sm {
    font-size: .7rem;
    padding: .1rem .35rem;
}

.table.compact-data-table .gap-2 { gap: .25rem !important; }

/* --- Standart satir yuksekligi (referans) --- */
.table.standard-row-table {
    font-size: .88rem;
}

.table.standard-row-table > :not(caption) > * > * {
    padding: .5rem .5rem;
}

.table.standard-row-table .badge { font-size: .7rem; }

/* --- Satir ayrimi belirgin tablo --- */
.table.row-separated-table > tbody > tr {
    border-bottom: 2px solid rgba(128, 128, 128, .28);
}

.table.row-separated-table > tbody > tr > * {
    position: relative;
}

/* Satir ustunde 6px degrade golge - ayrimi derinlestirir */
.table.row-separated-table > tbody > tr + tr > td::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(128, 128, 128, .10), transparent);
}

/* --- Tablo basligi imzasi (§8.7): 11px / w900 / harf araligi / UPPERCASE --- */
.table.em-head-micro > thead th,
.em-table-head-micro > thead th {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Sticky baslik OPAK olmak zorunda; yoksa icerik basligin icinden gorunur.
   Bilerek OPT-IN: genis bir `.table-responsive .sticky-top` kurali mevcut
   sayfalarin bilincli arka planlarini ezerdi. Zemin, Bootstrap'in kendi
   degiskeninden alinir - Edutech paletinden bir renk getirilmez. */
.em-sticky-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg, #fff);
}

/* ============================================================================
   6) BILESEN OLCULERI (§8.2 - §8.5)
   ============================================================================ */

/* --- Rozet / chip / pill: hepsi tam yuvarlak (§8.4) --- */
.em-status,
.em-chip,
.em-filter-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--em-radius-pill);
    white-space: nowrap;
}

.em-status {
    padding: 6px 11px;
    font-size: 11.5px;
    font-weight: 900;
    gap: 6px;
}

.em-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.em-chip {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 800;
}

.em-filter-pill {
    padding: 6px 9px;
    font-size: 10.5px;
    font-weight: 900;
}

.em-item-badge {
    padding: 2px 7px;
    font-size: 9.8px;
    font-weight: 800;
    line-height: 1.35;
    border-radius: var(--em-radius-pill);
}

/* --- Ikon kutulari / avatarlar (§8.5) --- */
.em-avatar    { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.em-avatar-sm { width: 36px; height: 36px; }
.em-avatar-xs { width: 28px; height: 28px; }

.em-icon-box    { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.em-icon-box-sm { width: 32px; height: 32px; border-radius: 10px; }
.em-icon-box-xs { width: 28px; height: 28px; border-radius: 9px; }

/* --- Ilerleme cubugu (§8.7) --- */
.em-progress {
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
}

/* --- Kart (§8.3) --- */
.em-card {
    border-radius: var(--em-radius-lg);
}

.em-card-body { padding: 20px; }
.em-card-title { font-size: 1.05rem; font-weight: 700; }

/* --- Panel basligi satiri --- */
.em-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* ============================================================================
   7) HAREKET (§9)
   ============================================================================ */

.em-hover-lift {
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.em-hover-lift:hover { transform: translateY(-1px); }
.em-hover-lift-2:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .em-hover-lift,
    .em-hover-lift-2,
    .nav-menu-items .menu-arrow,
    .nav-menu-items .nav-accordion-toggle {
        transition: none !important;
    }

    .em-hover-lift:hover,
    .em-hover-lift-2:hover { transform: none; }
}