@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
  --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
  font-family: var(--body-font);
  font-size: var(--type-ramp-base-font-size);
  line-height: var(--type-ramp-base-line-height);
  margin: 0;
}

.main {
  min-height: calc(100dvh - 86px);
  color: var(--neutral-foreground-rest);
  align-items: stretch !important;
}

nav {
  align-self: stretch;
  height: calc(100dvh - 80px) !important;
  display: flex;
}

.content {
  padding: 0.5rem 1.5rem;
  align-self: stretch !important;
  width: 100%;
}

.manage {
  width: 100dvw;
}

.fluent-layout-item[area="footer"] {
  background: var(--neutral-layer-4);
  color: var(--neutral-foreground-rest);
  align-items: center;
  padding: 10px 10px;
}

  .fluent-layout-item[area="footer"] fluent-link {
    color: var(--neutral-foreground-rest);
    text-decoration: none;
  }

    .fluent-layout-item[area="footer"] fluent-link:focus {
      outline: 1px dashed;
      outline-offset: 3px;
    }

    .fluent-layout-item[area="footer"] fluent-link:hover {
      text-decoration: underline;
    }


.alert {
  border: 1px dashed var(--accent-fill-rest);
  padding: 5px;
}


#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  margin: 20px 0;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

.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::before {
    content: "An error has occurred. "
  }

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

  .loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
  }

    .loading-progress circle:last-child {
      stroke: #1b6ec2;
      stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
      transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

  .loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
  }

code {
  color: #c02d76;
}

@media (max-width: 600px) {
  .main {
    flex-direction: column !important;
    row-gap: 0 !important;
  }
}

/* reCAPTCHA (Login sayfası): Google widget'ı iframe İÇİNDE sabit 304x78px çiziliyor;
   CSS ile genişletilemiyor. Kapsayıcının genişliğine orantılı ölçekleme
   wwwroot/js/captcha.js içinde (recaptchaOlcekle) yapılıyor. Burada yalnızca
   ölçeklenen içeriğin taşmaması sağlanıyor. */
#recaptcha-container {
  width: 100%;
  overflow: hidden;
}

/* Metin alanları (tüm uygulama): FluentTextInput'un Width parametresi dış sarmalayıcıya
   uygulanıyor; içteki fluent-text-input web bileşeni ayrıca tam genişlik yapılmalı. */
fluent-text-input {
  width: 100%;
}

/* Butonlar (tüm uygulama): kapsayıcının genişliğine yayılır; yükleme (LoadingOverlay)
   sırasında da tam genişlikte kalır. */
fluent-button,
.loading-button {
  width: 100%;
}

/* Liste grid'leri (Haktan, 06.10.2026): bütün liste ekranlarında sütunlar genişletilebilir
   (FluentDataGrid ResizableColumns + ResizeColumnOnAllRows). Başlık hücresi içeriği kadar
   uzar (üstte sıralama, altında süzgeç); genişletme tutamacı başlık yüksekliğinin %90'ı
   kadar ve dikeyde ortada. VoidLog WASMUI liste sayfalarındaki ayarın aynısı; Fluent v5'te
   başlık hücresi th[role=columnheader] olduğu için o seçici de eklendi. */
.column-header {
  height: auto !important;
  display: flex !important;
  justify-content: start !important;
  align-items: stretch !important;
}

  .column-header > * {
    flex: 1;
    min-height: 0;
  }

  .column-header > .resize-handle,
  [role="columnheader"] > .resize-handle {
    height: 90% !important;
    align-self: center !important;
    margin: 0 2px !important; /* tutamacın solunda ve sağında 2px boşluk (Haktan, 06.10.2026) */
  }

.col-sort-button {
  height: 100% !important;
}

/* Yükleme göstergesi ve yenileme katmanı (Haktan, 08.10.2026): Components/YuklemeGostergesi, YuklemeKatmani. */
.yg {
  display: flex;
  align-items: center;
  color: var(--colorNeutralForeground2, #424242);
}

.yg-alan {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 120px;
  padding: 24px 12px;
  font-weight: 600;
}

.yg-satir {
  flex-direction: row;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--fontSizeBase200, 12px);
}

.yk-katman {
  position: relative;
  min-width: 0;
}

.yk-katman-ortu {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
  background: color-mix(in srgb, var(--colorNeutralBackground1, #ffffff) 70%, transparent);
}

  .yk-katman-ortu .yg-alan {
    min-height: 0;
  }

/* Boş durum (Haktan, 08.10.2026): kayıt açılamadığında dialog / sayfa gövdesinde kalan nötr metin.
   Nedeni toast ile gösterilir; burada uyarı rengi kullanılmaz. */
.bos-durum {
  padding: 24px 12px;
  text-align: center;
  color: var(--colorNeutralForeground3, #616161);
}

.yuklenemedi-durumu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* LİSTE SAYFALARI (Haktan, 09.10.2026)
   Sayfa (.liste-sayfa) içerik alanının yüksekliğini doldurur; başlık ve süzgeçlerden kalan
   yüksekliği grid kartı (.liste-karti) alır. Tablo kartın içindeki .grid-kaydirma kabında
   kaydırılır: sütun genişletilince ya da sütunlar sığmayınca yatay, kayıt sayısı artınca
   dikey kaydırma çubuğu kartın içinde çıkar; sayfa / layout büyümez. Başlık satırı yapışkan
   (FluentDataGrid GenerateHeader="Sticky" + aşağıdaki th kuralı), aşağı kaydırınca görünür kalır.
   Ekran çok kısaysa kart en az 320px kalır; o zaman sayfanın kendisi kayar.
   Başlıktaki süzgeç açılır listeleri en üst katmanda açıldığı için kesilmez.
   Yeni liste sayfası: sayfa kabına liste-sayfa, karta liste-karti, grid'i <div class="grid-kaydirma"> içine. */
.liste-sayfa {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

  .liste-sayfa > * {
    flex-shrink: 0;
  }

  .liste-sayfa > .liste-karti {
    flex: 1 1 auto;
    min-height: 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

.liste-karti > * {
  flex-shrink: 0;
}

.grid-kaydirma {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
}

  .liste-karti > .grid-kaydirma {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Yapışkan başlık: hücre düzeyinde de uygulanır (tr'de sticky her tarayıcıda çalışmaz).
     Arka plan, altından kayan satırlar görünmesin diye. */
  .grid-kaydirma thead th,
  .grid-kaydirma [role="columnheader"] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--colorNeutralBackground1, #ffffff);
  }

/* Liste başlığındaki eylem düğmeleri (Excel'e aktar, + Yeni ...) yatayda yan yana, sağa yaslı.
   Fluent v5 düğmesi varsayılan olarak bulunduğu kabın tam genişliğini aldığı için (bu yüzden alt
   alta diziliyordu) düğmeler içerik genişliğine çekilir. Dar ekranda (900px altı) alt satıra geçer. */
.liste-eylemler {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

  .liste-eylemler > *,
  .excel-aktar > :first-child {
    flex: 0 0 auto;
    width: auto !important;
    white-space: nowrap;
  }

.excel-aktar {
  display: inline-flex;
}

/* Çok düğmeli başlık (Sınıflar): bütün düğmeler en uzun metinli düğme kadar, eşit genişlikte. */
.liste-eylemler-esit {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

  .liste-eylemler-esit > *,
  .liste-eylemler-esit .excel-aktar > :first-child {
    width: 100% !important;
  }

@media (max-width: 900px) {
  .liste-eylemler,
  .liste-eylemler-esit {
    display: flex;
    flex-wrap: wrap;
  }

    .liste-eylemler-esit > * {
      width: auto !important;
    }
}

/* Excel'e aktar menüsü (Components/ExcelAktarDugmesi). */
.excel-menu {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 4px 0;
}

.excel-menu-oge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

  .excel-menu-oge:hover,
  .excel-menu-oge:focus-visible {
    background: var(--colorNeutralBackground1Hover, #f5f5f5);
    outline: none;
  }

.excel-menu-soluk {
  font-size: var(--fontSizeBase200, 12px);
  color: var(--colorNeutralForeground3, #616161);
}

/* Grid boş / yükleniyor / yüklenemedi alanı (Haktan, 09.10.2026): satır hücresinin içinde yatayda ve
   dikeyde ortalı, genişliği %98 (yatay kaydırma çubuğu oluşturmaz).
   - Sütunlar ekrana sığıyorsa: hücrenin %98'i, margin auto ile ortada.
   - Sütunlar ekrandan genişse (hücre de geniş): görünen alanın %98'i (98cqw); sticky left/right
     %1 ile görünen alanın içinde, ortada tutulur. */
.grid-kaydirma {
  container-type: inline-size;
}

  .grid-kaydirma .bos-veri,
  .grid-kaydirma .yg,
  .grid-kaydirma .yuklenemedi-durumu {
    position: sticky;
    left: 1cqw;
    right: 1cqw;
    box-sizing: border-box;
    width: min(98%, 98cqw);
    max-width: none;
    margin-inline: auto;
  }

.bos-veri {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 120px;
  padding: 24px 12px;
  color: var(--colorNeutralForeground3, #616161);
  text-align: center;
}

/* Telefon kutusu sarmalayıcısı (js/telefonGirdisi.js): düzene etki etmez. */
.telefon-girdisi {
  display: contents;
}


/* ── Logo plakası (09.10.2026) ──────────────────────────────────────────
   Logolar şeffaf zeminli ve koyu yazılı; koyu temada kayboluyordu. Plaka temadan
   bağımsız, sabit açık bir zemin verir (çok açık mavi geçiş + ince çerçeve). */
.logo-plaka {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #ffffff 0%, #eef5fb 100%);
  border: 1px solid #dbe7f3;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  color-scheme: light;
}

  .logo-plaka img {
    display: block;
    max-width: 100%;
    height: auto;
  }

/* Giriş kartının üstündeki ana logo. */
.logo-plaka-giris {
  padding: 14px 20px;
  margin-bottom: 8px;
}

  .logo-plaka-giris img {
    max-height: 88px; /* 110px'in %80'i; genişlik oranla küçülür */
    width: auto;
  }

/* Giriş kartının altındaki iş ortağı logoları. */
.logo-plaka-alt {
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-top: 8px;
}

  .logo-plaka-alt img {
    height: 32px;
    width: auto;
  }

/* Başlığın sol üstündeki logo: tıklanınca anasayfa. */
.logo-plaka-baslik {
  flex-shrink: 0;
  height: 58px; /* 72px'in %80'i (oran korunur: img height:100%, width:auto) */
  padding: 3px 10px;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

  .logo-plaka-baslik img {
    height: 100%;
    width: auto;
  }

  .logo-plaka-baslik:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }

  .logo-plaka-baslik:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2, #000000);
    outline-offset: 2px;
  }

@media (max-width: 600px) {
  .logo-plaka-baslik {
    height: 45px;
    padding: 2px 6px;
  }
}


/* ── Başlık zemini (09.10.2026) ─────────────────────────────────────────
   VoidLOG başlığındaki geçiş: solda beyaz (logo ve menü düğmesinin yeri), %30'dan sonra
   uygulamanın ana rengi. Ana renk temadan gelir (koyu temada da marka rengi); sol taraf
   her temada beyaz kaldığı için oradaki öğeler açık tema renkleriyle çizilir. */
.uygulama-baslik {
  background: linear-gradient(to right, #ffffff, var(--colorBrandBackground, #0f6cbd) 30%) !important;
  color: var(--colorNeutralForegroundOnBrand, #ffffff);
}

  /* Sol grup (menü düğmesi + logo) beyaz zeminde: Fluent renk değişkenleri burada açık temadaki değerlerine çekilir. */
  .uygulama-baslik .baslik-sol {
    color: #242424;
    --colorNeutralForeground1: #242424;
    --colorNeutralForeground2: #424242;
    --colorNeutralForeground3: #616161;
    --colorNeutralForeground1Hover: #242424;
    --colorNeutralForeground2Hover: #242424;
    --colorSubtleBackgroundHover: #f5f5f5;
    --colorSubtleBackgroundPressed: #e0e0e0;
    --colorTransparentBackgroundHover: #f5f5f5;
  }

@media (max-width: 600px) {
  /* Dar ekranda beyaz alan logo genişliği kadar kalsın. */
  .uygulama-baslik {
    background: linear-gradient(to right, #ffffff, var(--colorBrandBackground, #0f6cbd) 55%) !important;
  }
}

/* ── Mobil (Haktan, 13.10.2026) ─────────────────────────────────────────────
   Eşik 768px (DinamikNavMenu.MobilGenislik; menü de bu eşikte hamburger çekmecesine geçer).
   - Dialog'lar tam ekran; içerik kayar, alt düğme çubuğu ekranın altında kalır.
     Menü çekmecesi de bir fluent-dialog olduğu için yalnızca içinde FluentDialogBody olanlar hedeflenir.
   - Dokunma: düğmeler ve seçim kutuları en az 40px.
   - Liste sayfalarının masaüstü başlık eylemleri alt satıra kayar. */
@media (max-width: 768px) {
    fluent-dialog:has(.fluent-dialog-body)::part(dialog),
    fluent-dialog:has(fluent-dialog-body)::part(dialog) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    fluent-button,
    .grouped-select-trigger {
        min-height: 40px;
    }

    .liste-sayfa {
        padding-inline: 4px !important;
    }

    /* Sayfa kabının (#body, MainLayout) üst boşluğu dar ekranda yok (14.10.2026): yapışkan (sticky) çubuklar
       (takvim gündeminin araç çubuğu) kabın iç kenarına yapışır; 4px'lik boşlukta altından kayan içerik görünüyordu. */
    #body {
        padding-top: 0 !important;
    }
}

/* İşlemler dialog'undaki "Takvimde göster" dar ekranda gizli (Haktan, 13.10.2026). */
@media (max-width: 768px) {
  .takvimde-goster-dugme {
    display: none !important;
  }
}