/* ==========================================================================
   AsTakip — Yönetim Paneli (tek sayfa / yan menüsüz tasarım, 2026-08-30)
   Marka renkleri mobil uygulamayla (Material 3 turkuaz+indigo tohum şeması)
   aynı kalır — sadece kabuk (topbar/mega-menü/kartlar) baştan tasarlandı.
   app.js'in ürettiği TÜM class isimleri (kpi-card, panel, modal, badge, ...)
   burada korunuyor — JS iş mantığına dokunulmadı, sadece görsel katman.
   ========================================================================== */

:root {
  --turquoise: #26a69a;
  --turquoise-dark: #178077;
  --turquoise-light: #4fc3b8;
  --turquoise-50: #e3f6f3;
  --indigo: #3f51b5;
  --indigo-dark: #303f9f;
  --indigo-50: #edeffb;

  --bg: #f1f5f6;
  --card-bg: #ffffff;
  --border: #e2e8ea;
  --border-strong: #cfd9db;
  --text: #172428;
  --text-muted: #63767b;
  --text-faint: #9aabaf;

  --danger: #e53935;
  --danger-bg: #fdeceb;
  --warning: #fb8c00;
  --warning-bg: #fff4e3;
  --success: #43a047;
  --success-bg: #e9f7ea;
  --info: #1e88e5;
  --info-bg: #e8f2fd;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --shadow-xs: 0 1px 2px rgba(15,35,40,.06);
  --shadow-sm: 0 2px 10px rgba(15,35,40,.08);
  --shadow-md: 0 12px 28px -10px rgba(15,35,40,.20);
  --shadow-lg: 0 28px 60px -18px rgba(15,35,40,.28);

  --topbar-h: 62px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* NOT: burada daha önce (2026-09-03) "fontları büyüt" isteği için `zoom:1.1`
     denenmişti — kaldırıldı (2026-09-03, devam): `zoom`, `vh`/`min-height:100vh`
     tabanlı yükseklik hesaplamalarını GERÇEK pencere yüksekliğinden %10 daha
     büyük render ediyordu, bu da sayfanın alt kısmının (ve altta sabit duran
     butonların) Windows görev çubuğunun arkasında/altında kalmasına yol açtı
     (kullanıcı bulgusu: "pencere taskbar altına taşıyor") — doğrulandı: zoom
     olmadan sayfa yüksekliği pencereye tam oturuyor, zoom'la taşıyordu. Bu kod
     tabanı hemen her yerde sabit px kullandığından (rem değil) tek tip bir
     "büyütme" tekrar istenirse `zoom` YERİNE tek tek font-size değerlerinin
     büyütülmesi gerekir — zoom'a geri dönmeyin, aynı taşma tekrarlanır. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 420px at 100% -8%, rgba(38,166,154,.08), transparent 60%),
    radial-gradient(700px 380px at -6% 0%, rgba(63,81,181,.06), transparent 55%),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
::selection { background: rgba(38,166,154,.28); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Login — split ekran: sol marka/görsel paneli, sağ form. Dar ekranda
   görsel panel gizlenir, form tam genişlik tek sütuna döner.
   ========================================================================== */
#login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
}
.login-visual {
  flex: 1.15;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(650px 480px at 18% 15%, rgba(38,166,154,.35), transparent 60%),
    radial-gradient(560px 460px at 85% 85%, rgba(63,81,181,.30), transparent 60%),
    linear-gradient(160deg, #0b2622 0%, #103733 55%, #0b2622 100%);
  color: #fff;
}
.lv-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: lvFloat 13s ease-in-out infinite; }
.lv-blob.b1 { width: 320px; height: 320px; background: var(--turquoise-light); top: -90px; left: -70px; }
.lv-blob.b2 { width: 260px; height: 260px; background: var(--indigo); bottom: -60px; right: -50px; animation-delay: -5s; }
@keyframes lvFloat { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(18px,-20px) scale(1.07); } }
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.lb-mark {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(38,166,154,.6);
}
.lb-name { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.lv-text { position: relative; z-index: 1; max-width: 460px; }
.lv-logo { display: block; width: clamp(96px, 11vw, 148px); height: auto; margin: 0 0 24px; filter: drop-shadow(0 16px 28px rgba(0,0,0,.45)); }
.lv-text h2 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.28; font-weight: 800; margin: 0 0 12px; }
.lv-text p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0; }
.lv-foot { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,.45); }

.login-form-side {
  flex: 1;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  padding: 28px 24px;
}
.login-card { width: 100%; max-width: 360px; }
.login-marka { text-align: center; margin: 0 0 22px; }
.login-marka img { display: block; max-width: 190px; max-height: 96px; object-fit: contain; margin: 0 auto 10px; }
.login-marka-ad { font-size: 22px; font-weight: 800; letter-spacing: .01em; color: var(--turquoise-dark); margin: 0 0 4px; }
.login-marka-slogan { font-size: 13px; color: var(--text-muted); margin: 0; }
.login-card h1 { color: var(--text); text-align: left; margin: 0 0 4px; font-size: 25px; font-weight: 800; }
.login-card p.sub { text-align: left; color: var(--text-muted); margin: 0 0 26px; font-size: 13.5px; }
.login-card .field { margin-bottom: 15px; }
.login-card label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 0 0 5px; }
.login-card input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; background: #fbfcfd; transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-card input:focus,
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none; border-color: var(--indigo); background: #fff;
  box-shadow: 0 0 0 3.5px rgba(63,81,181,.14);
}
.login-card button {
  width: 100%; padding: 13px; margin-top: 4px;
  background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));
  color: #fff; border: none; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 22px -8px rgba(23,128,119,.55);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.login-card button:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -8px rgba(23,128,119,.6); }
.login-card button:disabled { opacity: .6; cursor: default; transform: none; }
.login-error { color: var(--danger); font-size: 13px; margin: -4px 0 10px; min-height: 16px; font-weight: 600; }
.field-parola-wrap { position: relative; }
.field-parola-wrap input { padding-right: 38px; }
/* Not: `.login-card button` (genel buton stili — tam genişlik, turkuaz
   gradyan zemin, 13px padding) bu düğmeye de uygulanıyordu ve özgüllüğü
   (class+tag) tek class'lı `.parola-goster-btn`den yüksek olduğundan onu
   eziyordu — düğme, şifre kutusunun tamamını kaplayan koca bir turkuaz
   tabağa dönüşüyordu. Selektör `.field-parola-wrap .parola-goster-btn`e
   (iki class, daha yüksek özgüllük) çevrilip çakışan TÜM özellikler
   (genişlik/yükseklik/margin/padding/zemin/gölge) açıkça sıfırlandı. */
.field-parola-wrap .parola-goster-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; margin: 0; padding: 0;
  border: none; background: transparent; box-shadow: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  color: var(--text-faint); opacity: .55; border-radius: 6px; line-height: 1;
  transition: opacity .12s, color .12s;
}
.field-parola-wrap .parola-goster-btn:hover {
  opacity: 1; color: var(--text-muted); background: transparent;
  box-shadow: none; transform: translateY(-50%);
}
.field-parola-wrap .parola-goster-btn.gosteriliyor { color: var(--turquoise-dark); opacity: .85; }

@media (max-width: 860px) {
  .login-visual { display: none; }
  .login-form-side { padding: 24px 18px; min-height: 100vh; min-height: 100dvh; }
}

/* ==========================================================================
   App shell — üstte sabit topbar, altında tek akışlı içerik. Yan menü YOK;
   dar ekranda hamburger tam ekran bir açılır menü (overlay) tetikler.
   ========================================================================== */
#app-screen { display: none; min-height: 100vh; min-height: 100dvh; }
#app-screen.visible { display: block; }

/* 2026-08-30 kullanıcı isteği: sayfanın ana rengi koyu turkuaz olsun — topbar
   artık beyaz değil, marka renginin koyu tonuyla dolu bir şerit. */
#topbar {
  position: sticky; top: 0; z-index: 200;
  background: linear-gradient(120deg, #0b2622 0%, #0f3b36 55%, #124a43 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 14px rgba(6,20,18,.25);
  padding-top: var(--safe-top);
}
.topbar-inner {
  max-width: 1440px; margin: 0 auto;
  /* Kullanıcı bulgusu (2026-09-18): dar telefonlarda (320-360px), özellikle
     "Geri" butonu görünür olan (ana sayfa dışındaki HER) sayfada, bu 4 doğrudan
     çocuk (hamburger + marka + Geri + sağdaki ikon kümesi) hiçbiri küçülmediğinden
     (hepsi flex-shrink:0) VE bu kap flex-wrap taşımadığından toplam genişlik
     kapsayıcıyı aşınca TÜM SAYFA (position:fixed elemanlar dahil) 20-30px sağa
     kayıp yatay kaydırılabilir hale geliyordu ("sağa kayık" şikayeti). flex-wrap
     eklendi — sığmayan ikon kümesi artık ikinci satıra sarıyor, sayfa asla
     viewport'tan geniş olmuyor (otomatik, ekran genişliğine göre). */
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 9px calc(18px + var(--safe-right)) 9px calc(18px + var(--safe-left));
  min-height: var(--topbar-h);
}

#mobil-nav-btn { display: none; }
.icon-btn {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }

.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; cursor: pointer; user-select: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--turquoise-light), var(--turquoise-dark));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -5px rgba(23,128,119,.55);
}
.brand-txt { font-size: 15.5px; font-weight: 800; color: #fff; letter-spacing: .01em; white-space: nowrap; }

#geri-btn {
  display: none; flex-shrink: 0; height: 34px; padding: 0 13px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
#geri-btn.gorunur { display: inline-flex; align-items: center; }
#geri-btn:hover { background: rgba(255,255,255,.18); }

/* index.html ↔ index2.html (PC) geçiş butonu — index.html'de dar ekranda
   anlamsız olduğundan gizli, sadece masaüstü genişliğinde görünür; index2.html
   kendi "Standart Görünüm" butonuna `.always` ekleyerek genişlikten bağımsız
   her zaman görünür kalır (bkz. 2026-09-01 PC paneli notu). */
.mod-switch-btn {
  display: none; flex-shrink: 0; align-items: center; gap: 6px; white-space: nowrap;
  height: 34px; padding: 0 14px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; background: rgba(255,255,255,.08); color: #fff;
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.mod-switch-btn:hover { background: rgba(255,255,255,.18); }
.mod-switch-btn.always { display: inline-flex; }
@media (min-width: 900px) { .mod-switch-btn { display: inline-flex; } }

/* --- Üst menü (mega-menü / dropdown) — TÜM gruplar her zaman görünür olsun
   diye yatay kaydırma yerine gerektiğinde alt satıra sarar (kullanıcı bulgusu
   2026-08-30: geniş ekranda bile bazı gruplar kayan bir şeride sıkışıp
   görünmüyordu). --- */
/* Kullanıcı isteği (2026-09-03): menü grupları artık .topbar-inner'ın (arama/
   sohbet/bildirim/kullanıcı bloğunun bulunduğu üst satır) İÇİNDE değil, kendi
   BAĞIMSIZ satırında — bu sayede üst satır her zaman sabit/düzenli kalır,
   sığmayan gruplar SADECE bu ikinci satırda (tam genişlik) alt satıra döner,
   üst satırdaki öğelerle asla karışmaz. max-width/padding topbar-inner ile
   aynı (aynı sol/sağ kenardan hizalı görünsün diye). */
#topnav {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px; row-gap: 4px;
  padding: 0 calc(18px + var(--safe-right)) 10px calc(18px + var(--safe-left));
}
.topnav-grup-wrap { position: relative; flex-shrink: 0; }
.topnav-grup {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 12px; border-radius: 10px; border: none; background: none;
  font-size: 12.8px; font-weight: 700; color: rgba(255,255,255,.75); cursor: pointer;
  transition: background .15s, color .15s;
}
.topnav-grup:hover { background: rgba(255,255,255,.1); color: #fff; }
.topnav-grup.aktif { color: #fff; background: rgba(255,255,255,.16); }
.topnav-grup.acik-buton { background: rgba(255,255,255,.18); color: #fff; }
.topnav-grup .grup-ikon { font-size: 13px; line-height: 1; }
.topnav-ok { font-size: 9px; opacity: .7; transition: transform .15s; }
.topnav-grup.acik-buton .topnav-ok { transform: rotate(180deg); }

.topnav-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 250px; max-width: min(360px, 92vw); max-height: 70vh; overflow-y: auto;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 7px; z-index: 250;
}
.topnav-menu.acik { display: block; animation: menuPop .14s ease; }
@keyframes menuPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.topnav-menu a, #mobil-nav-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 8px; text-decoration: none; color: var(--text);
  font-size: 13px; font-weight: 600;
}
.topnav-menu a:hover { background: var(--bg); }
.topnav-menu a.active { background: var(--turquoise-50); color: var(--turquoise-dark); }
.topnav-menu .nav-etiket, #mobil-nav-list .nav-etiket { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 18px; padding: 0 6px; border-radius: 9px;
  font-size: 10.5px; font-weight: 800; background: #eceff1; color: var(--text-muted); flex-shrink: 0;
}
.nav-rozet-danger { background: var(--danger); color: #fff; }
.nav-rozet-warn { background: var(--warning); color: #fff; }

/* --- Sağ taraf: arama / firma seçici / bildirim / kullanıcı — kullanıcı isteği
   (2026-09-03): mümkün olduğunca çoğu tek satırda kalsın, sığmayan öğe alt
   satıra kaysın (kesilmesin/gizlenmesin), arama kutusu en sonda dursun. */
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; row-gap: 6px; flex-shrink: 0; }

#search-wrap { position: relative; order: 99; }
#search-input {
  width: 190px; height: 36px; padding: 0 12px 0 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1); color: #fff; font-size: 12.8px; transition: width .18s ease, border-color .15s, background .15s;
}
#search-input::placeholder { color: rgba(255,255,255,.55); }
#search-input:focus { outline: none; width: 250px; border-color: var(--turquoise-light); background: rgba(255,255,255,.16); box-shadow: 0 0 0 3px rgba(79,195,184,.2); }
.search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: rgba(255,255,255,.6); pointer-events: none; }
#search-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 380px; overflow-y: auto;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 260;
}
#search-results a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
#search-results a:hover { background: var(--bg); }
#search-results .sr-tip { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); width: 42px; flex-shrink: 0; }
#search-results .sr-ad { font-weight: 700; font-size: 12.8px; }
#search-results .sr-alt { color: var(--text-faint); font-size: 11px; }
#search-empty { padding: 16px; text-align: center; color: var(--text-faint); font-size: 12px; }

#firma-secim-wrap select {
  padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1);
  color: #fff; font-size: 12px; max-width: 150px;
}
#firma-secim-wrap select option { color: var(--text); }

#bildirim-bell, #sohbet-bell { position: relative; }
.bell-rozet {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}

.user-chip-wrap { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 11px 4px 4px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); cursor: pointer; transition: background .15s;
}
.user-chip:hover { background: rgba(255,255,255,.16); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--indigo), #7986cb);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.user-who { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.user-who #user-ad { font-size: 12px; font-weight: 700; color: #fff; }
.user-who small { font-size: 10px; color: rgba(255,255,255,.6); font-weight: 600; }
#user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 260;
}
#user-menu button {
  width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; border: none; background: none;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
#user-menu button:hover { background: var(--danger-bg); color: var(--danger); }
#user-menu button.sadece-super-admin:hover { background: rgba(38,166,154,.12); color: var(--turquoise-dark); }

@media (max-width: 1180px) { #topnav { display: none; } #mobil-nav-btn { display: flex; } }
@media (max-width: 720px) { #search-wrap { display: none; } }
@media (max-width: 560px) {
  .brand-txt { display: none; }
  .topbar-inner { gap: 8px; padding-left: calc(12px + var(--safe-left)); padding-right: calc(12px + var(--safe-right)); }
  .user-who { display: none; }
  .user-chip { padding: 4px; }
  /* Kullanıcı bulgusu (2026-09-18): "Geri" sığmayınca ÜST satırda kalıp sağdaki
     ikon kümesini (kamera/sohbet/bildirim/kullanıcı) alt satıra itiyordu —
     istenen tam tersi: sığmayan taraf GERİ olmalı, asıl aksiyon ikonları üst
     satırda sabit kalmalı. `order` SADECE bu dar-ekran sorgusunda uygulanıyor
     (masaüstü sırası hiç değişmiyor) — .topbar-actions varsayılan sırada (0)
     kalıp önce yerleşiyor, #geri-btn en sona (10) atılıp satıra sığmazsa ilk
     o alt satıra düşüyor. */
  #geri-btn { order: 10; }
}

/* --- Mobil tam ekran menü (yan menü DEĞİL — geçici, üstten açılan bir kaplama;
   bir öğe seçilince veya dışına tıklanınca otomatik kapanır) --- */
#mobil-nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(10,20,22,.55); backdrop-filter: blur(2px);
}
#mobil-nav-overlay.acik { display: block; animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mnav-panel {
  position: absolute; top: 0; left: 0; right: 0; max-height: 88vh; overflow-y: auto;
  background: var(--card-bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: calc(14px + var(--safe-top)) 10px 18px;
  animation: mnavDrop .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes mnavDrop { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mnav-head {
  display: flex; align-items: center; justify-content: space-between; padding: 0 8px 10px;
  font-size: 15px; font-weight: 800; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.mnav-head button { width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--bg); font-size: 15px; cursor: pointer; }
.mgrup-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 10px; cursor: pointer; user-select: none; border-radius: 10px;
}
.mgrup-baslik:hover { background: var(--bg); }
.grup-etiket { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--text); }
.grup-ikon { font-size: 14px; }
.mgrup-ok { display: inline-block; font-size: 11px; transition: transform .15s; color: var(--text-faint); }
.mgrup-baslik.acik .mgrup-ok { transform: rotate(180deg); }
.mgrup-liste { display: none; padding: 2px 4px 8px 14px; }
.mgrup-liste.acik { display: block; }
#mobil-nav-list a { padding: 10px 12px; }
#mobil-nav-list a:hover, #mobil-nav-list a.active { background: var(--turquoise-50); color: var(--turquoise-dark); }

/* Mobil menü de masaüstü kadar kapsamlı olsun diye (2026-08-30 kullanıcı
   isteği) arama + (süper-admin için) firma seçici de buraya taşındı. */
#mobil-search-wrap { position: relative; padding: 2px 8px 10px; }
#mobil-search-wrap .search-ico { left: 20px; color: var(--text-faint); }
#mobil-search-input {
  width: 100%; padding: 10px 12px 10px 34px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); font-size: 14px;
}
#mobil-search-input:focus { outline: none; border-color: var(--turquoise); background: #fff; }
#mobil-search-results a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 8px; border-radius: 8px;
  text-decoration: none; color: var(--text);
}
#mobil-search-results a:hover { background: var(--bg); }
#mobil-search-results .sr-tip { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); width: 42px; flex-shrink: 0; }
#mobil-search-results .sr-ad { font-weight: 700; font-size: 12.8px; }
#mobil-search-results .sr-alt { color: var(--text-faint); font-size: 11px; }
#mobil-firma-secim-wrap { padding: 0 8px 10px; }
#mobil-firma-secim-wrap select { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 13px; }

/* ==========================================================================
   İçerik alanı
   ========================================================================== */
#content { max-width: 1440px; margin: 0 auto; padding: 22px calc(22px + var(--safe-right)) 60px calc(22px + var(--safe-left)); box-sizing: border-box; }
#content h1 { margin: 0 0 4px; font-size: 23px; font-weight: 800; letter-spacing: -.01em; }

/* Ana ekrandaki karşılama başlığı — gradyanlı bir "hero" şeridi (görsel coşku). */
.dash-baslik {
  margin-bottom: 22px; padding: 22px 24px; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #0f3b36 0%, #17544c 45%, #1c6a60 100%);
  color: #fff; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.dash-baslik::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 90% -30%, rgba(79,195,184,.45), transparent 65%);
  pointer-events: none;
}
.dash-baslik h1 { color: #fff; position: relative; }
.dash-baslik > div { position: relative; color: rgba(255,255,255,.75) !important; }

/* --- KPI cards --- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-card {
  background: var(--card-bg); border-radius: var(--radius-md); padding: 18px 20px;
  border: 1px solid var(--border); border-left: 4px solid var(--turquoise);
  box-shadow: var(--shadow-xs); transition: box-shadow .15s, transform .15s;
}
.kpi-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kpi-card .label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.kpi-card .value { font-size: 27px; font-weight: 800; margin-top: 5px; letter-spacing: -.01em; }
.kpi-card.warn { border-left-color: var(--warning); }
.kpi-card.danger { border-left-color: var(--danger); }

/* --- Paneller / tablolar --- */
.panel {
  background: var(--card-bg); border-radius: var(--radius-md); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs); overflow: hidden; margin-bottom: 20px;
}
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.panel-header h2 { margin: 0; font-size: 16.5px; font-weight: 800; }
.panel:has(table) { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.3px; }
th, td { text-align: left; padding: 11px 20px; border-bottom: 1px solid var(--border); }
th { background: #f8fafa; color: var(--text-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
tr:hover td { background: #f8fdfc; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty-row td { text-align: center; color: var(--text-faint); padding: 40px; }

/* --- Butonlar / rozetler / sekmeler --- */
.btn {
  padding: 9px 17px; border-radius: 9px; border: none; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--indigo); color: #fff; transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 6px 14px -6px rgba(63,81,181,.5);
}
.btn:hover { background: var(--indigo-dark); }
.btn:active { transform: scale(.98); }
.btn.secondary { background: #eef1f2; color: var(--text); box-shadow: none; }
.btn.secondary:hover { background: #e2e7e8; }
.btn.danger { background: var(--danger); box-shadow: 0 6px 14px -6px rgba(229,57,53,.5); }
/* Tablolardaki aksiyon ikonları (2026-08-30 kullanıcı isteği: "hoş ve güzel
   yap, göze hitap etsin") — yuvarlak, hafif tonlu bir zemin üzerinde, hover'da
   büyüyüp belirginleşen bir buton. Aynı satırdaki birden fazla ikon arasında
   düzenli boşluk bırakır. */
.btn-icon {
  background: var(--bg); border: 1px solid transparent; cursor: pointer; font-size: 15.5px;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; color: var(--text-muted); transition: background .15s, color .15s, transform .12s, border-color .15s;
  margin: 1px; position: relative;
}
.btn-icon:hover { color: var(--turquoise-dark); background: var(--turquoise-50); border-color: var(--turquoise-light); transform: translateY(-1px); }
.btn-icon:active { transform: translateY(0) scale(.94); }
/* 📷 fotoğraf butonunun üzerindeki sayı rozeti — kaç fotoğraf eklendiğini
   tıklamadan gösterir (kullanıcı isteği, 2026-09-18). */
.btn-icon-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
/* "İşlemler" ok/üçgen butonu — kullanıcı isteği: daha büyük ve göze çarpar
   olsun, ayrıca tıklanınca artık pencere değil aşağı açılan bir menü açar
   (bkz. islemlerMenusuAc). */
.btn-icon-islemler {
  width: 38px; height: 38px; font-size: 20px;
  background: var(--turquoise-50); color: var(--turquoise-dark); border-color: var(--turquoise-light);
}
.btn-icon-islemler:hover { background: var(--turquoise); color: #fff; }

/* Bina kartı/satırındaki "İşlemler" tetikleyicisi — kullanıcı isteği
   (2026-09-19): dağınık tek tek ikon satırı yerine tek bir buton, altında
   açılan .aksiyon-menu ile (bkz. _islemMenuAc). */
.btn-islemler-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--turquoise-light); background: var(--turquoise-50);
  color: var(--turquoise-dark); font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-islemler-pill:hover { background: var(--turquoise); color: #fff; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge.warn { background: var(--warning-bg); color: var(--warning); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.success { background: var(--success-bg); color: var(--success); }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs button {
  padding: 8px 16px; border: 1px solid var(--border); background: #fff; border-radius: 999px;
  cursor: pointer; font-size: 12.8px; font-weight: 700; color: var(--text-muted); transition: all .15s;
}
.tabs button.active { background: var(--turquoise); color: #fff; border-color: var(--turquoise); box-shadow: 0 6px 14px -6px rgba(38,166,154,.55); }

/* --- Modal --- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,20,22,.5); backdrop-filter: blur(1.5px);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: 16px;
}
.modal {
  background: #fff; border-radius: var(--radius-lg); padding: clamp(20px, 1.6vw, 30px);
  border: none; box-shadow: var(--shadow-lg);
  /* PC'de (geniş vw) büyük ekranda "ufacık" görünmesin diye vw ile ölçeklenir,
     telefonda (dar vw) alt sınıra düşer — mobil için ayrıca aşağıdaki
     max-width:420px medya sorgusu tam genişliğe zorluyor. */
  width: clamp(400px, 30vw, 540px); max-width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal h2 { margin-top: 0; font-size: clamp(17px, 1.1vw, 20px); font-weight: 800; }
.modal label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 12px 0 5px; }
.modal input, .modal select, .modal textarea {
  width: 100%; padding: 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13.5px; background: #fbfcfd;
}
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.modal.narrow { width: clamp(320px, 20vw, 420px); }
.modal.wide { width: clamp(600px, 42vw, 800px); }
.modal.xwide { width: clamp(700px, 52vw, 960px); }
.modal.xxwide { width: clamp(1000px, 72vw, 1500px); }
/* İlerlemeli (aşamalı) form sihirbazı — Bakım Yap gibi çok adımlı formlarda
   mobildeki (bakim_yap_screen.dart::_bolum) akordiyon adımlarıyla aynı görsel
   dil: sıralı numara rozeti, tıklanınca açılan/kapanan tek bir adım (kullanıcı
   isteği 2026-08-31: "aşamalı yani ilerlemeli idi aynı düzene geri al"). */
.wizard-step { border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: 10px; overflow: hidden; }
.wizard-step-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--bg); border: none; width: 100%; text-align: left; font: inherit;
}
.wizard-step-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--turquoise); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.wizard-step.tamam .wizard-step-num { background: var(--success); }
.wizard-step-title { flex: 1; font-weight: 700; font-size: 13.5px; color: var(--text); }
.wizard-step-ozet { display: block; font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.wizard-step-chevron { font-size: 12px; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }
.wizard-step.acik .wizard-step-chevron { transform: rotate(180deg); }
.wizard-step-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: var(--card-bg); }
.wizard-step.acik .wizard-step-body { max-height: 2400px; }
.wizard-step-body-inner { padding: 14px; border-top: 1px solid var(--border); }
.wizard-nav { display: flex; gap: 8px; margin-top: 16px; }
.wizard-nav .btn { flex: 1; }
/* Kontrol Listesi satırı — kullanıcı isteği: madde ADINA tıklanınca (checkbox
   dışında) HEMEN ALTINDA sorun yazma kutusu açılır/kapanır, ayrı bir pencere/
   tablo yok. */
.kontrol-madde-satir { border-bottom: 1px solid var(--border); }
.kontrol-madde-satir:last-child { border-bottom: none; }
.kontrol-madde-baslik { display: flex; align-items: center; gap: 10px; padding: 9px 2px; cursor: pointer; }
.kontrol-madde-baslik input[type="checkbox"] { width: auto; flex-shrink: 0; }
.kontrol-madde-metin { flex: 1; font-size: 13px; }
.kontrol-madde-not-ikon { font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
.kontrol-madde-satir.not-dolu .kontrol-madde-not-ikon { color: var(--warning); }
.kontrol-madde-not-kutu { display: none; padding: 0 2px 10px 34px; }
.kontrol-madde-satir.not-acik .kontrol-madde-not-kutu { display: block; }
.kontrol-madde-not-kutu textarea { width: 100%; min-height: 54px; font-size: 12.5px; }
/* Onarım/Malzeme Bekliyor — işaretlenince altta not kutusu açılır, işaret
   kaldırılınca kutu tamamen kayboluyor (kullanıcı isteği 2026-08-31). */
.bekliyor-not-kutu { display: none; margin-top: 6px; }
.bekliyor-not-kutu.acik { display: block; }
.ekstre-hareket-panel { max-height: min(360px, 50vh); overflow: auto; }
/* "İşlemler" — artık tabloda/kartta bir ▶️ butonuna tıklanınca ORTADA bir
   pencere değil, tıklanan butonun HEMEN ALTINDA sabit-konumlu (position:fixed,
   JS'te getBoundingClientRect ile hesaplanır) bir açılır menü belirir —
   kullanıcı isteği (2026-08-30): "pencere açılmasın, aşağıya menü açsın". */
.aksiyon-menu {
  position: fixed; z-index: 350; min-width: 260px; max-width: min(320px, 94vw);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 8px 0 10px; max-height: 80vh; overflow-y: auto;
  animation: menuPop .14s ease;
}
.aksiyon-menu h2 { margin: 0; padding: 2px 18px 8px; font-size: 14.5px; font-weight: 800; border-bottom: 1px solid var(--border); }

.islem-list-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 13px 10px; border: none; background: none; border-bottom: 1px solid var(--border);
  font-size: 14px; cursor: pointer; color: var(--text); border-radius: 8px; transition: background .12s;
}
.islem-list-btn:last-child { border-bottom: none; }
.islem-list-btn:hover { background: var(--bg); }
.islem-list-btn .ikon { font-size: 18px; }
.malzeme-satir { display: grid; grid-template-columns: 1fr 70px 90px 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.malzeme-satir input { padding: 8px; }
.malzeme-satir button { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; }
.malzeme-toplam { text-align: right; font-weight: 800; font-size: 14px; margin-top: 8px; }
.radio-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.radio-row input { width: auto; }

/* --- İmza pad --- */
.imza-canvas-wrap { border: 1.5px dashed var(--border-strong); border-radius: 10px; background: #fafbfb; }
.imza-canvas { width: 100%; height: 160px; display: block; touch-action: none; cursor: crosshair; }

/* --- Rapor maddesi satırı --- */
.rapor-madde-satir { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 9px; margin-bottom: 6px; border-left: 4px solid; background: #fbfcfd; }
.rapor-madde-satir input[type="checkbox"] { width: auto; flex-shrink: 0; }
.rapor-madde-satir .metin { flex: 1; font-size: 12.5px; }
.rapor-madde-satir input[type="number"] { width: 90px; padding: 6px; }
.rapor-bolum-baslik { font-weight: 800; font-size: 13px; margin: 14px 0 6px; }

.toast {
  position: fixed; bottom: calc(20px + var(--safe-bottom)); right: 20px; max-width: calc(100vw - 40px);
  background: #182b2f; color: #fff; padding: 13px 19px;
  border-radius: 11px; font-size: 13px; font-weight: 600; z-index: 500; box-shadow: var(--shadow-lg);
  animation: toastIn .18s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast.error { background: var(--danger); }

/* Kullanıcı isteği (2026-09-08): düz "Yükleniyor…" yazısı yerine logo + hareketli
   ilerleme çubuğu. Metin DOM'da kalır (ekran okuyucular için) ama görsel olarak
   gizlenir — böylece tek yerden değişince uygulamadaki TÜM "Yükleniyor…" noktaları
   (30'dan fazla yer, hepsi aynı .loading class'ını kullanıyor) otomatik güncellenir. */
.loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 60px 20px; font-size: 0; color: transparent;
}
.loading::before {
  content: ''; width: 56px; height: 56px; border-radius: 14px;
  background: url('icons/personel-192.png?v=20260908l') center/cover no-repeat;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  animation: loading-pulse 1.4s ease-in-out infinite;
}
.loading::after {
  content: ''; display: block; width: 150px; height: 4px; border-radius: 4px;
  background-color: rgba(38,166,154,.16);
  background-image: linear-gradient(90deg, transparent, var(--turquoise, #26a69a), transparent);
  background-size: 55% 100%; background-repeat: no-repeat;
  animation: loading-bar 1.15s ease-in-out infinite;
}
@keyframes loading-pulse { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } }
@keyframes loading-bar { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }

.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 10px 0; overflow-x: auto; }
.chart-bar { flex: 1 0 24px; background: var(--turquoise); border-radius: 6px 6px 0 0; position: relative; min-height: 2px; }
.chart-bar .lbl { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--text-muted); }
.chart-bar .val { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; }
.chart-wrap { padding-bottom: 24px; }

/* ==========================================================================
   Analiz sayfası (#/analiz) — Yönetici Paneli grubunda, kontrol-merkezi tarzı
   zengin analitik pano: KPI kartları, donut grafikler, liste panelleri.
   Mevcut ışık temasına (--turquoise/--indigo/--card-bg) bağlı kalır, app.js'in
   diğer sayfalarındaki .kpi-card/.panel/.badge ile aynı dili konuşur.
   Simgeler "canlı/3D" görünmesi için hafif gradyan+gölge (kabartma) alır.
   ========================================================================== */
.analiz-section { margin-bottom: 28px; }
.analiz-section-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.analiz-section-head h2 { margin: 0; font-size: 16.5px; font-weight: 800; }
.analiz-section-head .desc { color: var(--text-muted); font-size: 11.5px; margin-top: 1px; }
.analiz-grid { display: grid; gap: 14px; }
.analiz-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.analiz-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.analiz-grid.split { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
@media (max-width: 900px) { .analiz-grid.cols-2, .analiz-grid.cols-3, .analiz-grid.split { grid-template-columns: 1fr; } }
.analiz-panel { background: var(--card-bg); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-xs); padding: 18px 20px; }
.analiz-panel h3 { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; }
.analiz-panel .ph-desc { color: var(--text-faint); font-size: 11px; margin-bottom: 14px; }
.analiz-donut-wrap { display: flex; align-items: center; gap: 18px; }
.analiz-donut { position: relative; width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0; }
.analiz-donut::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--card-bg); }
.analiz-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.analiz-donut-center b { font-size: 16px; font-weight: 800; }
.analiz-donut-center span { font-size: 8.5px; color: var(--text-faint); text-transform: uppercase; }
.analiz-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.analiz-legend .row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.analiz-legend .row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.analiz-legend .row .lbl { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analiz-legend .row .val { font-weight: 800; }
.analiz-legend a.row { text-decoration: none; cursor: pointer; border-radius: 6px; padding: 3px 5px; margin: -3px -5px; transition: background .12s; }
.analiz-legend a.row:hover { background: var(--bg); }
.analiz-stat-link { text-decoration: none; color: inherit; display: block; border-radius: 8px; transition: background .12s; }
.analiz-stat-link:hover { background: var(--bg); }
.analiz-listrow { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-radius: 8px; text-decoration: none; color: inherit; transition: background .12s; }
.analiz-listrow:hover { background: var(--bg); }
.analiz-listrow + .analiz-listrow { margin-top: 2px; }
.analiz-listrow .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.analiz-listrow .main { flex: 1; min-width: 0; }
.analiz-listrow .title { font-weight: 700; font-size: 12.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analiz-listrow .sub { color: var(--text-faint); font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analiz-listrow .tag { flex-shrink: 0; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.analiz-empty { text-align: center; padding: 26px 10px; color: var(--text-faint); font-size: 12.5px; }
.analiz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.analiz-tile { display: flex; flex-direction: column; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; text-decoration: none; color: inherit; box-shadow: var(--shadow-xs); transition: box-shadow .15s, transform .15s; }
.analiz-tile:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.analiz-tile .ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.analiz-tile .lbl { font-size: 12.5px; font-weight: 700; }

/* Analiz — açılır/kapanır panel kartları (kullanıcı isteği 2026-09-03):
   .analiz-panel'i <details>/<summary> ile sarmalayan panellerde kullanılır,
   varsayılan native disclosure üçgeni gizlenip kendi chevron'umuz konur. */
.analiz-panel.accordion { padding: 0; overflow: hidden; }
.analiz-panel.accordion > summary { padding: 18px 20px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.analiz-panel.accordion > summary::-webkit-details-marker { display: none; }
.analiz-panel.accordion > summary::marker { content: ''; }
.analiz-panel.accordion > summary h3 { margin: 0; }
.analiz-panel.accordion > summary::after { content: '▾'; font-size: 12px; color: var(--text-faint); transition: transform .15s; flex-shrink: 0; }
.analiz-panel.accordion[open] > summary::after { transform: rotate(180deg); }
.analiz-panel.accordion > summary:hover { background: var(--bg); }
.analiz-panel.accordion[open] > summary { border-bottom: 1px solid var(--border); }
.analiz-panel.accordion > .accordion-body { padding: 14px 20px 18px; }

.analiz-istatistik-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 760px) { .analiz-istatistik-grid { grid-template-columns: repeat(3, 1fr); } }
.ai-cell { text-align: center; background: var(--bg); border-radius: var(--radius-sm); padding: 12px 6px; }
.ai-cell b { display: block; font-size: 20px; font-weight: 800; color: var(--danger); }
.ai-cell span { font-size: 10.5px; color: var(--text-faint); font-weight: 600; }

/* Analiz sayfası — kullanıcı isteği (2026-09-05): "pencere pc de net
   görünmüyor" — büyük/maksimize masaüstü pencerelerde metin/grafik ölçeği
   diğer sayfalarla aynı (küçük) kalınca sayfa "boş ve okunması zor"
   hissettiriyordu. `.analiz-sayfa` SADECE Analiz'de kullanılan bir sarmalayıcı
   olduğundan bu büyütmeler başka hiçbir sayfayı (aynı .kpi-card/.analiz-panel/
   .chart-bar sınıflarını paylaşan Kasa dahil) etkilemez. Ayrıca çok geniş
   (ultra-wide) monitörlerde içerik aşırı yayılıp orantısız görünmesin diye
   makul bir max-width ile ortalanır. */
.analiz-sayfa { max-width: 1360px; margin: 0 auto; }
.analiz-sayfa .analiz-panel h3 { font-size: 15px; }
.analiz-sayfa .analiz-panel .ph-desc { font-size: 12.5px; line-height: 1.5; }
.analiz-sayfa .kpi-card .label { font-size: 12.5px; }
.analiz-sayfa .kpi-card .value { font-size: 24px; }
.analiz-sayfa .chart-bars { height: 150px; gap: 12px; }
.analiz-sayfa .chart-bar .val { font-size: 13px; }
.analiz-sayfa .chart-bar .lbl { font-size: 12px; }
.analiz-sayfa .analiz-donut { width: 130px; height: 130px; }
.analiz-sayfa .analiz-donut-center b { font-size: 18px; }
.analiz-sayfa .analiz-donut-center span { font-size: 9.5px; }
.analiz-sayfa .analiz-legend .row { font-size: 13px; }
.analiz-sayfa .panel table { font-size: 13.8px; }
.analiz-sayfa .panel th { font-size: 11.5px; }
@media (max-width: 900px) {
  .analiz-sayfa .chart-bars { height: 120px; }
  .analiz-sayfa .analiz-donut { width: 100px; height: 100px; }
}

/* kabartma/3D simge rozeti (kullanıcı isteği: "simgeler canlı ve 3d olsun") —
   düz tek-renk yuvarlak yerine gradyan + iç/dış gölge; badgeIconStyle3d() bu
   sınıfla birlikte kullanılır (bkz. renderAnaliz). */
.ic3d { position: relative; box-shadow: 0 3px 8px -2px var(--ic3d-c, rgba(0,0,0,.35)), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -3px 5px rgba(0,0,0,.28); }
.ic3d::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(155deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%); pointer-events: none; }

/* Asansör kartlarındaki İş Emri/İşlemler/Harita/Düzenle/Sil aksiyonları
   (kullanıcı isteği 2026-08-31: "renkli + 3D + karmaşayı telefon ve web'e
   uygun hale getir, ölçeklemeyi otomatik yap") — metin etiketsiz, yuvarlak,
   `.ic3d` gradyan/gölge deseniyle, `clamp()` ile ekran genişliğine göre
   otomatik küçülüp büyüyen boyut (dar telefon ekranında da masaüstünde de
   aynı oranlarda kalır, mobil uygulamadaki Ikon3DButon ile aynı renk paleti). */
.btn-ic3d {
  width: clamp(28px, 6.5vw, 36px); height: clamp(28px, 6.5vw, 36px);
  border-radius: 50%; border: none; color: #fff; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: clamp(13px, 3vw, 16px); transition: transform .12s;
}
.btn-ic3d:hover { transform: translateY(-1px) scale(1.06); }
.btn-ic3d:active { transform: translateY(0) scale(.94); }

/* --- Konum Seç haritası --- */
.harita-modal { width: 640px; }
.harita-wrap { position: relative; height: 380px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.harita-map { width: 100%; height: 100%; }
.harita-pin { font-size: 34px; color: var(--danger); text-align: center; line-height: 1; transform: translate(-50%, -100%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.harita-toolbar { position: absolute; top: 8px; right: 8px; z-index: 500; display: flex; flex-direction: column; gap: 6px; }
.harita-toolbar button { background: #fff; border: 1px solid var(--border); border-radius: 9px; width: 38px; height: 38px; cursor: pointer; font-size: 16px; box-shadow: var(--shadow-xs); }
.harita-toolbar button:hover { background: var(--bg); }
.harita-koordinat { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.harita-sayfa-wrap { position: relative; height: calc(100vh - 320px); min-height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
/* Kullanıcı isteği (2026-08-31): "haritayı biraz ufalt ve tam ekran açabilme
   özelliği ekle" — yükseklik küçültüldü, bu sınıf tıklanınca haritayı tüm
   ekranı kaplayan sabit bir katmana dönüştürür (native Fullscreen API yerine
   — bazı gömülü/iframe bağlamlarında izin sorunu çıkarabiliyor, bu daha
   güvenilir). Leaflet'in kendi boyutunu yeniden hesaplaması için JS tarafında
   `map.invalidateSize()` çağrılması gerekir (bkz. renderHarita). */
.harita-sayfa-wrap.tam-ekran { position: fixed; inset: 0; z-index: 2000; height: 100vh; border-radius: 0; }

/* ==========================================================================
   Ana Ekran / Dashboard — mobil uygulamanın (main_navigation_screen.dart)
   MainNavigationScreen'iyle aynı görsel dilden yola çıkan pastel bölüm
   kartları + satır başına sayaç rozeti. Kullanıcı isteği (2026-09-04): tüm
   bölümler varsayılan AÇIK gelir, her biri kendi başına (diğerlerini
   etkilemeden) kapatılıp açılabilir. Grafik/donut/analitik görünüm SADECE
   ayrı "Analiz" sayfasında (bkz. renderAnaliz).

   2026-09-22: index2.html (PC Paneli) için bu yan-yana ızgaranın alt kenarını
   dengesiz gösteren (bölümlerin eleman sayısı farklı olduğundan komşu
   sütunlarda farklı yükseklikte kutular oluşan) sorun için TAMAMEN AYRI bir
   "dash-section" tasarımı denendi — kullanıcı bunu geri istedi ("yan yana
   iyiydi"): asıl istenen yan-yana ızgaranın KENDİSİ korunup sadece
   yükseklik dengesizliğinin giderilmesiydi. Bu yüzden HTML/JS (app.js
   `renderDashboard()`) artık index.html ve index2.html için TAMAMEN AYNI
   `.sc-card`/`.sc-grid` çıktısını üretiyor — index2.html'in kendi embedded
   <style>'ında (bkz. index2.html, `.pc-main-col .sc-grid`) SADECE görsel bir
   ölçekleme + eşit-yükseklik override'ı var, ayrı bir HTML yapısı YOK. */
.sc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 860px) { .sc-grid { grid-template-columns: 1fr 1fr; } }

.sc-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.sc-header { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; border: none; width: 100%; text-align: left; font: inherit; }
.sc-header .sc-ic { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-header .sc-titles { flex: 1; min-width: 0; }
.sc-header .sc-titles b { font-size: 14px; font-weight: 800; color: #263238; }
.sc-header .sc-chevron { font-size: 13px; color: #33424a; transition: transform .2s; flex-shrink: 0; }
.sc-card.acik .sc-header .sc-chevron { transform: rotate(180deg); }
.sc-rows { max-height: 0; overflow: hidden; background: var(--card-bg); transition: max-height .25s ease; }
.sc-card.acik .sc-rows { max-height: 900px; }
.sc-row { display: flex; align-items: center; gap: 11px; padding: 11px 15px; text-decoration: none; color: inherit; border-top: 1px solid var(--border); transition: background .12s; }
.sc-row:hover { background: var(--bg); }
.sc-row .sc-row-ic { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-row .sc-row-lbl { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
/* 2026-10-15: kapalı bölümün başlığı altında aynı sayı rozetleri; açılınca gizlenir */
.sc-header .sc-titles b { display: block; }
.sc-ozet { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sc-card.acik .sc-ozet { display: none; }
.sc-header .sc-ozet { gap: 4px 14px; }
.sc-header .sc-ozet .sc-row-cnt { background: none !important; padding: 0 !important; min-width: 0 !important; color: #263238; }
.sc-row .sc-row-cnt, .sc-ozet .sc-row-cnt { min-width: 24px; height: 20px; padding: 0 7px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.sc-header .sc-ic .sc-emoji { font-size: 23px; }
.sc-row .sc-row-ic .sc-emoji { font-size: 18px; }

.sc-card[data-renk="sohbet"] .sc-header { background: #B2DFDB; }
.sc-card[data-renk="cariler"] .sc-header { background: #BBDEFB; }
.sc-card[data-renk="bakim"] .sc-header { background: #C8E6C9; }
.sc-card[data-renk="ariza"] .sc-header { background: #FFE0B2; }
.sc-card[data-renk="revizyon"] .sc-header { background: #E1BEE7; }
.sc-card[data-renk="muayene"] .sc-header { background: #FFF9C4; }
.sc-card[data-renk="islemler"] .sc-header { background: #CFD8DC; }
.sc-card[data-renk="yonetici"] .sc-header { background: #F8BBD0; }
.sc-card[data-renk="ayarlar"] .sc-header { background: #B0BEC5; }
.sc-card[data-renk="fatura"] .sc-header { background: #D7CCC8; }
.sc-card[data-renk="teknik"] .sc-header { background: #C5CAE9; }

/* Teknik Döküman > Dökümanlar (2026-09-30) */
.td-yol { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:14px; margin-bottom:12px; }
.td-yol a { color: var(--turquoise-dark, #00897b); text-decoration:none; font-weight:600; }
.td-yol span.ayrac { color: var(--text-faint, #999); }
.td-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.td-oge { position:relative; border:1px solid var(--border, #e0e0e0); border-radius:12px; padding:14px 10px 10px; text-align:center; background:var(--surface, #fff); cursor:pointer; transition: box-shadow .15s, transform .15s; }
.td-oge:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-2px); }
.td-oge .td-ikon { font-size:40px; line-height:1.1; }
.td-oge .td-ad { font-size:13px; font-weight:600; margin-top:6px; word-break:break-word; }
.td-oge .td-alt { font-size:11px; color: var(--text-muted, #777); margin-top:2px; }
.td-oge .td-menu-btn { position:absolute; top:4px; right:4px; border:none; background:transparent; font-size:16px; cursor:pointer; padding:2px 6px; border-radius:6px; }
.td-oge .td-menu-btn:hover { background: rgba(0,0,0,.06); }
.td-oge img.td-thumb { width:100%; height:90px; object-fit:cover; border-radius:8px; background:#eee; }
.td-onizleme-govde { display:flex; justify-content:center; align-items:center; min-height:50vh; background:#222; border-radius:8px; overflow:auto; }
.td-onizleme-govde img { max-width:100%; max-height:78vh; object-fit:contain; }
.td-onizleme-govde iframe { width:100%; height:78vh; border:none; background:#fff; }
.td-korumali .td-onizleme-govde { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.td-korumali .td-onizleme-govde canvas { pointer-events:none; }
/* Döküman bölümü koruması: seçme/uzun basıp kaydetme yok, odak kaybında bulanık, yazdırmada boş */
body.td-sayfa-korumali #content, body.td-sayfa-korumali .td-korumali { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
body.td-sayfa-korumali #content input, body.td-sayfa-korumali #content textarea { user-select:text; -webkit-user-select:text; }
body.td-sayfa-korumali.td-gizli #content, body.td-sayfa-korumali.td-gizli .td-korumali .td-onizleme-govde > * { filter:blur(28px); opacity:.15; }
@media print { body.td-sayfa-korumali * { display:none !important; } }
@media (max-width: 600px) { .td-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:8px; } .td-oge .td-ikon { font-size:32px; } }
.sc-card[data-renk="analiz"] .sc-header { background: #B2DFDB; }

/* Rengarenk/çerçevesiz/kabartma simge (kullanıcı isteği 2026-09-04): "bunun
   gibi ikonlar" — gerçek/renkli emoji, hiçbir daire/kare arka plan veya
   çerçeve olmadan, sadece düşen gölgeyle hafif kabartılmış. Emoji zaten kendi
   parlak/degrade rengini taşıdığından ek bir arka plan gerekmiyor. */
.sc-emoji { line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }

/* ==========================================================================
   Sohbet (2026-09-03) — personel arası canlı mesajlaşma: solda kişi/Genel
   Sohbet listesi, sağda mesaj balonları + yazma kutusu. Dar ekranda tek
   panel görünür (liste ↔ sohbet), .mobil-sohbet-acik ile geçiş yapılır.
   ========================================================================== */
.sohbet-wrap { display: flex; height: 72vh; min-height: 440px; max-height: 760px; border-radius: var(--radius-lg); overflow: hidden; background: var(--card-bg); box-shadow: var(--shadow-xs); border: 1px solid var(--border); }
.sohbet-liste-panel { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; background: #fafcfc; }
.sohbet-kisi-satir { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border); background: none; cursor: pointer; text-align: left; font-family: inherit; }
.sohbet-kisi-satir:hover { background: var(--turquoise-50); }
.sohbet-kisi-satir.aktif { background: var(--turquoise-50); box-shadow: inset 3px 0 0 var(--turquoise); }
.sohbet-kisi-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.sohbet-kisi-avatar.genel { background: var(--turquoise); font-size: 17px; }
.sohbet-kisi-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sohbet-kisi-ad { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sohbet-kisi-onizleme { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sohbet-kisi-sag { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sohbet-kisi-zaman { font-size: 10.5px; color: var(--text-faint); }
.sohbet-kisi-rozet { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sohbet-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sohbet-panel-baslik { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 14.5px; }
.sohbet-geri-btn { display: none; border: none; background: var(--turquoise-50); color: var(--turquoise-dark); width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.sohbet-mesajlar { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.sohbet-bos { margin: auto; color: var(--text-faint); font-size: 13.5px; text-align: center; }
.sohbet-satir { display: flex; justify-content: flex-start; }
.sohbet-satir.ben { justify-content: flex-end; }
.sohbet-balon { max-width: 74%; background: #fff; border-radius: 14px 14px 14px 4px; padding: 8px 12px; box-shadow: var(--shadow-xs); }
.sohbet-balon.ben { background: var(--turquoise-50); border-radius: 14px 14px 4px 14px; }
.sohbet-balon-ad { font-size: 11px; font-weight: 800; color: var(--indigo); margin-bottom: 2px; }
.sohbet-balon-metin { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.sohbet-balon-alt { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 3px; }
.sohbet-balon-zaman { font-size: 10px; color: var(--text-faint); }
.sohbet-balon-sil { cursor: pointer; opacity: .45; font-size: 11px; }
.sohbet-balon-sil:hover { opacity: 1; }
.sohbet-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--card-bg); }

/* ==========================================================================
   Bina Yöneticisi (Müşteri) Portalı — Ayarlar > Bina Yöneticisi Oturumları
   sayfası sıfırdan tasarlandı (2026-09-11, kullanıcı isteği: "adam gibi bişey
   yap, sıfırdan kapsamlı güzel yap") — iOS tarzı gerçek bir switch bileşeni +
   modül kartları grid'i. Diğer sayfaların .panel/.badge/.btn dilini korur,
   sadece bu sayfaya özgü ek sınıflar.
   ========================================================================== */
.msw-hero {
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 18px;
  background: linear-gradient(120deg, #0f3b36 0%, #17544c 55%, #1c6a60 100%);
  color: #fff; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.msw-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 92% -30%, rgba(79,195,184,.4), transparent 65%);
  pointer-events: none;
}
.msw-hero h1 { color: #fff; margin: 0 0 4px; position: relative; font-size: 21px; }
.msw-hero p { color: rgba(255,255,255,.78); margin: 0; position: relative; font-size: 13px; max-width: 680px; }

/* Gerçek bir <input type=checkbox> üzerine bindirilen iOS tarzı switch —
   checkbox erişilebilirlik/klavye davranışını korur, sadece görünümü değişir. */
.msw-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.msw-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.msw-switch .msw-track {
  position: absolute; inset: 0; background: #d7dedf; border-radius: 999px; transition: background .18s;
}
.msw-switch .msw-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s;
}
.msw-switch input:checked ~ .msw-track { background: var(--turquoise); }
.msw-switch input:checked ~ .msw-thumb { transform: translateX(20px); }
.msw-switch input:disabled ~ .msw-track { opacity: .5; cursor: not-allowed; }
.msw-switch input:focus-visible ~ .msw-track { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Genel Giriş Vanası kartı — tam genişlik, durum rengiyle vurgulu şerit. */
.msw-master-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px 20px; margin-bottom: 20px;
  border-left: 5px solid var(--success); background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs); max-width: 100%; overflow-wrap: break-word;
}
.msw-master-card.kapali { border-left-color: var(--danger); }
.msw-master-card .msw-master-ic {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; background: var(--success-bg); color: var(--success);
}
.msw-master-card.kapali .msw-master-ic { background: var(--danger-bg); color: var(--danger); }
.msw-master-card .msw-master-body { flex: 1 1 200px; min-width: 0; }
.msw-master-card .msw-master-body h3 { margin: 0 0 3px; font-size: 15px; font-weight: 800; }
.msw-master-card .msw-master-body p { margin: 0; font-size: 12px; color: var(--text-muted); }
.msw-master-card .msw-master-aksiyon { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; margin-left: auto; }
.msw-master-card .msw-master-durum { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--success); white-space: nowrap; }
.msw-master-card.kapali .msw-master-durum { color: var(--danger); }

/* Portal Bölümleri — arama/toplu aksiyon çubuğu + kart grid'i. */
.msw-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.msw-search { flex: 1; min-width: 200px; position: relative; }
.msw-search input {
  width: 100%; padding: 10px 14px 10px 36px; border: 1.5px solid var(--border); border-radius: 999px;
  font-size: 13px; background: #fbfcfd; box-sizing: border-box;
}
.msw-search::before { content: "🔎"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .55; pointer-events: none; }
.msw-tumu-toggle { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.msw-tumu-durum { font-size: 12.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

/* Ayarlar sayfasındaki "...'na Git" hızlı erişim kartları (Bina Yöneticisi
   Oturumları/Bildirim Ayarları/Sohbet Ayarları) — buton metni artık sarabiliyor
   ve max-width:100% ile dar ekranda sayfayı yana kaydırmıyor. */
.msw-git-karti {
  max-width: 520px; padding: 16px 18px; margin-bottom: 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; flex-wrap: wrap; box-sizing: border-box;
}
.msw-git-karti a.btn { flex-shrink: 0; }

.msw-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 22px; }
.msw-module-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, transform .15s, opacity .15s;
}
.msw-module-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.msw-module-card.kapali { opacity: .62; }
.msw-module-card .msw-module-top { display: flex; align-items: flex-start; gap: 12px; }
.msw-module-card .msw-module-ic {
  width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; background: var(--turquoise-50); color: var(--turquoise-dark);
}
.msw-module-card .msw-module-title { flex: 1; min-width: 0; }
.msw-module-card .msw-module-title h4 { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.3; }
.msw-module-card .msw-module-title span.msw-durum { font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.msw-module-card.kapali .msw-module-title span.msw-durum { color: var(--danger); }
.msw-module-card .msw-module-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.msw-module-empty { grid-column: 1/-1; text-align: center; padding: 30px; color: var(--text-faint); font-size: 13px; }

/* Bildirim Ayarları'na hızlı erişim kartı — link stili panel içi kart. */
.msw-link-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); margin-bottom: 20px;
  flex-wrap: wrap; box-sizing: border-box;
}
.msw-link-card .msw-module-ic { background: var(--indigo-50); color: var(--indigo); }
.msw-link-card .msw-link-body { flex: 1; min-width: 200px; }
.msw-link-card .msw-link-body h4 { margin: 0 0 3px; font-size: 14px; font-weight: 800; }
.msw-link-card .msw-link-body p { margin: 0; font-size: 12px; color: var(--text-muted); }
/* Kullanıcı bulgusu (2026-09-18): kullanıcının gerçek şikayeti bu karttaydı
   (Bina Yöneticisi Oturumları sayfası) — .msw-git-karti (Firma Bilgileri
   sayfasındaki BENZER görünümlü ama AYRI bir kart) yanlışlıkla defalarca
   düzeltilip o hep geri alındı çünkü buradaki asıl kart hiç flex-wrap
   taşımıyordu ve butonu inline style="white-space:nowrap" ile sabitti — dar
   telefonda kesin taşma garantiydi. "Alta al" talimatıyla aynı çözüm: buton
   dar ekranda açıklamanın altına, tam genişlikte iniyor. */
@media (max-width: 560px) {
  .msw-link-card { flex-direction: column; align-items: stretch; }
  .msw-link-card > a.btn { width: 100%; text-align: center; box-sizing: border-box; }
  /* .msw-module-ic'in genişlik/yükseklik taşımayan (sadece emoji + zemin
     rengi) bir <span> olması — sütun modunda align-items:stretch yüzünden
     tam genişlik bir renkli şeride dönüşmesin diye kendi doğal boyutunda
     kalması sağlanıyor. */
  .msw-link-card > .msw-module-ic { align-self: flex-start; }
}
.sohbet-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; font-family: inherit; }
.sohbet-form input:focus { outline: none; border-color: var(--turquoise); }
@media (max-width: 760px) {
  .sohbet-wrap { height: calc(100vh - 200px); min-height: 380px; border-radius: var(--radius-md); }
  .sohbet-liste-panel { display: block; width: 100%; border-right: none; }
  .sohbet-panel { display: none; }
  .sohbet-wrap.mobil-sohbet-acik .sohbet-liste-panel { display: none; }
  .sohbet-wrap.mobil-sohbet-acik .sohbet-panel { display: flex; }
  .sohbet-geri-btn { display: flex; align-items: center; justify-content: center; }
  .sohbet-form input { font-size: 16px; } /* iOS zoom-on-focus önlemi */
}

/* ==========================================================================
   Telefon ölçeklemesi — tüm ekranlarda kademeli küçülme, dokunma hedefleri
   44px altına düşmez, malzeme satırı iki satıra kırılır.
   ========================================================================== */
@media (max-width: 1024px) {
  #content { padding: 18px calc(16px + var(--safe-right)) 48px calc(16px + var(--safe-left)); }
}
@media (max-width: 760px) {
  #content { padding: 16px calc(14px + var(--safe-right)) 40px calc(14px + var(--safe-left)); }
  .dash-baslik { padding: 18px 18px; }
}
@media (max-width: 480px) {
  #content h1 { font-size: 19px; }
  .dash-baslik { padding: 16px; border-radius: var(--radius-md); }
  .panel-header h2 { font-size: 15px; }
  .kpi-card { padding: 14px 16px; }
  .kpi-card .value { font-size: 22px; }
  .modal { padding: 16px; border-radius: var(--radius-md); max-height: 92vh; }
  .modal h2 { font-size: 16px; }
  th, td { padding: 9px 12px; font-size: 12.5px; }
  .btn { padding: 10px 15px; }

  /* 2026-10-14: liste kartlarında sağdaki ikon sütunu telefonda bilgi alanını
     ~100 px'e sıkıştırıyordu (isim/telefon kelime kelime alt alta). Telefonda
     ikonlar kartın altına tam genişlik satır olarak iner. */
  .res-kart-ust { flex-wrap: wrap; }
  .res-kart-aksiyon {
    flex-basis: 100% !important; flex-wrap: wrap; justify-content: flex-end;
    padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--border);
  }
  .res-kart-aksiyon:not(:has(button)) { display: none !important; }

  .malzeme-satir {
    grid-template-columns: 1fr 1fr 32px;
    grid-template-areas: "ad ad ad" "adet fiyat sil";
    row-gap: 6px;
  }
  .malzeme-satir input[data-m="ad"] { grid-area: ad; }
  .malzeme-satir input[data-m="adet"] { grid-area: adet; }
  .malzeme-satir input[data-m="birimFiyat"] { grid-area: fiyat; }
  .malzeme-satir button[data-m="sil"] { grid-area: sil; }
}

/* Çok küçük ekranlarda modallar alttan açılan bir "sheet" gibi tam genişlik
   kaplar — daha rahat dokunma alanı ve daha az israf edilen boşluk. */
@media (max-width: 420px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; max-height: 94vh; padding-bottom: calc(20px + var(--safe-bottom)); }
  .modal.narrow, .modal.wide, .modal.xwide, .modal.xxwide { width: 100%; }
}

/* iOS'ta input font-size 16px altındaysa odaklanınca sayfa otomatik zoom
   yapar — tüm form alanlarını en az 16px tutarak bunu önlüyoruz. */
@media (max-width: 480px) {
  .modal input, .modal select, .modal textarea, .login-card input { font-size: 16px; }
}

/* Bakım Yap > "Bekleyen Görev" (İş Emri > Bakımda Yapılacak, 2026-10-03) */
.bekleyen-gorev-kutu { margin: 0 0 12px; border: 2px solid #fb8c00; border-radius: 10px; overflow: hidden; }
.bekleyen-gorev-band {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 14px; border: 0; cursor: pointer; font-weight: 800; font-size: 14.5px;
  background: #fb8c00; color: #fff; animation: bekleyenGorevYanip 1s ease-in-out infinite;
}
.bekleyen-gorev-band.goruldu { animation: none; }
@keyframes bekleyenGorevYanip {
  0%, 100% { background: #fb8c00; color: #fff; }
  50% { background: #fff3e0; color: #e65100; }
}
.bekleyen-gorev-pano { padding: 10px 12px; background: var(--surface, #fff); }
.bekleyen-gorev-satir { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.bekleyen-gorev-satir:last-child { border-bottom: 0; }
.bekleyen-gorev-satir.yapildi { opacity: .85; }
.bekleyen-gorev-satir.yapildi > div:first-child { color: var(--success, #43a047); }
.bekleyen-gorev-chk { display: flex !important; align-items: center; gap: 8px; margin-top: 8px !important; font-weight: 700; }
.bekleyen-gorev-satir textarea { margin-top: 6px; width: 100%; }
@media (prefers-reduced-motion: reduce) { .bekleyen-gorev-band { animation: none; } }