html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #1a1f36 !important;
    margin: 0;
    padding: 0;
}

/* MudBlazor bileşenleri (MudCard, MudTable vb.) için açık arka plan */
.mud-paper { background-color: #ffffff; }

a, .btn-link { color: #006bb7; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }
.darker-border-checkbox.form-check-input { border-color: #929292; }
h1:focus { outline: none; }

/* =====================================================================
   ORACLE FUSION ERP DESIGN SYSTEM
   ===================================================================== */

/* --- Sol ray (dikey navigasyon) -------------------------------------------
   Ust cubuk kalkti; navigasyon solda dikey bir ray. Dinlenme halinde yalnizca
   ikonlar gorunur (--of-rail-w), fare degince genisler (--of-rail-wo) ve alt
   menuler rayin saginda IKINCI SUTUN olarak acilir.

   Acilma saf CSS :hover ile calisir, JS yok. Panel rayin DOM cocugu oldugu
   icin panelin uzerindeyken :hover rayda kalmaya devam eder, ray acik durur.

   KRITIK: ray position:fixed ile icerigin USTUNE biner; .of-content-area
   yalnizca KAPALI ray genisligi kadar bosluk birakir (margin-left). Boylece
   her fare hareketinde tablo sutunlari yeniden hizalanmaz, icerik ziplamaz.
   Ekranlarimiz yogun tablo oldugu icin bu kural bozulmamali.

   z-index 100: sticky filtre cubugunun (20) ustunde, modal overlay'in (1000)
   altinda kalir. */
:root {
    --of-rail-w:       56px;   /* dinlenme: yalnizca ikon seridi */
    --of-rail-wo:     210px;   /* acik: ikon + etiket */
    --of-rail-panel-w: 236px;  /* ikinci sutun genisligi */
}

.of-rail {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 100;
    width: var(--of-rail-w);
    transition: width .26s cubic-bezier(.22,.9,.28,1);
}
/* Ray iki durumda acik: fare uzerindeyken, VEYA tiklanarak acilmis bir
   panel varken (panel acikken ray buzulup panelin altindan kaymasin). */
.of-rail:hover,
.of-rail:has(.of-rail-group.open) { width: var(--of-rail-wo); }

/* overflow:hidden YOK — ikinci sutun panel bu agacin cocugu, clip edilirse
   hic gorunmez. Etiket kirpmasi satir bazinda (.of-rail-item) yapiliyor. */
.of-rail-frame {
    height: 100%; width: 100%;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #2e4a6e 0%, #1e3352 100%);
    border-right: 1px solid rgba(255,255,255,0.18);
    padding: 8px 6px;
    box-shadow: 2px 0 6px rgba(0,0,0,0.30);
    box-sizing: border-box;
}

/* Etiketler yalnizca ray acikken; genislik animasyonuyla birlikte solarlar.
   Sigmayan etiket text-overflow:ellipsis ile "…" olur, sert kesilme olmaz. */
.of-rail-label {
    opacity: 0;
    transition: opacity .18s;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.of-rail:hover .of-rail-label,
.of-rail:has(.of-rail-group.open) .of-rail-label { opacity: 1; }

/* ---- Rayin tepesi: kullanici + depo + aktif sayfa ---- */
.of-rail-head {
    flex: none;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.of-rail-ident {
    display: flex; align-items: center; gap: 10px;
    padding: 0 4px 0 5px;
    overflow: hidden; white-space: nowrap;
}
.of-rail-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg,#5a9fd4,#2e6096);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    flex-shrink: 0; letter-spacing: .5px;
}
.of-rail-ident-text { min-width: 0; }
.of-rail-ident-name {
    font-size: 12.5px; font-weight: 700; color: #fff;
    overflow: hidden; text-overflow: ellipsis;
}
.of-rail-ident-depot {
    font-size: 10.5px; color: #8aadd4;
    overflow: hidden; text-overflow: ellipsis;
}
/* ---- Modul listesi ----
   overflow YOK (bkz. .of-rail-frame). Ust seviyede 5 madde var, scroll gerekmez. */
.of-rail-nav {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 3px;
}

/* Sol bosluk her iki durumda da 13px: kapali rayda ikonu 44px'lik satirin tam
   ortasina oturtan deger bu (6px frame padding + 13 + 18/2 = 28 = 56/2).
   Acikken farkli bir deger verilirse ikonlar panel acilirken yana kayar. */
.of-rail-item {
    /* justify-content SART: <button> icin tarayicinin kendi varsayilani 'center'.
       Yazilmazsa <a> satirlari sola yaslanir ama Cikis butonu ortalanir. */
    display: flex; align-items: center; justify-content: flex-start;
    height: 40px; width: 100%;
    gap: 12px; padding: 0 10px 0 13px;
    border-radius: 6px;
    overflow: hidden; white-space: nowrap;
    color: rgba(255,255,255,0.80);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    background: none; border: 0;
    font-family: inherit; text-align: left;
    cursor: pointer; box-sizing: border-box;
    transition: background .16s, color .16s;
}
.of-rail-item > .bi:first-child {
    font-size: 17px; width: 18px; flex: none; text-align: center;
}
.of-rail-item:hover { background: rgba(255,255,255,0.10); color: #fff; }
.of-rail-item.active {
    background: rgba(90,159,212,0.26);
    color: #fff;
    box-shadow: inset 3px 0 0 #5a9fd4;
}
.of-rail-caret {
    margin-left: auto; font-size: 10px;
    opacity: 0; transition: opacity .18s, transform .18s;
}
.of-rail:hover .of-rail-caret,
.of-rail:has(.of-rail-group.open) .of-rail-caret { opacity: .45; }
/* Acik grubun oku asagi doner — hangi panelin acik oldugu ray kapaliyken de belli olsun. */
.of-rail-group.open .of-rail-caret { opacity: .9; transform: rotate(90deg); }

/* ---- Ikinci sutun panel ----
   TIKLAMA ile acilir, hover ile DEGIL. Grup basligina tiklanir -> paneli acilir,
   tekrar tiklanirsa kapanir; baska bir gruba tiklanirsa panel icerigi degisir.
   Acik grubun .open sinifini Blazor verir (MainLayout._openGroup); disariya
   tiklama .of-rail-backdrop ile yakalanir.

   left, rayin genisligiyle AYNI sure ve egri ile animasyon yapar; boylece ray
   acilirken panel rayin sag kenarina yapisik kalir, arada bosluk olusmaz. */
.of-rail-group { position: relative; }
.of-rail-panel {
    position: fixed;
    top: 0; bottom: 0;
    left: var(--of-rail-w);
    width: var(--of-rail-panel-w);
    display: flex; flex-direction: column;
    /* ACIK PANEL: ray koyu kalir, ikinci sutun sayfa rengine gecer. Koyu/acik
       gecisi rayi da paneli de netlestirir; bolum basliklari sayfa tablolarindaki
       .of-panel-header gradyaninin aynisi olur, panel icerigin devami gibi okunur.
       (Eski: #22395c koyu panel + ondan da koyu #1a2c48 baslik seritleri —
       seritler paneli dilimliyor, ray ile panel ayni tonda kaliyordu.) */
    background: #f7f9fc;
    border-right: 1px solid #b8c4d4;
    box-shadow: 6px 0 18px rgba(30,51,82,0.18);

    opacity: 0; visibility: hidden;
    transition: left .26s cubic-bezier(.22,.9,.28,1),
                opacity .16s linear 0s,
                visibility 0s linear .16s;
}
/* Panel her zaman rayin sag kenarina yapisik durur — ray ister hover, ister
   acik panel yuzunden genislemis olsun ayni degeri kullanir. */
.of-rail:hover .of-rail-panel,
.of-rail:has(.of-rail-group.open) .of-rail-panel { left: var(--of-rail-wo); }
.of-rail-group.open > .of-rail-panel {
    /* z-index 2: acilan panel HER ZAMAN eskisinin ustunde boyansin. DOM sirasina
       birakilirsa yukari dogru gecislerde (Islemler -> Ana Veriler) eski panel
       yeninin ustunde kalir. */
    z-index: 2;
    opacity: 1; visibility: visible;
    transition: left .26s cubic-bezier(.22,.9,.28,1),
                opacity .12s linear 0s,
                visibility 0s linear 0s;
}
/* GRUPLAR ARASI GECIS — "panel kapanip yeniden aciliyor" hatasinin cozumu.
   Eski panel aninda yok edilirse, yeni panel opacity 0'dan gelirken arada
   panelin olmadigi bir an olusur ve goz kirpmasi gibi gorunur. Bunun yerine
   eski panel .16s boyunca TAM OPAK kalir; yeni panel (z-index 2) onun ustunde
   .12s'de tamamen goruntuye girer ve eskisini bastan sona ortter. Eski panel
   ancak yenisi tamamen opak olduktan sonra kaldirilir — kullanici tek bir
   panelin icerigi degismis gibi gorur.
   Not: capraz solma (ikisinin ayni anda yari saydam olmasi) bilerek yapilmadi;
   o durumda altta kalan icerik sizar ve yine parlama olur. */
.of-rail-nav:has(> .of-rail-group.open) .of-rail-group:not(.open) > .of-rail-panel {
    opacity: 0; visibility: hidden;
    transition: opacity 0s linear .16s, visibility 0s linear .16s;
}

/* Acik grubun basligi secili gorunur — hangi panelin acik oldugu belli olsun. */
.of-rail-group.open > .of-rail-item { background: rgba(255,255,255,0.10); color: #fff; }

/* Panel acikken disariya tiklamak paneli kapatir. Ray (z-index 100) ve panel
   bunun USTUNDE kaldigi icin menu tiklamalari backdrop'a takilmaz. */
.of-rail-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; }

.of-rail-panel-body {
    flex: 1; min-height: 0; overflow-y: auto;
    /* Ust dolgu YOK: panel basligi kaldirildi, ilk bolum seridi panelin
       tepesine yaslanip basligin yerini alsin. */
    padding: 0 8px 12px;
}
.of-rail-panel-item {
    display: block;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12.5px;
    color: #2c3e55;
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .14s, color .14s;
}
.of-rail-panel-item:hover { background: #e9eff7; color: #1e3352; }
.of-rail-panel-item.active {
    background: #dbe9f8; color: #1e3352; font-weight: 700;
    box-shadow: inset 3px 0 0 #3B6FD4;
}
/* Ucuncu seviye (Depo/Personel/Nakliyeci Islemleri) ucan bir katman daha
   acmak yerine panel icinde bolum basligi olarak duzlestirildi. */
/* Bolum ayraci: sayfa tablolarindaki baslik seridiyle (.of-panel-header)
   ayni gradyan ve lacivert yazi — panel, sayfanin devami gibi okunur.
   Negatif yatay margin, govdenin 8px dolgusunu asarak seridi panelin tam
   genisligine yayar; padding-left 20px ise metni madde metinleriyle ayni
   dikey eksende tutar (govde 8px + madde 12px = 20px). */
.of-rail-panel-sec {
    margin: 10px -8px 4px;
    padding: 6px 12px 6px 20px;
    background: linear-gradient(180deg, #dce4ee 0%, #ccd6e4 100%);
    border-top: 1px solid #b8c4d4;
    border-bottom: 1px solid #8a9ab0;
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: #1e3352;
}
.of-rail-panel-body > .of-rail-panel-sec:first-child { margin-top: 0; border-top: 0; }
.of-rail-panel-soon {
    display: block; padding: 2px 12px 4px;
    font-size: 11px; color: #8a97a8; font-style: italic;
}
.of-rail-panel-divider {
    height: 1px; background: #dbe3ec; margin: 6px 10px;
}

/* ---- Rayin dibi: canli presence + aktif sayfa + Cikis ---- */
.of-rail-foot {
    flex: none;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
}
/* Aktif sayfa adi — presence ile Cikis arasinda bir alt bilgi satiri.
   Sol bosluk 13px: diger ray satirlarinin ikon sutunuyla ayni eksende baslar.
   Ray kapaliyken yuksekligiyle birlikte kapanir, yoksa 56px'lik ikon seridinde
   anlamsiz bir bosluk birakirdi. */
.of-rail-page {
    height: 0; margin: 0; padding: 0 10px 0 13px;
    font-size: 10px; color: #7f9dc0;
    text-transform: uppercase; letter-spacing: .4px;
    transition: opacity .18s, height .26s, margin .26s;
}
.of-rail:hover .of-rail-page,
.of-rail:has(.of-rail-group.open) .of-rail-page { height: 13px; margin: 4px 0 6px; }
.of-rail-sep {
    flex: none; height: 1px;
    background: rgba(255,255,255,0.18);
    margin: 4px;
}
.of-rail-logout { height: 36px; }
.of-rail-logout:hover { background: rgba(197,60,60,0.30); color: #fff; }

/* DepotPresence ust cubuk icin yatay tasarlanmisti: rayda tam genislikte bir
   satir gibi durur ve panelini yukari-saga acar. */
.of-rail-presence { width: 100%; }
.of-rail-presence .of-presence { width: 100%; }
.of-rail-presence .of-presence-badge {
    width: 100%; justify-content: flex-start;
    gap: 12px; height: 36px;
    padding: 0 10px 0 13px;
    border-radius: 6px;
    border-color: transparent; background: none;
    overflow: hidden; white-space: nowrap;
}
/* Ikon slotu diger ray satirlariyla ayni: 18px, 13px soldan -> merkez 28px.
   Boylece kapali seritte presence, Cikis ve modul ikonlari tek dikey eksende. */
.of-rail-presence .of-presence-badge > .bi {
    width: 18px; flex: none; text-align: center; font-size: 16px;
}
.of-rail-presence .of-presence-label {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.80);
}
.of-rail-presence .of-presence-count {
    margin-left: auto; opacity: 0; transition: opacity .18s;
}
.of-rail:hover .of-rail-presence .of-presence-count,
.of-rail:has(.of-rail-group.open) .of-rail-presence .of-presence-count { opacity: 1; }
.of-rail-presence .of-presence-badge:hover,
.of-rail-presence .of-presence-badge.open { background: rgba(255,255,255,0.12); }
.of-rail-presence .of-presence-panel {
    top: auto; bottom: 0; right: auto;
    left: calc(100% + 10px);
}

.of-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
    transition: background 0.15s;
    color: #c8ddf0;
    font-size: 12px;
}

.of-user-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

.of-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a9fd4, #2e6fa3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.of-app-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #c8ddf0;
    font-size: 16px;
    background: transparent;
    border: none;
    transition: background 0.15s, color 0.15s;
}

.of-app-btn-icon:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* --- Breadcrumb bar --- */
.of-breadcrumb-bar {
    background: #f0f3f7;
    border-bottom: 1px solid #c8d0da;
    padding: 0 16px;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #5a6a7a;
    flex-shrink: 0;
}

.of-breadcrumb-bar a, .of-breadcrumb-bar .of-bc-link {
    color: #2e6ea6;
    text-decoration: none;
    font-weight: 500;
}

.of-breadcrumb-bar a:hover, .of-breadcrumb-bar .of-bc-link:hover { text-decoration: underline; cursor: pointer; }

.of-breadcrumb-bar .of-bc-sep { color: #9aaab8; font-size: 10px; }

.of-breadcrumb-bar .of-bc-current { color: #1e3352; font-weight: 600; }

/* --- Filter bar (filtre alanı) --- */
.of-filter-bar {
    background: #e4eaf2;
    border-bottom: 1px solid #b8c4d4;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.of-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #2c3e55;
    font-weight: 500;
}

.of-field label {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #2c3e55;
    margin: 0;
}

.of-input {
    height: 28px;
    padding: 0 8px;
    border: 1px solid #9bafc5;
    border-radius: 3px;
    font-size: 12px;
    color: #1e3352;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.of-input:focus {
    border-color: #3d7ab5;
    box-shadow: 0 0 0 2px rgba(61,122,181,0.18);
}

.of-input[type="date"] { min-width: 130px; }
.of-input[type="text"], .of-input[type="search"] { min-width: 160px; }

.of-select {
    height: 28px;
    padding: 0 24px 0 8px;
    border: 1px solid #9bafc5;
    border-radius: 3px;
    font-size: 12px;
    color: #1e3352;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a7a9a'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    font-family: inherit;
}

.of-select:focus { border-color: #3d7ab5; box-shadow: 0 0 0 2px rgba(61,122,181,0.18); }

/* --- Custom Select (OfSelect component) --- */
.of-cs-wrap {
    position: relative;
    display: inline-block;
}
.of-cs-btn {
    height: 28px;
    padding: 0 24px 0 8px;
    border: 1px solid #9bafc5;
    border-radius: 3px;
    font-size: 12px;
    color: #1e3352;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a7a9a'/%3E%3C/svg%3E") no-repeat right 8px center;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.of-cs-btn:hover { border-color: #3d7ab5; }
.of-cs-btn.open { border-color: #3d7ab5; box-shadow: 0 0 0 2px rgba(61,122,181,0.18); }
.of-cs-btn:disabled, .of-cs-btn[disabled] { opacity: 0.55; cursor: default; }
.of-cs-overlay {
    position: fixed;
    inset: 0;
    z-index: 449;
    background: transparent;
}
.of-cs-list {
    position: fixed;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #9bafc5;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1100;
    padding: 2px 0;
}
.of-cs-item {
    padding: 5px 10px;
    font-size: 12px;
    color: #1e3352;
    cursor: pointer;
    white-space: nowrap;
}
.of-cs-item:hover { background: #e8f0f8; }
.of-cs-item.selected { background: #daeaf8; font-weight: 600; }

/* Modal alani icinde OfSelect: native of-modal-select ile ayni boyut/gorunum */
.of-modal-field .of-cs-wrap { display: block; width: 100%; }
.of-modal-field .of-cs-btn  {
    width: 100%; height: 32px;
    padding: 0 28px 0 10px;
    font-size: 13px;
    background-position: right 10px center;
}

.of-sep {
    width: 1px;
    height: 20px;
    background: #b0bfcc;
    margin: 0 4px;
    flex-shrink: 0;
}

/* --- Section header (bölüm ayırıcı başlık) --- */
.of-section-header {
    background: #e8edf4;
    border-top: 2px solid #3d7ab5;
    border-bottom: 1px solid #c8d6e8;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #2e4a6e;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* --- Action bar (buton çubuğu) --- */
.of-action-bar {
    background: #f2f4f7;
    border-bottom: none;
    padding: 5px 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Bitişik butonlar arasına otomatik ayıraç — of-sep ile birebir eşit: 8px | sep | 8px */
.of-action-bar > .of-btn + .of-btn {
    position: relative;
    margin-left: 13px;
}
.of-action-bar > .of-btn + .of-btn::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: #b0bfcc;
    pointer-events: none;
}

/* --- Buttons (Oracle Fusion Karma) --- */
.of-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: filter 0.1s, box-shadow 0.1s;
    text-decoration: none;
    letter-spacing: 0.1px;
}

.of-btn i { font-size: 12px; line-height: 1; }

.of-btn:active { filter: brightness(0.88); }

.of-btn:disabled, .of-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary — gradient mavi */
.of-btn-primary {
    background: linear-gradient(to bottom, #5a93cc, #2d6da3);
    border-color: #1a5989;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.12);
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.of-btn-primary:hover {
    background: linear-gradient(to bottom, #4a83bc, #1d5d93);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(0,0,0,0.18);
}

/* Secondary — gradient gri */
.of-btn-secondary {
    background: linear-gradient(to bottom, #fafafa, #e4e8ee);
    border-color: #b0bcc8;
    color: #2e4a6e;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.08);
}
.of-btn-secondary:hover {
    background: linear-gradient(to bottom, #f0f4f8, #d8dfe8);
    border-color: #8aaabb;
}

/* Danger — gradient kırmızı */
.of-btn-danger {
    background: linear-gradient(to bottom, #e06060, #c03030);
    border-color: #a02020;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.12);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.of-btn-danger:hover {
    background: linear-gradient(to bottom, #d05050, #a82828);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.18);
}

/* Save — gradient mavi (primary ile aynı) */
.of-btn-save {
    background: linear-gradient(to bottom, #5a93cc, #2d6da3);
    border-color: #1a5989;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.12);
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.of-btn-save:hover {
    background: linear-gradient(to bottom, #4a83bc, #1d5d93);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(0,0,0,0.18);
}

/* Load / Ara — gradient yeşil */
.of-btn-load {
    background: linear-gradient(to bottom, #52a852, #2e7d32);
    border-color: #1e6326;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.12);
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.of-btn-load:hover {
    background: linear-gradient(to bottom, #429842, #1e6326);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.18);
}

/* Warning / Excel — gradient yeşil */
.of-btn-warning {
    background: linear-gradient(to bottom, #52a852, #2e7d32);
    border-color: #1e6326;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.12);
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.of-btn-warning:hover {
    background: linear-gradient(to bottom, #429842, #1e6326);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.18);
}

/* Lock — gradient mor */
.of-btn-lock {
    background: linear-gradient(to bottom, #8b6fba, #5d4490);
    border-color: #4a3572;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.12);
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.of-btn-lock:hover {
    background: linear-gradient(to bottom, #7b5faa, #4d3880);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.18);
}

/* --- Summary bar --- */
/* Ekranin dibine sabitlenen ozet/durum cubugu (hakedis, mutabakat, ozet sayfalari).
   position:fixed VIEWPORT'a gore konumlanir; left:0 verilirse cubuk sol rayin
   altina girer — bu yuzden ray genisligi kadar iceriden baslar.
   z-index rayin (100) ALTINDA olmali: ray hover ile genisleyince cubugun uzerini
   ortmeli, cubuk rayin ustune binmemeli. Sticky filtre/baslik satirlarinin (10-30)
   ustunde kalir. */
.of-fixed-bottom-bar {
    position: fixed;
    left: var(--of-rail-w);
    right: 0;
    bottom: 0;
    z-index: 40;
}

.of-summary-bar {
    background: linear-gradient(180deg, #e4eaf2 0%, #d8e2ee 100%);
    border-top: 1px solid #b8c4d4;
    border-bottom: 1px solid #b8c4d4;
    padding: 5px 16px;
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.of-summary-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    border-right: 1px solid #b0bfcc;
    font-size: 12px;
}

.of-summary-item:first-child { padding-left: 0; }
.of-summary-item:last-child { border-right: none; }

.of-summary-label {
    color: #4a6480;
    font-weight: 500;
    white-space: nowrap;
}

.of-summary-value {
    color: #1e3352;
    font-weight: 700;
    font-size: 13px;
}

/* --- Table --- */
.of-table-wrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: clip;
}

.of-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #1e3352;
}

.of-table thead tr {
    background: linear-gradient(180deg, #dce4ee 0%, #ccd6e4 100%);
    position: sticky;
    top: 41px;
    z-index: 20;
}

.of-table thead th {
    padding: 7px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #2c4a6e;
    border-right: 1px solid #b8c4d4;
    border-bottom: 2px solid #8a9ab0;
    white-space: nowrap;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.of-table thead th:last-child { border-right: none; }

/* Modal içinde of-table: sticky header ihtiyaç yok, top:41px ilk satırı kapatır */
.of-modal-body .of-table thead tr {
    position: static;
    top: unset;
    z-index: unset;
}

/* of-table-wrap overflow-x:auto scroll container yaratır; sticky of-table-wrap'e göre
   hesaplanır (of-content-area'ya değil). Filtre çubuğu dışarıda olduğundan top:0 doğrudur. */
.of-table-wrap .of-table thead tr {
    top: 0;
}

.of-table tbody tr {
    border-bottom: 1px solid #e0e8f0;
    transition: background 0.1s;
}

.of-table tbody tr:nth-child(even) { background: #f5f8fc; }

.of-table tbody tr:hover { background: #e8f0fa; }

.of-table tbody td {
    padding: 6px 10px;
    border-right: 1px solid #e8eef5;
    vertical-align: middle;
    line-height: 1.4;
}

.of-table tbody td:last-child { border-right: none; }

/* --- Status bar (bottom) --- */
.of-status-bar {
    background: #1e3352;
    color: #8aadd4;
    font-size: 11px;
    padding: 0 16px;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* --- Page wrapper --- */
.of-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    overflow: hidden;
}

/* --- Panel / Card --- */
.of-panel {
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.of-panel-header {
    background: linear-gradient(180deg, #dce4ee 0%, #ccd6e4 100%);
    border-bottom: 2px solid #8a9ab0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #1e3352;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    height: 32px;
    box-sizing: border-box;
    /* Panel kaydirilirken baslik tepede sabit kalsin (icerik altina kaymasin) */
    position: sticky;
    top: 0;
    z-index: 3;
}

/* --- Responsive helpers --- */
.of-flex-row { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.of-flex-1 { flex: 1; }
.of-ml-auto { margin-left: auto !important; }
.of-nowrap { white-space: nowrap; }

/* --- Badge / status chip --- */
table td { text-transform: uppercase; }
.of-badge { text-transform: none; }

.of-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.of-badge-green  { color: #16a34a; }
.of-badge-red    { color: #dc2626; }
.of-badge-blue   { color: #1a4a7e; }
.of-badge-orange { color: #c2610c; }
.of-badge-gray   { color: #4a5a6a; }
.of-badge-purple { color: #4a2a8a; }

/* ============================================================
   Oracle Fusion — MudDialog Override
   ============================================================ */
.mud-dialog.of-dialog {
    border-radius: 3px !important;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(30,51,82,0.28) !important;
}

.mud-dialog.of-dialog .mud-dialog-title {
    background: linear-gradient(180deg, #2e4a6e 0%, #1e3352 100%) !important;
    color: #e8f0f8 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-bottom: none !important;
    letter-spacing: 0.2px;
}

.mud-dialog.of-dialog .mud-dialog-title .mud-button-root {
    color: #c8ddf0 !important;
}

.mud-dialog.of-dialog .mud-dialog-content {
    padding: 16px !important;
    background: #fff !important;
}

.mud-dialog.of-dialog .mud-dialog-actions {
    background: #f2f4f7 !important;
    border-top: 2px solid #8a9ab0 !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

/* MudTextField / MudSelect Oracle Fusion look inside dialogs */
.mud-dialog.of-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: #9bafc5 !important;
    border-radius: 3px !important;
}
.mud-dialog.of-dialog .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #3d7ab5 !important;
}
.mud-dialog.of-dialog .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #2e6096 !important;
    border-width: 1.5px !important;
}
.mud-dialog.of-dialog .mud-input-label,
.mud-dialog.of-dialog .mud-input-label-animated {
    color: #4a6480 !important;
    font-size: 12px !important;
}
.mud-dialog.of-dialog .mud-input-slot {
    font-size: 13px !important;
}
.mud-dialog.of-dialog .mud-input-root {
    font-size: 13px !important;
}

/* --- Print --- */
@media print {
    .of-filter-bar, .of-action-bar, nav, header, .mud-appbar { display: none !important; }
    body { background: white !important; }
}

/* Number input — spinner oklarını gizle */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* =========================================================
   Oracle Fusion — Two-Column Split Modal System
   ========================================================= */
.of-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(30,51,82,0.52);
    /* Modal acikken arkada kalan her sey bulaniklasir. Modal bu elemanin
       COCUGU oldugu icin ondan etkilenmez, net kalir.
       -webkit- oneki Safari icin gerekli. */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

/* MudBlazor diyaloglari (WorkLogEditDialog) kendi overlay'ini uretir; ayni
   bulanikligi orada da uygula ki modal davranisi her yerde ayni olsun.
   Perde .mud-overlay-scrim; .mud-overlay ise onu ve icerigi tasiyan kapsayici. */
.mud-overlay .mud-overlay-scrim {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.of-modal {
    display: flex; flex-direction: column;
    background: #fff; border-radius: 3px;
    box-shadow: 0 8px 32px rgba(30,51,82,0.35);
    max-height: 90vh; overflow: hidden;
}

.of-modal-sm  { width: 540px; }
.of-modal-md  { width: 700px; }
.of-modal-lg  { width: 860px; }
.of-modal-xl  { width: 1000px; }

.of-modal-hd {
    background: linear-gradient(180deg,#2e4a6e 0%,#1e3352 100%);
    padding: 0 16px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
}

.of-modal-hd-title {
    color: #e8f0f8; font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}

.of-modal-hd-title i { color: #8aadd4; font-size: 15px; }

.of-modal-hd-close {
    background: none; border: none; color: #8aadd4;
    font-size: 16px; cursor: pointer; padding: 4px; line-height: 1;
    display: flex; align-items: center; border-radius: 3px;
}
.of-modal-hd-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.of-modal-bd { display: flex; flex: 1; overflow: hidden; }
.of-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.of-modal-grid .of-modal-section { grid-column: 1 / -1; }

.of-modal-left {
    width: 195px; flex-shrink: 0;
    background: #f5f8fc; border-right: 1px solid #dce4ee;
    padding: 14px 13px; display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto;
}

.of-modal-right { flex: 1; padding: 16px; overflow-y: auto; }

.of-modal-ft {
    background: #f2f4f7; border-top: 2px solid #8a9ab0;
    padding: 8px 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}

.of-kv { display: flex; flex-direction: column; gap: 2px; }
.of-kv-key { font-size: 10px; font-weight: 700; color: #8aadd4; text-transform: uppercase; letter-spacing: 0.5px; }
.of-kv-val { font-size: 13px; font-weight: 600; color: #1e3352; word-break: break-word; min-height: 18px; }
.of-kv-val.accent { font-size: 17px; font-weight: 700; color: #2e6096; }
.of-kv-val.muted { color: #8a9ab0; font-style: italic; font-weight: 400; }
.of-kv-sep { height: 1px; background: #dce4ee; flex-shrink: 0; }

.of-modal-label {
    display: block; font-size: 11px; font-weight: 600;
    color: #4a6480; margin-bottom: 4px;
    letter-spacing: 0.3px;
}
.of-modal-label.req::after { content: " *"; color: #b53535; }

.of-modal-input {
    width: 100%; height: 32px; padding: 0 10px;
    text-transform: uppercase;
    border: 1px solid #9bafc5; border-radius: 3px;
    font-size: 13px; color: #1e3352; background: #fff;
    outline: none; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.of-modal-input:focus { border-color: #3d7ab5; box-shadow: 0 0 0 2px rgba(61,122,181,0.18); }
.of-modal-input::placeholder { color: #b8c8d8; font-size: 12px; }
.of-modal-input:disabled { background: #f5f7fa; color: #888; cursor: not-allowed; }
/* Harf buyuklugunu yazildigi gibi koruyan alanlar (kullanici adi, sifre vb.) — JS de bu sinifi atlar */
.of-keep-case { text-transform: none; }

/* ===== Mutabakat gridi — hücre açıklama notu (Excel tarzı) ===== */
.of-note-cell { position: relative; }
.of-note-cell.has-note::after {
    content: ''; position: absolute; top: 0; right: 0;
    width: 0; height: 0; border-top: 9px solid #e8821e; border-left: 9px solid transparent; pointer-events: none;
}
.of-note-hot { position: absolute; top: 0; right: 0; width: 16px; height: 16px; z-index: 4; cursor: pointer; }
.of-note-tip {
    display: none; position: absolute; top: calc(100% + 5px); right: 0;
    background: #1e3352; color: #eaf2fb; font-size: 12px; font-weight: 400;
    padding: 7px 10px; border-radius: 5px; white-space: normal; width: 220px;
    line-height: 1.45; box-shadow: 0 6px 20px rgba(30,51,82,0.35); z-index: 50; text-align: left;
}
.of-note-tip::before { content:''; position:absolute; top:-5px; right:12px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #1e3352; }
.of-note-tip-h { display:block; font-size:10px; letter-spacing:0.4px; text-transform:uppercase; color:#8aadd4; margin-bottom:3px; }
.of-note-cell.has-note:hover .of-note-tip { display: block; }

/* Mutabakat grid sayı kutularında artırma/azaltma oklarını gizle (düz görünüm) */
#tbl-operasyon input[type=number]::-webkit-outer-spin-button,
#tbl-operasyon input[type=number]::-webkit-inner-spin-button,
#tbl-mem-op input[type=number]::-webkit-outer-spin-button,
#tbl-mem-op input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#tbl-operasyon input[type=number], #tbl-mem-op input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.of-modal-select {
    width: 100%; height: 32px; padding: 0 28px 0 10px;
    border: 1px solid #9bafc5; border-radius: 3px;
    font-size: 13px; color: #1e3352;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a7a9a'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none; appearance: none;
    outline: none; cursor: pointer; font-family: inherit;
    transition: border-color 0.15s;
}
.of-modal-select:focus { border-color: #3d7ab5; box-shadow: 0 0 0 2px rgba(61,122,181,0.18); }
.of-modal-select:disabled { background-color: #f5f7fa; color: #888; cursor: not-allowed; }

.of-modal-textarea {
    width: 100%; padding: 8px 10px; resize: vertical; min-height: 60px;
    text-transform: uppercase;
    border: 1px solid #9bafc5; border-radius: 3px;
    font-size: 13px; color: #1e3352; background: #fff;
    outline: none; font-family: inherit;
    transition: border-color 0.15s;
}
.of-modal-textarea:focus { border-color: #3d7ab5; box-shadow: 0 0 0 2px rgba(61,122,181,0.18); }

.of-modal-grid   { display: grid; gap: 12px; }
.of-modal-grid-2 { grid-template-columns: 1fr 1fr; }
.of-modal-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.of-modal-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.of-modal-col-2  { grid-column: span 2; }
.of-modal-col-3  { grid-column: span 3; }
.of-modal-col-4  { grid-column: span 4; }
.of-modal-field  { display: flex; flex-direction: column; }

.of-modal-section {
    display: flex; align-items: center; gap: 8px;
    margin: 6px 0 2px; font-size: 10px; font-weight: 700;
    color: #4a6480; letter-spacing: 1px; text-transform: uppercase;
}
.of-modal-section::before, .of-modal-section::after {
    content: ""; flex: 1; height: 1px; background: #dce4ee;
}

.of-modal-error {
    background: #fff0f0; border: 1px solid #f0b8b8; border-left: 3px solid #b53535;
    border-radius: 3px; padding: 7px 12px; font-size: 12px; color: #8b2020;
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.of-modal-info {
    background: #f0f7ff; border: 1px solid #aacce8; border-radius: 3px;
    padding: 8px 12px; font-size: 12px; color: #1e3352;
    display: flex; align-items: center; gap: 8px;
}
.of-modal-success {
    background: #f0fff4; border: 1px solid #a5d6a7; border-radius: 3px;
    padding: 8px 12px; font-size: 12px; color: #1b5e20;
    display: flex; align-items: center; gap: 8px;
}
.of-modal-error i, .of-modal-info i, .of-modal-success i { font-size: 14px; flex-shrink: 0; }
.of-modal-info i { color: #3d7ab5; }
.of-modal-success i { color: #2e7d32; }

.of-modal-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #1e3352; cursor: pointer;
    padding: 4px 0;
}
.of-modal-check input[type=checkbox] {
    width: 16px; height: 16px; cursor: pointer; accent-color: #3d7ab5;
}

.of-left-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg,#3d7ab5,#2e6096);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #fff;
    margin-bottom: 4px; flex-shrink: 0;
}
.of-left-title {
    font-size: 13px; font-weight: 700; color: #1e3352; line-height: 1.3;
}

/* =========================================================
   LOGIN PAGE — Ufuk / Gündoğumu Tasarımı (ly- prefix)
   ========================================================= */

.ly-login-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row-reverse;   /* görsel sağda, form solda */
    align-items: stretch;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Sol panel: gerçek fotoğraf arka fon */
.ly-left {
    width: 70%;
    position: relative;
    overflow: hidden;
    background-image: url('/login-bg.png?v=2');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #0a1220;
    display: flex;
    flex-direction: column;
}

.ly-stars  { display: none; }
.ly-scene  { display: none; }

.ly-content { display: none; }

.ly-logo        { display: none; }
.ly-logo-name   { display: none; }
.ly-logo-sub    { display: none; }
.ly-heading     { display: none; }
.ly-desc        { display: none; }

/* Sağ panel: beyaz form */
.ly-right {
    flex: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    border-right: 1px solid #e8ecf4;
}

.ly-card { width: 100%; max-width: 400px; }

.ly-welcome { font-size: 13px; color: #6b7280; margin-bottom: 6px; }

.ly-title {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.5px;
    margin-bottom: 4px;
}

.ly-sub { font-size: 13px; color: #9ca3af; margin-bottom: 32px; }

.ly-lbl {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 7px;
    display: block;
}

.ly-field { margin-bottom: 16px; }

.ly-input-wrap { position: relative; }

.ly-input-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    display: flex; align-items: center;
    pointer-events: none;
}

.ly-input-icon svg { fill: currentColor; width: 16px; height: 16px; }

.ly-field input {
    width: 100%;
    padding: 13px 14px 13px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #0f172a;
    outline: none;
    background: #f9fafb;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.ly-field input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.1);
    background: #fff;
}

.ly-field input:disabled { opacity: .6; cursor: not-allowed; }

.ly-input-wrap:has(.ly-input-icon) input { padding-left: 42px; }
.ly-input-wrap:has(.ly-pw-btn) input   { padding-right: 44px; }

.ly-pw-btn {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; color: #9ca3af;
    display: flex; align-items: center;
    transition: color .2s;
    padding: 0;
}

.ly-pw-btn:hover { color: #374151; }

.ly-error-box {
    background: #fde8e8;
    border: 1px solid #f0b8b8;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12px; color: #8b2020;
    margin-bottom: 16px;
}

/* Icinde artik yalnizca "Sifremi unuttum" var ("Oturumu acik tut" kaldirildi):
   tek cocuk space-between ile sola kayardi, saga yaslaniyor. */
.ly-options-row { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 24px; }
.ly-link { font-size: 13px; color: #2563eb; text-decoration: none; font-weight: 600; }
.ly-link:hover { text-decoration: underline; }

.ly-btn {
    width: 100%; padding: 14px;
    border: none; border-radius: 12px;
    background: #0f172a; color: #fff;
    font-size: 14px; font-weight: 800;
    font-family: 'Segoe UI', system-ui, sans-serif;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.ly-btn svg { fill: white; width: 18px; height: 18px; }

.ly-btn:hover:not(:disabled) {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(15,23,42,.3);
}

.ly-btn:disabled { opacity: .7; cursor: wait; }

@keyframes ly-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ly-spinner {
    width: 18px; height: 18px;
    animation: ly-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.ly-busy, .ly-busy * { cursor: wait !important; }

.ly-back-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0;
    font-size: 13px; color: #6b7280; cursor: pointer;
    margin-bottom: 4px; transition: color .15s;
}
.ly-back-btn:hover { color: #0f172a; }

.ly-success-box {
    background: #eefbf4; border: 1px solid #a7f0c9;
    border-radius: 8px; padding: 9px 14px;
    font-size: 12px; color: #146c3f; margin-bottom: 4px;
}
/* Sifre Degistir formunun altindaki yonlendirme notu (amber = bilgi tonu). */
.ly-info-box {
    background: #fff8ec; border: 1px solid #f0dcb4;
    border-radius: 8px; padding: 10px 14px;
    font-size: 11.5px; color: #7a5210; line-height: 1.55;
    /* Alt bosluk: notun hemen altindaki "Şifreyi Değiştir" butonuna yapismasin. */
    margin: 14px 0 18px;
}
.ly-info-box b { color: #5d3e0c; }

/* =========================================================
   SALT İZLEME MODU (Yönetici rolü)
   ---------------------------------------------------------
   Asıl güvence API'de: GET dışı her istek 403 döner. Buradaki
   kurallar yalnızca arayüzü dürüst tutmak içindir — kullanıcı
   basamayacağı butonlarla uğraşmasın.

   Yalnızca ANLAMI KESİN yazma butonları gizlenir:
     of-btn-save   → Kaydet
     of-btn-danger → Sil / Geri Al
     of-btn-lock   → Kilitle
   "Yenile", "Analiz", "Hesapla" gibi okuma eylemleri
   of-btn-primary kullandığı için dokunulmaz.
   ========================================================= */
.of-readonly .of-btn-save,
.of-readonly .of-btn-danger,
.of-readonly .of-btn-lock { display: none !important; }

/* Ray dibindeki izleme rozeti */
.of-rail-readonly {
    margin: 0 6px 6px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(255,209,102,0.16);
    border: 1px solid rgba(255,209,102,0.35);
    color: #ffd166;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .3px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =========================================================
   Sticky filter bar, action bar & table headers — global
   ========================================================= */

/* Single vertical scroll container for all page content */
.of-content-area {
    /* Ust cubuk kalkti: tum ekran yuksekligi icerige ait.
       Sol bosluk yalnizca KAPALI ray genisligi kadar — ray acilirken icerik
       kaymasin diye (ray icerigin ustune biner). */
    height: 100vh;
    margin-left: var(--of-rail-w);
    overflow-y: auto;
    background: #f0f3f7;
}

/* Page root divs use overflow:hidden which creates a scroll container,
   preventing position:sticky from propagating up. overflow:clip does
   not create a scroll container so sticky reaches .of-content-area. */
.of-content-area > * {
    overflow: clip !important;
}

/* Table wrappers use overflow:auto (not overflow-x:auto) so this rule is
   no longer matched; kept for any legacy inline-style tables. */
.of-content-area [style*="overflow-x:auto"],
.of-content-area [style*="overflow-x: auto"] {
    overflow-y: clip !important;
}

/* Filter bar sticks at the top of the content area */
.of-filter-bar {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Action bar sticks just below the filter bar (filter bar height = 41px) */
.of-action-bar {
    position: sticky;
    top: 41px;
    z-index: 19;
}

/* Inline-styled table headers (dark gradient row) — stick below filter bar */
table:not(.of-table) thead tr {
    position: sticky;
    top: 41px;
    z-index: 10;
}

/* When action bar is also present, headers go below both bars (41 + 40 = 81px) */
.of-action-bar ~ * table thead tr {
    top: 81px;
}
.of-action-bar ~ table thead tr {
    top: 81px;
}

/* ============================================================
   Realtime — Presence (app bar) + Canli veri serit
   ============================================================ */

/* --- Presence rozeti (app bar, koyu zemin) --- */
.of-presence { position: relative; display: flex; align-items: center; }
.of-presence-live {
    color: #4ade80;
    font-size: 12px;
    animation: of-pulse 2s ease-in-out infinite;
}
@keyframes of-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.of-presence-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 12px;
    color: #d6e4f5;
    cursor: pointer;
    transition: background .15s;
}
.of-presence-badge:hover,
.of-presence-badge.open { background: rgba(255,255,255,0.20); }
.of-presence-count {
    background: #4ade80;
    color: #143a23;
    font-weight: 700;
    font-size: 11px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    padding: 0 4px;
}

/* --- Acilir panel (popover) --- */
.of-presence-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}
.of-presence-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1001;
    width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #cdd8e6;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
    animation: of-live-slide 0.15s ease-out;
}
.of-presence-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #e8eef5;
    font-size: 12px;
    font-weight: 700;
    color: #1e3352;
    background: #f6f9fc;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
}
.of-presence-panel-hd .of-presence-live { color: #16a34a; }
.of-presence-panel-count {
    background: #1e3352;
    color: #fff;
    font-size: 11px;
    min-width: 20px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    padding: 0 6px;
}
.of-presence-panel-body { padding: 4px 0; }
.of-presence-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
}
.of-presence-row:hover { background: #f4f7fb; }
.of-presence-row.me { background: #f0f7ff; }
.of-presence-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg,#5a9fd4,#2e6096);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.of-presence-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.of-presence-fullname {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e3352;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.of-presence-page {
    font-size: 11px;
    color: #6c7f95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.of-presence-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(74,222,128,0.25);
}

/* --- Canli veri serit (sayfa icerigi, acik zemin) --- */
.of-live-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff7e6;
    border: 1px solid #f0c674;
    border-left: 4px solid #c97e18;
    color: #7a5300;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    animation: of-live-slide 0.25s ease-out;
}
@keyframes of-live-slide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.of-live-banner-icon { font-size: 16px; color: #c97e18; }
.of-live-banner-text { flex: 1; }
.of-live-banner-btn  { margin-left: auto; }
.of-live-banner-close {
    background: none;
    border: none;
    color: #7a5300;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.6;
}
.of-live-banner-close:hover { opacity: 1; }

/* --- "Ayni sayfada baskasi kayit giriyor" uyarisi (belirgin / dikkat cekici) --- */
.of-live-busy {
    display: flex;
    align-items: center;
    justify-content: center;          /* icerigi yatay ortala */
    gap: 9px;
    background: linear-gradient(90deg, #ffe9a8 0%, #ffd866 100%);
    color: #5c3d00;
    padding: 5px 16px;                /* dikeyde ince bant */
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(217,119,6,0.25);
    position: sticky;
    top: 0;
    z-index: 30;
    animation: of-live-slide 0.25s ease-out, of-busy-glow 1.6s ease-in-out infinite;
}
@keyframes of-busy-glow {
    0%, 100% { box-shadow: 0 2px 10px rgba(217,119,6,0.25); }
    50%      { box-shadow: 0 3px 18px rgba(217,119,6,0.55); }
}
.of-live-busy-icon {
    font-size: 17px;
    color: #d97706;
    flex-shrink: 0;
    animation: of-pulse 1.1s ease-in-out infinite;
}
.of-live-busy-text { flex: 0 1 auto; text-align: center; line-height: 1.35; }
.of-live-busy-text strong { color: #7a2e00; }
.of-live-busy-text u { text-underline-offset: 2px; }
.of-live-busy-lead {
    display: inline-block;
    background: #d97706;
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .6px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}

/* --- Presence panelinde "isleme yapiyor" (turuncu) --- */
.of-presence-row.busy { background: #fff7e6; }
.of-presence-row.busy:hover { background: #fff1d6; }
.of-presence-busy-icon { color: #c97e18; font-size: 12px; flex-shrink: 0; }
.of-presence-row.busy .of-presence-page { color: #b06f12; font-weight: 600; }

/* --- KVKK: hassas veri maskeleme / acma (reveal) --- */