/* FİYOP — ortak sayfa düzeni stilleri (prototip fiyop.css'den yalnızca düzen parçaları) */
:root {
  /* Tipografi (Sora & Plus Jakarta Sans) */
  --fiyop-font-heading: 'Sora', sans-serif;
  --fiyop-font-body: 'Plus Jakarta Sans', sans-serif;

  /* ==========================================================================
     SEÇENEK B — ÇELİK MAVİ MARKA REHBERİ RENK PALETİ
     ========================================================================== */
  /* 1. Çelik Lacivert: Ana renk — Navigasyon, başlıklar, logo zemini, kurumsal butonlar */
  --fiyop-primary: #1E3A5F;
  --fiyop-primary-hover: #152A45;
  --fiyop-primary-active: #0E1D30;
  --fiyop-navy: #1E3A5F;

  /* 2. Soğuk Teal-Mavi: İkincil — Bağlantılar, ikincil butonlar, sekmeler, çip rozetler */
  --fiyop-secondary: #4A90A4;
  --fiyop-secondary-hover: #3B7586;
  --fiyop-secondary-active: #2F606E;
  --fiyop-secondary-soft: rgba(74, 144, 164, 0.12);
  --fiyop-teal: #4A90A4;

  /* 3. Turuncu-Kırmızı: Accent — CTA butonları, uyarı rozetleri, öne çıkan aksiyonlar, logo vurgusu */
  --fiyop-accent: #F26B3A;
  --fiyop-accent-hover: #D95524;
  --fiyop-accent-active: #BF4417;
  --fiyop-accent-soft: rgba(242, 107, 58, 0.14);
  --fiyop-accent-glow: rgba(242, 107, 58, 0.35);

  /* 4. Açık Nötr: Sayfa / panel arka planı */
  --fiyop-bg: #F7F8FA;

  /* 5. Koyu Nötr: Gövde metin rengi, tablo metinleri */
  --fiyop-text-main: #20242B;
  --fiyop-text-muted: #5B6675;
  --fiyop-text-subtle: #8D99A8;

  /* 6. Açık Teal Tonu: Koyu zeminde ikincil metin, pasif ikonlar, yumuşak sınırlar */
  --fiyop-teal-light: #9BB4CC;
  --fiyop-teal-light-soft: rgba(155, 180, 204, 0.18);

  /* Mavi Buton ve Vurgu Renkleri (Çelik Mavi & Teal ile Uyumlu) */
  --fiyop-blue: #1E3A5F;
  --fiyop-blue-hover: #152A45;
  --fiyop-blue-active: #0E1D30;
  --fiyop-blue-glow: rgba(30, 58, 95, 0.28);
  --fiyop-blue-soft: rgba(74, 144, 164, 0.14);

  /* Yüzeyler */
  --fiyop-surface: #FFFFFF;
  --fiyop-surface-subtle: #EEF2F6;
  --fiyop-border: #E0E5EB;

  /* Dolgu (zemin) rolü: --fiyop-primary koyu temada metin rengine döner, düğme/rozet zemini bu üçlüden gelir */
  --fiyop-primary-dolgu: #1E3A5F;
  --fiyop-primary-dolgu-hover: #152A45;
  --fiyop-primary-dolgu-active: #0E1D30;

  /* Tema duyarlı yardımcı tonlar (açık temadaki değerler eski sabit renklerle aynı) */
  /* Başarı/uyarı vb. METİN rengi: Bootstrap'in düz renkleri koyu zeminde 4.5:1 vermez, koyuda vurgu tonu kullanılır */
  --fiyop-success-metin: var(--bs-success);
  --fiyop-primary-soft: rgba(30, 58, 95, 0.08);
  --fiyop-surface-yari: rgba(248, 250, 252, 0.85);
  --fiyop-info-soft: rgba(37, 99, 235, 0.1);
  --fiyop-info-border: rgba(37, 99, 235, 0.2);

  /* Sabit alt çubuğun yüksekliği; sayfa gövdesi, menü ve düzen bu kadar boşluk bırakır */
  --fiyop-alt-bar-yukseklik: 48px;
  --fiyop-border-hover: #CBD3DC;

  /* Bootstrap Renk Ezmeleri */
  --bs-primary: #1E3A5F;
  --bs-primary-rgb: 30, 58, 95;
  --bs-secondary: #4A90A4;
  --bs-secondary-rgb: 74, 144, 164;
  --bs-body-bg: #F7F8FA;
  --bs-body-color: #20242B;
  --bs-link-color: #3B7586;
  --bs-link-hover-color: #2F606E;

  /* İkon ve Kart Ölçüleri */
  --fiyop-white: #FFFFFF;
  --fiyop-gray-200: #E2E8F0;
  --fiyop-gray-600: #475569;
  --fiyop-warning-soft: #FEF3C7;
  --fiyop-warning-text: #B45309;
  --app-icon-size: 74px;
  --app-icon-radius: 20px;
}

@media (max-width: 767.98px) {
  :root {
    --app-icon-size: 64px;
    --app-icon-radius: 17px;
  }
}

html {
  overflow-x: clip;
}

body {
  font-family: var(--fiyop-font-body);
  background-color: var(--fiyop-bg);
  color: var(--fiyop-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Modal ve Offcanvas açıldığında Bootstrap padding-right sıçramasını önleme */
body.modal-open,
body.offcanvas-open {
  padding-right: 0 !important;
}
.modal,
.offcanvas {
  padding-right: 0 !important;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .fiyop-font-heading {
  font-family: var(--fiyop-font-heading);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   NAVBAR (ÜST MENÜ)
   ========================================================================== */
.fiyop-navbar {
  background-color: var(--fiyop-surface);
  border-bottom: 1px solid var(--fiyop-border);
  height: 66px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
}

.fiyop-navbar > .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.fiyop-navbar .dropdown {
  display: inline-flex;
  align-items: center;
}

.fiyop-navbar .vr {
  height: 24px;
  align-self: center;
}

.brand-logo {
  font-family: var(--fiyop-font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--fiyop-primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  text-decoration: none;
}
.brand-logo .dot {
  width: 8px;
  height: 8px;
  background-color: var(--fiyop-accent);
  border-radius: 50%;
  display: inline-block;
}
.brand-logo-img {
  height: 32px;
  width: auto;
  max-height: 36px;
  object-fit: contain;
  display: block;
}
/* Logonun iki sürümü basılır; koyu tema bloğu (dosya sonu) açığı gizleyip koyuyu gösterir */
.brand-logo-koyu {
  display: none;
}
@media (max-width: 575.98px) {
  .brand-logo-img {
    height: 26px;
  }
  /* 44px dokunma hedefleri 375px üst çubuğa sığmıyor; ayraçlar gizlenerek yer açılır */
  .fiyop-navbar .nav-ayrac {
    display: none;
  }
}
.giris-brand-header .brand-logo-img {
  height: 42px;
  max-height: 46px;
  margin: 0 auto 8px auto;
}

.tenant-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 44px;
  border-radius: 10px;
  background: var(--fiyop-surface-subtle);
  border: 1px solid var(--fiyop-border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fiyop-primary);
  transition: all 0.2s ease;
  cursor: pointer;
}
.tenant-select-btn:hover {
  background: var(--fiyop-gray-200);
}

.spotlight-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--fiyop-surface-subtle);
  border: 1px solid var(--fiyop-border);
  border-radius: 10px;
  padding: 0 14px;
  height: 42px;
  color: var(--fiyop-text-muted);
  font-size: 0.875rem;
  width: 320px;
  max-width: 100%;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.spotlight-trigger > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spotlight-trigger:hover {
  border-color: var(--fiyop-border-hover);
  background: var(--fiyop-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.kbd-shortcut {
  font-size: 0.75rem;
  background: var(--fiyop-surface);
  border: 1px solid var(--fiyop-border);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--fiyop-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--fiyop-text-muted);
  background: transparent;
  border: 1px solid transparent;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.nav-icon-btn:hover {
  background: var(--fiyop-surface-subtle);
  color: var(--fiyop-primary);
}
/* Üst çubuk sayaç rozeti: sayı metinle verilir (renge bağımlı değil); beyaz üzerinde accent-active ≥ 4.5:1 */
.nav-sayac {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--fiyop-accent-active);
  color: var(--fiyop-white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

/* Bildirimler: açılır liste (zil) ve /bildirimler sayfası aynı öğeyi kullanır.
   Okunmamış yalnızca renkle değil nokta ve kalın başlıkla da ayrılır (WCAG 1.4.1). */
.bildirim-acilir {
  max-height: 22rem;
  overflow-y: auto;
}

.bildirim-oge {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--fiyop-border);
  background: none;
  color: var(--fiyop-text-main);
  text-align: start;
}

.bildirim-liste .bildirim-oge {
  padding: 0.85rem 1rem;
}

.bildirim-oge:hover,
.bildirim-oge:focus-visible {
  background: var(--fiyop-surface-subtle);
}

/* Mobil çekmece düğmesinin köşesindeki okunmamış bildirim noktası */
.cekmece-nokta {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 10px;
  height: 10px;
  border: 2px solid var(--bs-body-bg, #fff);
  border-radius: 50%;
  background: var(--fiyop-accent);
}

.bildirim-nokta {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.45rem;
  border-radius: 50%;
}

.bildirim-oge.okunmamis .bildirim-nokta {
  background: var(--fiyop-accent);
}

.bildirim-metin {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.15rem;
}

.bildirim-baslik {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.bildirim-oge.okunmamis .bildirim-baslik {
  font-weight: 700;
}

.bildirim-icerik {
  color: var(--fiyop-text-muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.bildirim-zaman {
  color: var(--fiyop-text-muted);
  font-size: 0.75rem;
}

.bildirim-uyarilari {
  z-index: 1090;
}

/* Sistem bildirimi (fiyop.js sistem_bildirimi_goster): başarı işaretini renk + ikon + metin ile verir */
/* Üst çubuğun (kullanıcı menüsü, zil, ayarlar) altında açılır; üstlerine binip erişimi kapatmaz */
.sistem-bildirimleri {
  z-index: 1090;
  top: 4.5rem;
}

/* Bootstrap toast'ı yarı saydam; arkadaki başlık metni okunmaz hâle geliyordu */
.sistem-bildirim {
  background-color: var(--fiyop-surface);
  backdrop-filter: none;
  border-left: 4px solid var(--fiyop-success-metin);
  min-width: 16rem;
  max-width: min(28rem, calc(100vw - 2rem));
}

.sistem-bildirim-ikon {
  color: var(--fiyop-success-metin);
}

.sistem-bildirim .btn-close {
  min-width: 44px;
  min-height: 44px;
  margin: -0.5rem -0.5rem -0.5rem auto;
}

.badge-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--fiyop-surface);
  background-color: var(--fiyop-accent);
}

.text-primary {
  color: var(--fiyop-primary) !important;
}

/* Bootstrap'in marka teal'ine çevrilen text-secondary'si açık zeminde 3.4:1 veriyor; ikincil metin gri tonla verilir */
.text-secondary {
  color: var(--fiyop-text-muted) !important;
}

/* Soluk (subtle) rozetlerde Bootstrap'in düz renk metni ≥ 4.5:1 vermiyor; koyu vurgu rengi kullanılır */
.bg-success-subtle.text-success { color: var(--bs-success-text-emphasis) !important; }
.bg-info-subtle.text-info { color: var(--bs-info-text-emphasis) !important; }
.bg-warning-subtle.text-warning { color: var(--bs-warning-text-emphasis) !important; }
.bg-danger-subtle.text-danger { color: var(--bs-danger-text-emphasis) !important; }

.text-teal {
  color: var(--fiyop-secondary) !important;
}

.text-accent {
  color: var(--fiyop-accent) !important;
}

/* Bağlantı metni beyaz üstünde ≥ 4.5:1 olmalı: #4A90A4 yalnızca 3.6:1 verir, bu yüzden bir ton koyu kullanılır */
a {
  color: var(--fiyop-secondary-hover);
}
a:hover {
  color: var(--fiyop-secondary-active);
}

/* Bootstrap Buton Renklerini Yeni Palete Sabitleme
   Bootstrap 5.3 düğme renklerini --bs-btn-* değişkenlerinden okur; değişkenler yeniden tanımlanınca
   özgüllük savaşı ve !important gerekmez (bootstrap.min.css bu dosyadan önce yüklenir). */
.btn-primary {
  --bs-btn-color: var(--fiyop-white);
  --bs-btn-bg: var(--fiyop-primary-dolgu);
  --bs-btn-border-color: var(--fiyop-primary-dolgu);
  --bs-btn-hover-color: var(--fiyop-white);
  --bs-btn-hover-bg: var(--fiyop-primary-dolgu-hover);
  --bs-btn-hover-border-color: var(--fiyop-primary-dolgu-hover);
  --bs-btn-focus-shadow-rgb: 30, 58, 95;
  --bs-btn-active-color: var(--fiyop-white);
  --bs-btn-active-bg: var(--fiyop-primary-dolgu-active);
  --bs-btn-active-border-color: var(--fiyop-primary-dolgu-active);
  --bs-btn-disabled-color: var(--fiyop-white);
  --bs-btn-disabled-bg: var(--fiyop-primary-dolgu);
  --bs-btn-disabled-border-color: var(--fiyop-primary-dolgu);
}

/* Beyaz metin için #4A90A4 yalnızca 3.6:1 verir; dolgulu ikincil düğme bir ton koyu zemin kullanır */
.btn-secondary {
  --bs-btn-color: var(--fiyop-white);
  --bs-btn-bg: var(--fiyop-secondary-hover);
  --bs-btn-border-color: var(--fiyop-secondary-hover);
  --bs-btn-hover-color: var(--fiyop-white);
  --bs-btn-hover-bg: var(--fiyop-secondary-active);
  --bs-btn-hover-border-color: var(--fiyop-secondary-active);
  --bs-btn-focus-shadow-rgb: 59, 117, 134;
  --bs-btn-active-color: var(--fiyop-white);
  --bs-btn-active-bg: var(--fiyop-secondary-active);
  --bs-btn-active-border-color: var(--fiyop-secondary-active);
  --bs-btn-disabled-color: var(--fiyop-white);
  --bs-btn-disabled-bg: var(--fiyop-secondary-hover);
  --bs-btn-disabled-border-color: var(--fiyop-secondary-hover);
}

.btn-outline-primary {
  --bs-btn-color: var(--fiyop-primary);
  --bs-btn-border-color: var(--fiyop-primary);
  --bs-btn-hover-color: var(--fiyop-white);
  --bs-btn-hover-bg: var(--fiyop-primary-dolgu);
  --bs-btn-hover-border-color: var(--fiyop-primary-dolgu);
  --bs-btn-focus-shadow-rgb: 30, 58, 95;
  --bs-btn-active-color: var(--fiyop-white);
  --bs-btn-active-bg: var(--fiyop-primary-dolgu);
  --bs-btn-active-border-color: var(--fiyop-primary-dolgu);
  --bs-btn-disabled-color: var(--fiyop-primary);
  --bs-btn-disabled-border-color: var(--fiyop-primary);
}

/* Turuncu #F26B3A beyaz metinle 3:1'in altında kalır; aksan düğmesi koyu tonla başlar */
.btn-accent, .btn-cta {
  --bs-btn-color: var(--fiyop-white);
  --bs-btn-bg: var(--fiyop-accent-active);
  --bs-btn-border-color: var(--fiyop-accent-active);
  --bs-btn-hover-color: var(--fiyop-white);
  --bs-btn-hover-bg: var(--fiyop-accent-hover);
  --bs-btn-hover-border-color: var(--fiyop-accent-hover);
  --bs-btn-active-color: var(--fiyop-white);
  --bs-btn-active-bg: var(--fiyop-accent-active);
  --bs-btn-active-border-color: var(--fiyop-accent-active);
}

/* Sayfalama (Pagination) Aktif Buton Rengi */
.pagination {
  --bs-pagination-color: var(--fiyop-primary);
  --bs-pagination-active-color: var(--fiyop-white);
  --bs-pagination-active-bg: var(--fiyop-primary-dolgu);
  --bs-pagination-active-border-color: var(--fiyop-primary-dolgu);
}

.user-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 3px;
  height: 42px;
  border-radius: 10px;
  cursor: pointer;
}
.user-profile-btn:hover {
  background: var(--fiyop-surface-subtle);
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--fiyop-primary-dolgu);
  color: var(--fiyop-white);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   İÇERİK GENİŞLİĞİ MODLARI (ORTALANMIŞ & TAM EKRAN)
   ========================================================================== */
.fiyop-main-container {
  width: 100%;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}
/* Tüm sayfalar tam ekran (%100) genişliktedir; genişlik seçimi kaldırıldı.
   !important gerekli: sayfa.php'deki px-3/px-md-4 yardımcı sınıfları (kendileri !important) bu dolguyu ezmemeli */
.fiyop-main-container.layout-fluid {
  max-width: 100% !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
@media (max-width: 767.98px) {
  .fiyop-main-container.layout-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
/* Modül sayfasında yatay dolguyu .module-main-area verir; burada tekrar verilince yan boşluk ikiye katlanıyordu
   (masaüstü 68px, mobil 32px). Ana sayfa (Launchpad) module-main-area kullanmadığı için etkilenmez. */
.module-main-area .fiyop-main-container.layout-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

footer {
  margin-top: auto;
  padding: 18px 0;
  border-top: 1px solid var(--fiyop-border);
  background: var(--fiyop-surface);
  font-size: 0.85rem;
  color: var(--fiyop-text-muted);
}
.module-layout-wrapper {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 66px);
  width: 100%;
  background-color: var(--fiyop-bg);
}

/* Sol Modül Menüsü (Sidebar) */
.fiyop-sidebar {
  width: 270px;
  min-width: 270px;
  background-color: var(--fiyop-surface);
  border-right: 1px solid var(--fiyop-border);
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 66px;
  height: calc(100vh - 66px);
  max-height: calc(100vh - 66px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 90;
  align-self: flex-start;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.fiyop-sidebar::-webkit-scrollbar {
  width: 4px;
}

.fiyop-sidebar::-webkit-scrollbar-thumb {
  background: var(--fiyop-border);
  border-radius: 4px;
}

.sidebar-header {
  padding: 16px 14px;
  border-bottom: 1px solid var(--fiyop-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Uzun modül adı ikon ile sayaç arasında satır kırar; sayaç ve ikon sıkışmaz */
.sidebar-module-count {
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-module-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--fiyop-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sidebar-module-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: var(--fiyop-surface);
  border: 1px solid var(--fiyop-primary);
  color: var(--fiyop-primary);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}


.sidebar-module-icon i {
  color: var(--fiyop-primary);
}

.sidebar-action-btn {
  width: 100%;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 6px var(--fiyop-blue-soft);
  transition: all 0.2s ease;
}

.sidebar-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--fiyop-blue-glow);
}

/* Her bağlantı ve grup kendi bölümünde durur: komşu öğeler arasında 8px (4+4) nefes payı */
.sidebar-nav-section {
  padding: 4px 14px;
}

/* Bölüm başlığı: üstte belirgin ayırıcı boşluk, altında kendi listesine yakın */
.sidebar-nav-baslik {
  padding: 22px 14px 6px;
}

/* Sol kenar, bağlantıdaki 12px dolgu + 3px kenarlık ile aynı çizgide (simgeler ve başlık hizalı) */
.sidebar-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fiyop-text-muted);
  padding: 0 12px 0 15px;
  margin: 0;
}

.sidebar-body {
  padding-bottom: 16px;
}

.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--fiyop-text-main);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.sidebar-link-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-link i {
  font-size: 1.05rem;
  color: var(--fiyop-text-muted);
  transition: color 0.15s ease;
}

.sidebar-link:hover {
  background-color: var(--fiyop-surface-subtle);
  color: var(--fiyop-blue);
}

.sidebar-link:hover i {
  color: var(--fiyop-blue);
}

.sidebar-link.active {
  background-color: var(--fiyop-primary-soft);
  color: var(--fiyop-primary);
  font-weight: 600;
  border-left-color: var(--fiyop-primary);
}

.sidebar-link.active i {
  color: var(--fiyop-primary);
}

.sidebar-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background-color: var(--fiyop-gray-200);
  color: var(--fiyop-gray-600);
}

.sidebar-badge.badge-primary {
  background-color: var(--fiyop-blue-soft);
  color: var(--fiyop-blue);
}

.sidebar-badge.badge-warning {
  background-color: var(--fiyop-warning-soft);
  color: var(--fiyop-warning-text);
}

/* Açılır-Kapanır (Collapsible) Yan Menü Grupları */
.sidebar-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--fiyop-text-main);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
  /* Bağlantıdaki 3px şeffaf sol kenarlıkla aynı: iki türün simgesi aynı çizgide durur */
  border-left: 3px solid transparent;
  background: transparent;
  width: 100%;
}

.sidebar-dropdown-toggle i:not(.chevron-icon) {
  font-size: 1.05rem;
  color: var(--fiyop-secondary);
  transition: color 0.15s ease;
}

.sidebar-dropdown-toggle:hover {
  background-color: var(--fiyop-surface-subtle);
  color: var(--fiyop-blue);
}

.sidebar-dropdown-toggle:hover i:not(.chevron-icon),
.sidebar-dropdown-toggle.active-parent i:not(.chevron-icon) {
  color: var(--fiyop-blue);
}

.sidebar-dropdown-toggle .chevron-icon {
  font-size: 0.72rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--fiyop-text-muted);
}

.sidebar-dropdown-toggle[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

.sidebar-dropdown-toggle.active-parent {
  color: var(--fiyop-blue);
  font-weight: 600;
}

.sidebar-submenu {
  list-style: none;
  /* Kılavuz çizgisi grup simgesinin ortasından iner, alt öğe metni grup metniyle yaklaşık aynı hizada başlar */
  padding: 2px 0 2px 6px;
  margin: 2px 0 6px 23px;
  border-left: 1.5px solid var(--fiyop-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-submenu .sidebar-link {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  border-left: none;
  border-radius: 8px;
}

.sidebar-submenu .sidebar-link.active {
  background-color: var(--fiyop-primary-soft);
  color: var(--fiyop-primary);
  font-weight: 600;
}

/* Tüm Açılır Menü ve Dropdown Standartları (Kurumsal Tema Uyumu) */
.dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--fiyop-border);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  padding: 6px;
}

.dropdown-item {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--fiyop-text-main);
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--fiyop-surface-subtle);
  color: var(--fiyop-blue);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--fiyop-primary-dolgu);
  color: var(--fiyop-white);
}

.dropdown-item i {
  color: var(--fiyop-secondary);
  transition: color 0.15s ease;
}

.dropdown-item:hover i {
  color: var(--fiyop-blue);
}

.dropdown-item.active i {
  color: var(--fiyop-white);
}

/* Orta Modül İçerik Alanı (Main Dashboard Area) */
.module-main-area {
  flex-grow: 1;
  padding: 24px 20px;
  min-width: 0; /* flex container taşmasını önler */
}

.module-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.module-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--fiyop-text-muted);
  margin-bottom: 4px;
}

.module-breadcrumb a {
  color: var(--fiyop-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.module-breadcrumb a:hover {
  color: var(--fiyop-blue);
}

.module-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fiyop-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-sidebar-toggle {
  display: none;
}

@media (max-width: 991.98px) {
  .fiyop-sidebar {
    position: fixed;
    top: 66px;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  }

  .fiyop-sidebar.sidebar-open {
    transform: translateX(0);
  }

  .mobile-sidebar-toggle {
    display: inline-flex;
  }

  .module-main-area {
    padding: 18px 12px;
  }
}

/* ==========================================================================
   MODÜL VERİ KARTI, TABLO VE DURUM ROZETLERİ (prototip fiyop.css'den)
   ========================================================================== */
.fiyop-card {
  background-color: var(--fiyop-surface);
  border: 1px solid var(--fiyop-border);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  margin-bottom: 24px;
}

.fiyop-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--fiyop-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--fiyop-surface);
}
/* Süzgeç formu gibi geniş içerik başlıktan taşmasın: öğeler daralabilir ve kapsayıcıyı aşmaz */
.fiyop-card-header > * {
  min-width: 0;
  max-width: 100%;
}

.fiyop-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fiyop-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fiyop-card-body {
  padding: 20px;
}

/* Dar ekranda kart içi dolgu azalır; içeriğe (tablo, kart, form) daha çok yer kalır */
@media (max-width: 767.98px) {
  .fiyop-card-header { padding: 12px 16px; }
  .fiyop-card-body { padding: 16px; }
}

/* Kaydırma kabı konumlandırılır: içindeki mutlak konumlu öğeler (.visually-hidden başlık metni) kabın
   dışına göre yerleşip sayfayı yatay taşırmasın (390 px'te ekstre 460 px taşıyordu) */
.table-responsive { position: relative; }

.fiyop-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.fiyop-table th {
  background-color: var(--fiyop-surface-subtle);
  color: var(--fiyop-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 18px;
  border-bottom: 1px solid var(--fiyop-border);
  white-space: nowrap;
}

.fiyop-table td {
  padding: 14px 18px;
  vertical-align: middle;
  border-bottom: 1px solid var(--fiyop-border);
  font-size: 0.85rem;
  color: var(--fiyop-text-main);
  background-color: var(--fiyop-surface);
}

.fiyop-table tr:hover td {
  background-color: var(--fiyop-surface-yari);
}

/* Dokunmatik hedef en az 44×44px (tasarım kuralı; prototipte 32px) */
.table-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fiyop-border);
  background-color: var(--fiyop-surface);
  color: var(--fiyop-text-muted);
  font-size: 0.9rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

.table-action-btn:hover {
  background-color: var(--fiyop-surface-subtle);
  color: var(--fiyop-blue);
  border-color: var(--fiyop-blue);
}

/* Cari kart görünümü: kartlar süzgeç kartının dışında, ayrı ayrı çizilir. Geniş ekranda çok sütun, dar ekranda tek sütun
   (min(100%, …) telefonda taşmayı önler; özel kırılım yok) */
.cari-kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Kartın tamamı tıklanabilir: başlık bağlantısının ::after'ı kartı kaplar, iç bağlantılar üstte kalır */
/* Kart dikey esnek kutudur: iletişim bloğu kalan boşluğu alır, "son iletişim" satırı her kartta aynı hizada alta oturur */
.cari-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fiyop-surface);
  border: 1px solid var(--fiyop-border);
  border-left: 4px solid var(--fiyop-border-hover);
  border-radius: 12px;
  padding: 0.875rem 0.875rem 0.75rem;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cari-kart-ust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cari-kart-meta {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--fiyop-text-muted);
  overflow-wrap: anywhere;
}

/* Tür, durum ve etiketler tek sırada; tür rozeti durum rozetiyle aynı hap biçiminde */
.cari-kart-rozetler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.cari-kart-rozetler .badge {
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.74rem;
  font-weight: 600;
}

/* Kapalı gelen cari arama paneli: arama düğmesi açık durumu belli eder, etkin arama/süzgeçte köşede nokta görünür;
   panel içindeki form dar kalır (tüm kart genişliğine yayılmaz) */
.cari-arama-dugme {
  position: relative;
}

.cari-arama-dugme[aria-expanded="true"] {
  background-color: var(--fiyop-primary-soft);
  border-color: var(--fiyop-primary);
  color: var(--fiyop-primary);
}

.cari-arama-nokta {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fiyop-accent);
  border: 2px solid var(--fiyop-surface);
  box-sizing: content-box;
}

.cari-arama-paneli {
  padding-top: 12px;
  padding-bottom: 12px;
}

.cari-arama-paneli [role="search"] {
  max-width: 36rem;
}

/* Sağ üst simge kümesi: tür (müşteri/tedarikçi) ve durum yazısız yuvarlak simgelerdir, anlam title/aria-label'de.
   Başlık simgelerin altına girmesin diye üst satırın sağ boşluğu simge sayısına göre ayarlanır (28px simge + 4px aralık). */
.cari-kart-simgeler {
  position: absolute;
  top: 0.625rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.cari-simge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  background: var(--fiyop-surface-subtle);
  color: var(--fiyop-text-muted);
}

.cari-simge-tip { color: var(--fiyop-primary); background: var(--fiyop-primary-soft); }
.cari-simge-aktif { color: var(--fiyop-success-metin); background: color-mix(in srgb, var(--fiyop-success-metin) 14%, transparent); }
.cari-simge-potansiyel { color: var(--fiyop-warning-text); background: var(--fiyop-warning-soft); }
.cari-simge-pasif { color: var(--fiyop-text-muted); background: var(--fiyop-surface-subtle); }

.cari-kart-simge-1 .cari-kart-ust { padding-right: calc(28px + 0.5rem); }
.cari-kart-simge-2 .cari-kart-ust { padding-right: calc(60px + 0.5rem); }
.cari-kart-simge-3 .cari-kart-ust { padding-right: calc(92px + 0.5rem); }

.cari-kart-iletisimsiz {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--fiyop-text-muted);
}

.cari-kart-alt {
  margin-top: auto;
  padding-top: 0.625rem;
  font-size: 0.8rem;
}

/* Alt eylem çubuğu: ara / e-posta / web / vergi no kopyala; kart bağlantısının üstünde, 44px dokunma hedefi */
.cari-kart-eylemler {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--fiyop-border);
}

.cari-eylem {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--fiyop-border);
  border-radius: 10px;
  background: var(--fiyop-surface);
  color: var(--fiyop-primary);
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.cari-eylem:hover,
button.cari-eylem:hover {
  background: var(--fiyop-primary-soft);
  border-color: var(--fiyop-primary);
}

.cari-eylem:focus-visible {
  outline: 2px solid var(--fiyop-secondary);
  outline-offset: 2px;
}

.cari-eylem-pasif {
  opacity: 0.4;
  background: var(--fiyop-surface-subtle);
  cursor: default;
}

/* Vergi no kopyalama sağa yaslı: iletişim eylemlerinden ayrı durur */
.cari-eylem-kopya {
  margin-left: auto;
}

.cari-eylem-kopya.kopyalandi {
  background: var(--fiyop-primary-soft);
  border-color: var(--fiyop-primary);
}

/* "Kopyalandı" ipucu: JS yalnızca sınıfı ekler, metin CSS'tedir */
.cari-eylem-kopya.kopyalandi::after {
  content: "Kopyalandı";
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--fiyop-primary-dolgu);
  color: var(--fiyop-white);
  font-size: 0.72rem;
  white-space: nowrap;
}

.cari-kart-tip-musteri { border-left-color: var(--fiyop-secondary); }
.cari-kart-tip-tedarikci { border-left-color: var(--fiyop-primary); }
.cari-kart-tip-her_ikisi { border-left-color: var(--fiyop-accent); }

.cari-kart:hover,
.cari-kart:focus-within {
  border-color: var(--fiyop-border-hover);
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.14);
  transform: translateY(-1px);
}

.cari-kart-baslik {
  /* Uzun ünvan telefonda tek satırda kesilmesin: en çok iki satır, tamamı title özniteliğinde.
     Dokunma hedefi için min-height gerekmez: kartın tamamı ::after ile tıklanabilir. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 0.95rem;
  line-height: 1.3;
  text-decoration: none;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.cari-kart-baslik::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.cari-kart-baslik:focus-visible::after {
  outline: 2px solid var(--fiyop-secondary);
  outline-offset: 2px;
}

.cari-kart .cari-avatar {
  width: 44px;
  height: 44px;
  font-size: 0.95rem;
}

.cari-kart-satir {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Sabit genişlikli simge sütunu: metinler her satırda aynı çizgiden başlar */
.cari-kart-satir > i {
  width: 1.1rem;
  text-align: center;
  color: var(--fiyop-secondary);
  flex-shrink: 0;
  line-height: 1.5;
}

/* Telefon / e-posta bağlantısı kart bağlantısının üstünde kalır; dokunma hedefi 44px (cari detayındaki kişi kartları) */
.cari-kart-satir a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -0.65rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .cari-kart { transition: none; }
  .cari-kart:hover,
  .cari-kart:focus-within { transform: none; }
}

/* Cari avatarı: beyaz zemin + modül rengi çerçeve; metin koyu ton (WCAG AA) */
.cari-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--mod-renk, var(--fiyop-primary));
  background: var(--fiyop-surface);
  color: var(--mod-renk-koyu, var(--fiyop-primary));
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.min-w-0 {
  min-width: 0;
}

.fiyop-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.74rem;
  font-weight: 600;
}

.status-pending {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.status-approved {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.status-draft {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-text-emphasis);
}

.status-overdue {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

/* Etiket paleti: renk anahtarı (frm_etiketler.renk) sınıfa eşlenir; CSP satır içi stile izin vermez */
.fiyop-etiket {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
}

.etiket-mavi {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.etiket-yesil {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.etiket-turuncu {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.etiket-kirmizi {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

.etiket-gri {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-text-emphasis);
}

@media (prefers-reduced-motion: reduce) {
  .table-action-btn {
    transition: none;
  }
}

/* ==========================================================================
   ERİŞİLEBİLİRLİK (ACCESSIBILITY / a11y) & KLAVYE ODAK STANDARTLARI (WCAG 2.1 AA)
   ========================================================================== */
/* Odak halkası !important ile korunur: Bootstrap bileşenleri `outline: 0` ile halkayı kaldırır, klavye erişimi (WCAG 2.4.7) bozulmamalı */
:focus-visible {
  outline: 2px solid var(--fiyop-secondary) !important;
  outline-offset: 2px !important;
}

.nav-icon-btn:focus-visible,
.tenant-select-btn:focus-visible,
.user-profile-btn:focus-visible,
.spotlight-trigger:focus-visible,
.drawer-action-item:focus-visible,
.table-action-btn:focus-visible,
.chat-header-btn:focus-visible,
.chat-input-action-btn:focus-visible,
.chat-send-btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--fiyop-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.25) !important;
}

.sidebar-link:focus-visible {
  outline: 2px solid var(--fiyop-primary) !important;
  outline-offset: -2px !important;
  background-color: var(--fiyop-surface-subtle) !important;
}

.spotlight-item:focus-visible {
  outline: 2px solid var(--fiyop-primary) !important;
  outline-offset: -2px !important;
  background-color: var(--fiyop-surface-subtle) !important;
}

/* Ekran Okuyucu Yardımcı Sınıfı (Screen Readers Only); Bootstrap .visually-hidden ile aynı gerekçeyle !important */
.sr-only,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Klavye ile İçeriğe Atlama Bağlantısı (Skip to Content Link) */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  background: var(--fiyop-primary-dolgu);
  color: var(--fiyop-white);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25);
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 12px;
  outline: 2px solid var(--fiyop-white) !important;
  outline-offset: 2px !important;
  color: var(--fiyop-white);
}


/* Düzen iskeleti: gövde dikey flex olduğundan içerik alanı boşluğu doldurur, alt bilgi dibe yaslanır */
.module-layout-wrapper {
  flex: 1 0 auto;
}

/* ==========================================================================
   BÖLÜM: GİRİŞ SAYFASI (giris.html) BİLEŞENLERİ
   ========================================================================== */

/* ==========================================================================
   SAYFA DÜZENİ VE ARKA PLAN
   ========================================================================== */
body.giris-page {
  font-family: var(--fiyop-font-body);
  background-color: var(--fiyop-bg);
  color: var(--fiyop-text-main);
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

.giris-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ==========================================================================
   GİRİŞ KARTI (index.html Kart & Yüzey Teması)
   ========================================================================== */
.giris-card-container {
  width: 100%;
  max-width: 420px;
  animation: cardFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.giris-card {
  background: var(--fiyop-surface);
  border: 1px solid var(--fiyop-border);
  border-radius: 20px;
  padding: 36px 30px;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 10px 24px -5px rgba(15, 23, 42, 0.05);
}

/* ==========================================================================
   KAYIT OL (FİRMA KAYIT FORMU) STİLLERİ
   ========================================================================== */
.kayit-card-container {
  width: 100%;
  max-width: 520px;
  animation: cardFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kayit-card {
  background: var(--fiyop-surface);
  border: 1px solid var(--fiyop-border);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 16px 36px -8px rgba(15, 23, 42, 0.07);
}

.kayit-section-card {
  background: var(--fiyop-surface-subtle);
  border: 1px solid var(--fiyop-border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 24px;
}

.kayit-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fiyop-border);
}

.kayit-section-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--fiyop-info-soft);
  color: var(--fiyop-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.kayit-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fiyop-text-main);
  margin: 0;
}

.kayit-section-desc {
  font-size: 0.78rem;
  color: var(--fiyop-text-muted);
  margin: 0;
}

.giris-select {
  width: 100%;
  height: 46px;
  padding: 8px 14px 8px 42px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fiyop-text-main);
  background-color: var(--fiyop-surface);
  border: 1.5px solid var(--fiyop-border);
  border-radius: 12px;
  transition: all 0.2s ease;
  outline: none;
  cursor: pointer;
}

.giris-select:focus {
  border-color: var(--fiyop-blue);
  box-shadow: 0 0 0 3.5px var(--fiyop-blue-soft);
}

.giris-textarea {
  width: 100%;
  padding: 10px 14px 10px 42px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fiyop-text-main);
  background-color: var(--fiyop-surface);
  border: 1.5px solid var(--fiyop-border);
  border-radius: 12px;
  transition: all 0.2s ease;
  outline: none;
  min-height: 80px;
  resize: vertical;
}

.giris-textarea:focus {
  border-color: var(--fiyop-blue);
  box-shadow: 0 0 0 3.5px var(--fiyop-blue-soft);
}

@media (max-width: 767.98px) {
  .kayit-card {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .kayit-section-card {
    padding: 16px 14px;
  }
}

/* Marka Başlığı (index.html ile Özdeş) */
.giris-brand-header {
  margin-bottom: 24px;
}

.giris-brand-header .brand-logo {
  font-family: var(--fiyop-font-heading);
  font-weight: 800;
  font-size: 1.65rem;
  color: var(--fiyop-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  letter-spacing: -0.5px;
}

.giris-brand-header .brand-logo .dot {
  width: 8px;
  height: 8px;
  background-color: var(--fiyop-accent);
  border-radius: 50%;
  display: inline-block;
}

.giris-brand-subtitle {
  font-size: 0.85rem;
  color: var(--fiyop-text-muted);
  font-weight: 500;
  margin: 0;
}

/* ==========================================================================
   FORM ELEMANLARI (index.html Girdi Alanları ile Birebir)
   ========================================================================== */
.giris-form-group {
  margin-bottom: 18px;
}

.giris-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fiyop-text-main);
  margin-bottom: 7px;
}

/* Otomatik Algılanan Firma Rozeti */
.detected-company-pill {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--fiyop-blue);
  background: var(--fiyop-blue-soft);
  border: 1px solid var(--fiyop-info-border);
  padding: 2px 8px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.detected-company-pill i {
  color: var(--fiyop-blue);
}

.giris-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.giris-input-icon {
  position: absolute;
  left: 14px;
  color: var(--fiyop-text-muted);
  font-size: 1.1rem;
  pointer-events: none;
  transition: color 0.2s ease;
}

.giris-input {
  width: 100%;
  height: 46px;
  padding: 8px 14px 8px 42px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fiyop-text-main);
  background-color: var(--fiyop-surface);
  border: 1.5px solid var(--fiyop-border);
  border-radius: 12px;
  transition: all 0.2s ease;
  outline: none;
}

.giris-input::placeholder {
  color: var(--fiyop-text-muted);
  font-weight: 400;
}

.giris-input:hover {
  border-color: var(--fiyop-border-hover);
}

.giris-input:focus {
  border-color: var(--fiyop-blue);
  box-shadow: 0 0 0 3.5px var(--fiyop-blue-soft);
}

.giris-input-wrapper:focus-within .giris-input-icon {
  color: var(--fiyop-blue);
}

/* Şifre Göster/Gizle Butonu */
.giris-password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--fiyop-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease;
}

.giris-password-toggle:hover {
  color: var(--fiyop-text-main);
}

/* ==========================================================================
   ÖZEL SEÇİM KUTULARI (Beni Hatırla)
   ========================================================================== */
.giris-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 24px 0;
  font-size: 0.82rem;
}

.fiyop-custom-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  transition: all 0.2s ease;
}

.fiyop-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fiyop-check-box {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1.5px solid var(--fiyop-border-hover);
  background-color: var(--fiyop-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fiyop-white);
  font-size: 0.8rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fiyop-check-box i {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fiyop-custom-check:hover .fiyop-check-box {
  border-color: var(--fiyop-blue);
  background-color: var(--fiyop-blue-soft);
}

.fiyop-check-input:checked + .fiyop-check-box {
  background: linear-gradient(135deg, var(--fiyop-blue) 0%, var(--fiyop-blue-hover) 100%);
  border-color: var(--fiyop-blue);
  box-shadow: 0 2px 8px var(--fiyop-blue-glow);
}

.fiyop-check-input:checked + .fiyop-check-box i {
  opacity: 1;
  transform: scale(1);
}

.fiyop-check-input:focus-visible + .fiyop-check-box {
  box-shadow: 0 0 0 3.5px var(--fiyop-blue-soft);
  border-color: var(--fiyop-blue);
}

.fiyop-check-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fiyop-gray-600);
  transition: color 0.2s ease;
}

.fiyop-custom-check:hover .fiyop-check-text {
  color: var(--fiyop-primary);
}

.fiyop-check-input:checked ~ .fiyop-check-text {
  color: var(--fiyop-primary);
}

.giris-forgot-link {
  color: var(--fiyop-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  transition: color 0.2s ease;
}

.giris-forgot-link:hover {
  color: var(--fiyop-blue);
}

/* Giriş sayfası alt bilgisi: yalnızca marka satırı; bağlanmamış bağlantı (KVKK, Destek) yok */
.giris-footer {
  background-color: var(--fiyop-surface);
  border-top: 1px solid var(--fiyop-border);
  padding: 16px 0;
  font-size: 0.82rem;
  color: var(--fiyop-text-muted);
}

.giris-footer-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.giris-footer-links a {
  color: var(--fiyop-text-muted);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s ease;
}

.giris-footer-links a:hover {
  color: var(--fiyop-accent);
}

/* ==========================================================================
   ANA GİRİŞ BUTONU (index.html Mavi Buton Teması)
   ========================================================================== */
.btn-giris-submit {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, var(--fiyop-blue) 0%, var(--fiyop-blue-hover) 100%);
  color: var(--fiyop-white);
  border: none;
  border-radius: 12px;
  font-family: var(--fiyop-font-heading);
  font-size: 0.94rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px -2px var(--fiyop-blue-glow);
  transition: all 0.2s ease;
}

.btn-giris-submit:hover {
  background: linear-gradient(135deg, var(--fiyop-blue-hover) 0%, var(--fiyop-blue-active) 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -2px var(--fiyop-blue-glow);
}

.btn-giris-submit:active {
  transform: translateY(0);
}

.btn-giris-submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   ÜST MENÜ AÇILIR GENİŞLİKLERİ
   Satır içi style CSP (style-src 'self') ile engellendiğinden genişlik sınıfla verilir.
   ========================================================================== */
.fiyop-menu-genis {
  min-width: 260px;
}

.fiyop-menu-dar {
  min-width: 240px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 575.98px) {
  .giris-card {
    padding: 28px 20px;
    border-radius: 18px;
  }
}

/* Destek talebi yazışması: müşteri mesajı solda, ekip yanıtı vurgulu; iç not sarı zeminle ayrılır (metin etiketiyle de) */
.destek-akis { display: flex; flex-direction: column; gap: 1rem; }
.destek-mesaj { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 0.875rem 1rem; background: var(--fiyop-surface); }
.destek-mesaj-ekip { border-color: var(--fiyop-secondary); background: var(--bs-light); }
.destek-mesaj-ic-not { border-style: dashed; background: var(--bs-warning-bg-subtle); }
.destek-mesaj-icerik { overflow-wrap: anywhere; }
.destek-ek { width: 220px; max-width: 100%; }
.destek-ek img, .destek-ek video { display: block; width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--bs-border-color); background: #000; }
.destek-ek img { background: var(--fiyop-surface); }

/* Dokunmatik hedefler: dokunmatik ekranda etkileşimli öğeler en az 44px (WCAG / tasarım kuralı); masaüstü yoğunluğu korunur */
@media (pointer: coarse) {
  .btn,
  .btn-sm,
  .form-control,
  .form-select,
  .sidebar-link,
  .sidebar-submenu .sidebar-link,
  .sidebar-dropdown-toggle {
    min-height: 44px;
  }
  .btn,
  .btn-sm {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
  }
}

/* Süzgeç açılır menüsü: .fiyop-card köşeleri kırpmak için overflow: hidden kullanır, bu da menüyü keser;
   menülü kartta kırpma kalkar ve başlık üst köşeleri karttan devralır */
.fiyop-card:has(.fiyop-filtre-menu) {
  overflow: visible;
}
.fiyop-card:has(.fiyop-filtre-menu) > .fiyop-card-header {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.fiyop-filtre-menu {
  min-width: 16rem;
  max-width: calc(100vw - 2rem);
}

/* Telefonda arama formu ve yanındaki eylem (ör. Yeni kayıt) kart genişliğini paylaşır; arama kutusu kalan yeri doldurur.
   !important: görünümlerdeki `flex-wrap` yardımcı sınıfı (kendisi !important) ezilmeli */
@media (max-width: 575.98px) {
  .fiyop-card-header > .d-flex:has(form[role="search"]) {
    flex-grow: 1;
    flex-wrap: nowrap !important;
  }
}

/* ==========================================================================
   CARİ DETAY: profil başlığı, bölüm gezinmesi, bilgi ızgarası, alt kayıt kartları, zaman çizelgesi
   ========================================================================== */
.cari-profil {
  padding: 1.25rem;
}

.cari-profil-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.cari-avatar-buyuk {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-size: 1.25rem;
}

.cari-profil-kimlik {
  flex: 1 1 14rem;
  min-width: 0;
}

.cari-profil-ad {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fiyop-primary);
  overflow-wrap: anywhere;
}

.cari-profil-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.cari-profil-eylem {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.cari-profil-iletisim {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fiyop-border);
}

/* Tek dokunuşla ara / e-posta gönder / siteyi aç; dokunma hedefi 44px */
.cari-iletisim-bagi {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  max-width: 100%;
  padding: 0 0.9rem;
  border: 1px solid var(--fiyop-border);
  border-radius: 999px;
  color: var(--fiyop-text-main);
  font-size: 0.875rem;
  text-decoration: none;
}

.cari-iletisim-bagi > span {
  overflow-wrap: anywhere;
}

.cari-iletisim-bagi:hover {
  border-color: var(--fiyop-border-hover);
  background: var(--fiyop-surface-subtle);
}

.cari-bolumler {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--fiyop-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.cari-bolumler button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--fiyop-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.cari-bolumler button:hover {
  border-bottom-color: var(--fiyop-border-hover);
  color: var(--fiyop-primary);
}

/* Etkin sekme yalnızca renkle değil kalın alt çizgiyle de ayrılır */
.cari-bolumler button.active {
  border-bottom-color: var(--fiyop-primary);
  color: var(--fiyop-primary);
}

.cari-bolum-sayi {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--fiyop-surface-subtle);
  font-size: 0.75rem;
}

#genel, #etiketler, #kisiler, #adresler, #etkilesimler {
  scroll-margin-top: 5rem;
}

.cari-grup-baslik {
  margin: 1.5rem 0 0.75rem;
  color: var(--fiyop-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fiyop-card-body > .cari-grup-baslik:first-child {
  margin-top: 0;
}

.cari-bilgi-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
}

.cari-bilgi-izgara dt {
  color: var(--fiyop-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.cari-bilgi-izgara dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.cari-notlar {
  margin: 0;
  overflow-wrap: anywhere;
}

.cari-etiket-ekle summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--fiyop-primary);
  font-weight: 600;
  cursor: pointer;
}

.cari-alt-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.cari-alt-kart {
  min-width: 0;
  padding: 0.875rem;
  border: 1px solid var(--fiyop-border);
  border-radius: 12px;
}

.cari-alt-ust {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.cari-alt-eylem {
  display: flex;
  flex-shrink: 0;
  gap: 0.35rem;
}

/* Boş durum (ortak parça parcalar/bos_durum.php): ortalanmış ikon, soluk metin, isteğe bağlı eylem.
   İkon opaklıkla soluklaştırılmaz; non-metin görsel için kontrast 3:1 korunsun diye renk token'ı kullanılır. */
.fiyop-bos-durum {
  padding: 2rem 1rem;
  color: var(--fiyop-text-muted);
  text-align: center;
}

.fiyop-bos-durum > i {
  display: block;
  font-size: 2rem;
  color: var(--fiyop-text-muted);
}

.fiyop-bos-durum > i + p {
  margin: 0.5rem 0 0;
}

.fiyop-bos-durum .btn {
  margin-top: 0.75rem;
}

.fiyop-bos-durum--kompakt {
  padding: 1rem;
  font-size: 0.85rem;
  text-align: left;
}

.fiyop-bos-durum--kompakt > i {
  font-size: 1.25rem;
}

/* Renk token'ları: sabit renk yerine sistem yüzey/metin rolleri (açık ve koyu temada aynı anlam) */
.fiyop-yuzey-hafif {
  background-color: var(--fiyop-surface-subtle);
}

.fiyop-metin-ana {
  color: var(--fiyop-text-main);
}

/* Nötr sayı/durum rozeti: yüzey + sınır + soluk metin (eski bg-light text-secondary border yerine) */
.fiyop-rozet-notr {
  background-color: var(--fiyop-surface-subtle);
  color: var(--fiyop-text-muted);
  border: 1px solid var(--fiyop-border);
}

/* Etiket üzerindeki kaldır düğmesi: dokunma hedefi 44px; negatif kenar boşluğu etiket boyutunu korur */
.fiyop-etiket-kaldir {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -12px -8px -12px 0;
}

.cari-zaman {
  margin: 0;
  padding: 1rem;
  list-style: none;
}

.cari-zaman-oge {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
}

.cari-zaman-oge:last-child {
  padding-bottom: 0;
}

.cari-zaman-oge:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 0;
  left: 17px;
  width: 2px;
  background: var(--fiyop-border);
}

.cari-zaman-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--fiyop-border-hover);
  border-radius: 50%;
  background: var(--fiyop-surface);
  color: var(--fiyop-primary);
}

.cari-zaman-icerik {
  flex: 1;
  min-width: 0;
}

.cari-zaman-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Cari detay: ilişkili kayıt listesi (teklif, sipariş, proje) */
.cari-iliski-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cari-iliski-liste > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--fiyop-border);
}

.cari-iliski-sag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#iliskili, #teklifler, #siparisler, #projeler {
  scroll-margin-top: 5rem;
}

/* ==========================================================================
   ALT ÇUBUK (uygulama sayfaları): masaüstü ve tablette ekrana sabit.
   Mobilde (768 px altı) çubuk akışta kalır; bu kurallar uygulanmaz.
   Sayfa gövdesi, menü ve düzen çubuğun yüksekliği kadar boşluk bırakır.
   ========================================================================== */
@media (min-width: 768px) {
  body.uygulama-govdesi {
    padding-bottom: var(--fiyop-alt-bar-yukseklik);
  }

  .uygulama-alt-bilgi {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    height: var(--fiyop-alt-bar-yukseklik);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--fiyop-border);
    background: var(--fiyop-surface);
  }

  .module-layout-wrapper {
    min-height: calc(100vh - 66px - var(--fiyop-alt-bar-yukseklik));
  }

  .fiyop-sidebar {
    height: calc(100vh - 66px - var(--fiyop-alt-bar-yukseklik));
    max-height: calc(100vh - 66px - var(--fiyop-alt-bar-yukseklik));
  }
}

.alt-bilgi-surum {
  white-space: nowrap;
}

/* KVKK/İYS izin onay sayfası (girişsiz, /izin/{kod}) */
/* Kimlik sayfalarının 420 px kutusu onay formu için dar; yalnızca bu sayfada genişler */
.giris-card-container:has(.izin-onay) {
  max-width: 680px;
}

.izin-onay {
  margin: 0 auto;
}

.izin-onay .izin-ust {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--fiyop-border);
}

.izin-onay .izin-firma {
  margin: 0 0 0.25rem;
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--fiyop-primary);
}

.izin-onay .izin-karsilama {
  margin: 0 0 0.5rem;
  color: var(--fiyop-text-main);
}

.izin-onay .izin-gecerlilik {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--fiyop-surface-subtle);
  color: var(--fiyop-text-muted);
  font-size: 0.875rem;
}

.izin-onay .izin-bolum {
  border: 0;
  padding: 0;
  margin: 1.5rem 0 0;
}

.izin-onay .izin-bolum > legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fiyop-primary);
}

.izin-onay .izin-adim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--fiyop-primary-dolgu);
  color: var(--fiyop-surface);
  font-size: 0.875rem;
}

.izin-onay .onay-karti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--fiyop-border);
  border-radius: 12px;
  background: var(--fiyop-surface);
}

.izin-onay .onay-karti:focus-within {
  border-color: var(--fiyop-secondary);
}

.izin-onay .onay-satiri {
  display: flex;
  flex: 1 1 18rem;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.6rem 0;
  cursor: pointer;
}

.izin-onay .onay-satiri input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
}

.izin-onay .izin-oku {
  min-height: 44px;
  padding: 0 0.25rem;
  white-space: nowrap;
}

.izin-onay .izin-aciklama {
  margin: 0 0 0.75rem;
  color: var(--fiyop-text-muted);
}

.izin-onay .izin-aciklama .izin-oku {
  display: inline;
  min-height: 44px;
  vertical-align: baseline;
}

.izin-onay .kanal-satiri {
  border: 1px solid var(--fiyop-border);
  border-radius: 12px;
  padding: 0.75rem;
  margin: 0 0 0.5rem;
}

.izin-onay .kanal-satiri > legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* Evet/Hayır: radyo girişi korunur (klavye, ekran okuyucu), görünüm segment düğmesidir */
.izin-onay .evet-hayir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.izin-onay .evet-hayir label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--fiyop-border-hover);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

.izin-onay .evet-hayir input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.izin-onay .evet-hayir label:has(input:checked) {
  border-color: var(--fiyop-primary-dolgu);
  background: var(--fiyop-primary-dolgu);
  color: var(--fiyop-surface);
}

.izin-onay .evet-hayir label:has(input:focus-visible) {
  outline: 3px solid var(--fiyop-secondary);
  outline-offset: 2px;
}

.izin-onay .form-hata {
  color: var(--bs-danger);
  margin: 0.25rem 0 0.5rem;
}

.izin-onay .izin-gonder {
  margin-top: 1.5rem;
}

.izin-onay .izin-gonder .btn {
  width: 100%;
  min-height: 48px;
}

.izin-onay .btn {
  min-height: 44px;
}

/* Metin okuma penceresi: izin onay sayfası ve metin yönetimi önizlemesi */
.izin-dialog {
  width: min(42rem, calc(100vw - 2rem));
  max-height: 85vh;
  padding: 0;
  border: 1px solid var(--fiyop-border);
  border-radius: 16px;
  background: var(--fiyop-surface);
  color: var(--fiyop-text-main);
}

.izin-dialog[open] {
  display: flex;
  flex-direction: column;
}

.izin-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.izin-dialog-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fiyop-border);
}

.izin-dialog-ust .btn {
  flex: none;
  min-height: 44px;
}

.izin-metin-icerik {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Script çalışmıyorsa pencereler açılamaz: metinler sayfada satır içi gösterilir */
html:not(.js) .izin-dialog {
  display: block;
  width: auto;
  max-height: none;
  margin: 1rem 0;
}

html:not(.js) .izin-dialog-ust .btn,
html:not(.js) .izin-oku {
  display: none;
}

@media (max-width: 575.98px) {
  .izin-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .izin-onay .izin-gonder {
    position: sticky;
    bottom: 0;
    margin: 1.5rem -0.5rem 0;
    padding: 0.75rem 0.5rem;
    background: var(--fiyop-surface);
    border-top: 1px solid var(--fiyop-border);
  }
}

@media print {
  .izin-dialog {
    display: none;
  }
}

/* Metin yönetimi (/musteri/izin-metinleri) */
.izin-metin-kartlari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.izin-metin-kartlari .fiyop-card {
  margin-bottom: 0;
}

.izin-metin-karti.secili {
  border-color: var(--fiyop-primary);
}

.izin-metin-eylemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.izin-metinleri .btn,
.izin-metin-kartlari .btn,
.izin-metin-eylemler .btn {
  min-height: 44px;
}

.izin-metin-formu .form-hata {
  color: var(--bs-danger);
  margin: 0.25rem 0 0;
}

/* ==========================================================================
   KARANLIK TEMA (html[data-bs-theme="dark"])
   Yalnızca token ezmeleri; bileşen kuralları token kullandığı için kendiliğinden uyar.
   Kontrast (WCAG AA): ana metin / yüzey 13.6:1, soluk 7.7:1, silik 5.3:1, bağlantı 7.1:1;
   beyaz / dolgu ≥ 5.3:1; form sınırı / yüzey 3.0:1. Bu blok dosyanın sonunda kalmalı (:root'u ezer).
   ========================================================================== */
:root[data-bs-theme="dark"] {
  color-scheme: dark;

  --fiyop-bg: #0E151D;
  --fiyop-surface: #151F2B;
  --fiyop-surface-subtle: #1C2837;
  --fiyop-border: #2A3849;
  --fiyop-border-hover: #3B4D63;

  --fiyop-text-main: #E4E9EF;
  --fiyop-text-muted: #A5B2C1;
  --fiyop-text-subtle: #8493A5;

  /* Ana/ikincil renk koyu zeminde metin ve bağlantı rengi olarak açılır; zemin rolü dolgu token'larında */
  --fiyop-primary: #8DB4E2;
  --fiyop-primary-hover: #A8C6EA;
  --fiyop-primary-active: #C2D6F0;
  --fiyop-navy: #8DB4E2;
  --fiyop-primary-dolgu: #2F5E96;
  --fiyop-primary-dolgu-hover: #3A6DAA;
  --fiyop-primary-dolgu-active: #274E7E;
  --fiyop-secondary: #6FB3C8;
  --fiyop-secondary-hover: #93CADA;
  --fiyop-secondary-active: #B0DAE6;
  --fiyop-secondary-soft: rgba(111, 179, 200, 0.16);
  --fiyop-teal: #6FB3C8;
  --fiyop-accent-soft: rgba(242, 107, 58, 0.18);
  --fiyop-accent-glow: rgba(242, 107, 58, 0.35);
  --fiyop-teal-light-soft: rgba(155, 180, 204, 0.14);

  --fiyop-blue: #2F5E96;
  --fiyop-blue-hover: #3A6DAA;
  --fiyop-blue-active: #274E7E;
  --fiyop-blue-glow: rgba(141, 180, 226, 0.28);
  --fiyop-blue-soft: rgba(141, 180, 226, 0.14);

  --fiyop-success-metin: var(--bs-success-text-emphasis);
  --fiyop-primary-soft: rgba(141, 180, 226, 0.12);
  --fiyop-surface-yari: rgba(21, 31, 43, 0.85);
  --fiyop-info-soft: rgba(96, 165, 250, 0.14);
  --fiyop-info-border: rgba(96, 165, 250, 0.3);

  --fiyop-gray-200: #2A3849;
  --fiyop-gray-600: #A5B2C1;
  --fiyop-warning-soft: #3A2E12;
  --fiyop-warning-text: #FCD34D;

  /* Bootstrap ezmeleri (:root'taki açık değerleri geri alır) */
  --bs-primary: #8DB4E2;
  --bs-primary-rgb: 141, 180, 226;
  --bs-secondary: #6FB3C8;
  --bs-secondary-rgb: 111, 179, 200;
  --bs-body-bg: #0E151D;
  --bs-body-bg-rgb: 14, 21, 29;
  --bs-body-color: #E4E9EF;
  --bs-body-color-rgb: 228, 233, 239;
  --bs-emphasis-color: #F3F6FA;
  --bs-secondary-color: #A5B2C1;
  --bs-secondary-bg: #1C2837;
  --bs-tertiary-bg: #151F2B;
  --bs-border-color: #2A3849;
  --bs-link-color: #6FB3C8;
  --bs-link-hover-color: #93CADA;
}

/* Form alanı sınırı bileşen kontrastı için (≥ 3:1) açılır */
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select,
:root[data-bs-theme="dark"] .form-check-input {
  border-color: #566B85;
}

/* Bootstrap'in açık yardımcı sınıfları !important ile koyuda da açık kalır; yüzeye bağlanır */
:root[data-bs-theme="dark"] .bg-light,
:root[data-bs-theme="dark"] .text-bg-light,
:root[data-bs-theme="dark"] .table-light {
  background-color: var(--fiyop-surface-subtle) !important;
  color: var(--fiyop-text-main) !important;
  --bs-table-bg: var(--fiyop-surface-subtle);
  --bs-table-color: var(--fiyop-text-main);
}

:root[data-bs-theme="dark"] .btn-light {
  --bs-btn-color: var(--fiyop-text-main);
  --bs-btn-bg: var(--fiyop-surface-subtle);
  --bs-btn-border-color: var(--fiyop-border-hover);
  --bs-btn-hover-color: var(--fiyop-text-main);
  --bs-btn-hover-bg: var(--fiyop-border);
  --bs-btn-hover-border-color: var(--fiyop-border-hover);
}

/* Yazdırma kâğıda gider: koyu temada da açık zemin ve koyu metin (arka plan rengi yazdırılmadığı için açık metin okunmaz olurdu) */
@media print {
  :root[data-bs-theme="dark"] {
    color-scheme: light;
    --fiyop-bg: #FFFFFF;
    --fiyop-surface: #FFFFFF;
    --fiyop-surface-subtle: #EEF2F6;
    --fiyop-border: #E0E5EB;
    --fiyop-text-main: #20242B;
    --fiyop-text-muted: #5B6675;
    --fiyop-text-subtle: #5B6675;
    --fiyop-primary: #1E3A5F;
    --fiyop-secondary: #3B7586;
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #20242B;
    --bs-emphasis-color: #000000;
    --bs-secondary-color: #5B6675;
    --bs-border-color: #E0E5EB;
  }
}

/* Kullanıcı menüsündeki görünüm (tema) seçici: üç düğme, seçili olan vurgulu. Dokunmatik hedef ≥ 44 px */
.tema-secici {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.tema-secici-dugme {
  flex: 1 1 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.25rem;
  border: 1px solid var(--fiyop-border);
  border-radius: 10px;
  background: transparent;
  color: var(--fiyop-text-main);
  font-size: 0.75rem;
  line-height: 1.1;
}

.tema-secici-dugme:hover {
  background: var(--fiyop-surface-subtle);
}

.tema-secici-dugme.aktif {
  border-color: var(--fiyop-primary);
  background: var(--fiyop-primary-soft);
  color: var(--fiyop-primary);
  font-weight: 700;
}

.tema-secici-dugme:focus-visible {
  outline: 2px solid var(--fiyop-secondary);
  outline-offset: 2px;
}

/* Koyu temada Bootstrap'in sabit metin/anahat renkleri (#dc3545, #198754, #6c757d) 4.5:1 vermez: vurgu tonlarına çekilir */
:root[data-bs-theme="dark"] .text-danger,
:root[data-bs-theme="dark"] .link-danger {
  color: var(--bs-danger-text-emphasis) !important;
}

:root[data-bs-theme="dark"] .text-success,
:root[data-bs-theme="dark"] .link-success {
  color: var(--bs-success-text-emphasis) !important;
}

:root[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--fiyop-text-muted);
  --bs-btn-border-color: #566B85;
  --bs-btn-hover-color: var(--fiyop-text-main);
  --bs-btn-hover-bg: var(--fiyop-surface-subtle);
  --bs-btn-hover-border-color: #566B85;
  --bs-btn-active-color: var(--fiyop-text-main);
  --bs-btn-active-bg: var(--fiyop-border);
  --bs-btn-active-border-color: #566B85;
  --bs-btn-disabled-color: var(--fiyop-text-subtle);
  --bs-btn-disabled-border-color: var(--fiyop-border);
}

:root[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
  --bs-btn-border-color: var(--bs-danger-text-emphasis);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b02a37;
  --bs-btn-hover-border-color: #b02a37;
}

:root[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: var(--bs-success-text-emphasis);
  --bs-btn-border-color: var(--bs-success-text-emphasis);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #157347;
}

/* Arama kutusu (arama_kutusu.js): liste tabloyu saran kaydırma alanında kesilmesin diye fixed konumlanır (konumu JS verir) */
.fiyop-arama-hucre {
  min-width: 16rem;
}

.fiyop-arama.is-invalid ~ .invalid-feedback {
  display: block;
}

.fiyop-arama-sonuc {
  position: fixed;
  z-index: 1080;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  box-shadow: var(--bs-box-shadow);
}

.fiyop-arama-sonuc[hidden] {
  display: none;
}

.fiyop-arama-sonuc .list-group-item {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.fiyop-arama-sonuc .list-group-item[aria-disabled="true"] {
  cursor: default;
}

/* Şifre Kasası: kayıt notundaki satır sonları korunur (metin textContent ile basılır) */
.kasa-not {
  white-space: pre-wrap;
}

/* Şifre Kasası: parola gücü çubuğu ince; TOTP kodu okunaklı ve geri sayımla aynı satırda */
.kasa-guc {
  height: 0.5rem;
}

.kasa-totp {
  font-size: 1.25rem;
  letter-spacing: 0.15em;
}

/* Şifre Kasası: ikon düğmesi 44 px dokunma hedefi; menüdeki silme onayı kırmızı zeminli */
.kasa-ikon-dugme {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.dropdown-item.kasa-onay {
  background-color: var(--bs-danger);
  color: var(--fiyop-white);
}

/* Marka logosu: koyu zeminde açık renkli sürüm */
:root[data-bs-theme="dark"] .brand-logo-acik {
  display: none;
}
:root[data-bs-theme="dark"] .brand-logo-koyu {
  display: block;
}