/* ==========================================================================
   2. KABUK — üst çubuk / gövde / alt çizgi. Kenar çubuğu YOK.
   ========================================================================== */

.portal {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Sütun ekran genişliğini AŞMAZ. Açık bırakılınca örtük `auto` sütun üst
     çubuğun en dar içerik genişliğine (portal adı + zil + kullanıcı) göre
     büyüyordu: 390 px'te sayfa 427 px oluyor, gövde yatay kayıyordu.
     `minmax(0, 1fr)` ile çubuk ekrana sığıyor, portal adı kendi kuralıyla
     (`.portal-ad` … ellipsis) kısalıyor; geniş tablo kendi kabında kayıyor. */
  grid-template-columns: minmax(0, 1fr);
}

.portal[hidden] { display: none; }

/* ---- 2.1 Üst çubuk ---- */

.portal-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-a4);
  padding: var(--p-a4) var(--p-a5);
  background: var(--p-kabuk);
  color: #ffffff;
}

.portal-ust-sol {
  display: flex;
  align-items: center;
  gap: var(--p-a3);
  min-width: 0;
}

/* Ürün kimliği adın üstünde: zoprey logosu + "ERP" eki, altında
   "Gözlem Portalı" bir kademe küçük (kullanıcı kararı 2026-10-06).
   Ad logonun SAĞ ucuna hizalı, logo büyük (Selim'in taslağı, 2026-10-06). */
/* ORAN LOGODAN: --logo-g logonun genişliği. SVG viewBox 6926×1690, taban
   çizgisi y=0 → yükseklik = g × 0.244, taban çizgisinin altı (p/y kuyruğu)
   = yüksekliğin %35'i = g × 0.086. "ERP" görsel taban çizgisine oturur
   (img'nin taban çizgisi alt kenarıdır, baseline hizası ERP'yi kuyruk
   hizasına düşürüyordu); ad altta, kuyruk boşluğu kadar yukarı çekilir. */
.portal-kimlik {
  --logo-g: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}

.portal-marka {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.portal-marka-logo {
  display: block;
  width: var(--logo-g);
  height: auto;
  flex: none;
}

/* ERP kenar çubuğundaki ekle aynı dil: 700, aralıklı, açık gri. */
.portal-marka-erp {
  font-size: var(--p-yazi-md);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--p-cizgi-kuv);
  margin-bottom: calc(var(--logo-g) * 0.086 - 0.18em);
}

.portal-kimlik .portal-ad {
  margin-top: 2px;
}

/* Lato'da 500/600/800 YOK — kalın demek 700 demek (şartname §6). */
.portal-ad {
  font-size: var(--p-yazi-md);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Liste gizleme düğmesi — ikon koyu kabuk üstünde okunur olmalı. */
.raf-dugme {
  flex: none;
  min-width: var(--p-hedef-sm);
  padding: 0;
  color: rgba(255, 255, 255, .78);
}

.raf-dugme:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
}

.raf-dugme i {
  width: 20px;
  height: 20px;
}

/* Ok döndürme kuralı KALDIRILDI: tek düğme varken yön değiştirmesi
   gerekiyordu, artık iki ayrı düğme var ve her birinin yönü sabit —
   gizleyen sola (ik-sol), gösteren sağa (ik-sag) bakıyor. Döndürme
   kalsaydı gizleme düğmesi kapalı durumda ters yöne bakardı. */

.portal-ust-sag {
  display: flex;
  align-items: center;
  gap: var(--p-a3);
}

/* Kullanıcı rozeti Çıkış'la aynı kalıba getirildi (kullanıcı kararı):
   aynı yükseklik, aynı köşe, aynı kenarlık dili — yan yana duran iki
   öğenin biri hap biri düğme olunca üst çubuk dağınık duruyordu.
   Rengi nötr kalıyor: bu bir eylem değil, kim olduğunu söyleyen etiket. */
/* Zemin DARK TEAL (`--seri-3`, Ocean Sunset) — Selim kararı 2026-09-30: "bir
   ton koyusu". Kullanıcı önce Dark Cyan (`--seri-1`) seçmişti; o zeminde
   beyaz yazı 3.73:1 (AA bile değil), bir basamak koyu Dark Teal beyazla
   7.28:1 AAA. Yazı beyaz. */
.portal-kullanici {
  display: inline-flex;
  align-items: center;
  gap: var(--p-a2);
  min-height: var(--p-hedef-sm);
  padding: 0 var(--p-a4);
  font-size: var(--p-yazi-sm);
  font-weight: 700;
  color: #ffffff;
  background: var(--seri-3);
  border: 1px solid var(--seri-3);
  border-radius: var(--p-radius-sm);
}

.portal-kullanici i { width: 18px; height: 18px; }

/* Artık bir DÜĞME (kullanıcı kararı 2026-09-29): tıklanınca altta panel
   açılıyor. Düğme görünümü kazanması gereken tek şey imleç ve odak halkası;
   rengi ve ölçüsü aynı kalıyor ki çubuk değişmiş gibi durmasın. */
.portal-kullanici {
  font-family: var(--p-font);
  cursor: pointer;
  transition: filter var(--p-gecis);
}

.portal-kullanici:hover { filter: brightness(1.08); }
.portal-kullanici:focus-visible { outline: none; box-shadow: var(--p-odak); }

.kullanici-ok { width: 14px; height: 14px; opacity: .75; }

.kullanici-sarmal { position: relative; }

/* Panel zil paneliyle aynı kalıp — iki ayrı görünüm iki ayrı dil olurdu. */
.kullanici-panel {
  position: absolute;
  top: calc(100% + var(--p-a2));
  right: 0;
  z-index: 40;
  width: min(260px, 80vw);
  padding: var(--p-a3);
  display: flex;
  flex-direction: column;
  gap: var(--p-a3);
  color: var(--p-ink);
  background: var(--p-kart);
  border: 1px solid var(--p-cizgi);
  border-radius: var(--p-radius);
  box-shadow: 0 12px 32px rgba(31, 50, 57, .22);
}

.kullanici-bilgi { display: flex; flex-direction: column; gap: 2px; }

.kullanici-ad { font-weight: 700; font-size: var(--p-yazi-md); }

.kullanici-alt { font-size: var(--p-yazi-xs); color: var(--p-ikincil); }

.kullanici-alt:empty { display: none; }

/* Oturumu kapatmak KIRMIZI ama panelin içinde: çubukta sürekli duran bir
   kırmızı düğme, günde bir kez kullanılan bir işi en görünür yere
   koyuyordu. */
/* Zemin BROWN RED (kullanıcı kararı 2026-09-29) — `--seri-6`, Ocean Sunset.
   Koyu bir ton, yazı beyaz. Durum kümesinin kırmızısı DEĞİL: oturum kapatmak
   bir hata hâli değil, bir işlem. */
.kullanici-cikis {
  justify-content: center;
  gap: var(--p-a2);
  width: 100%;
  min-height: var(--p-hedef-sm);
  color: #ffffff;
  background: var(--seri-6);
  border-color: var(--seri-6);
  font-weight: 700;
}

.kullanici-cikis:hover {
  color: #ffffff;
  background: var(--seri-6);
  border-color: var(--seri-6);
  filter: brightness(1.12);
}

.kullanici-cikis i { width: 16px; height: 16px; }

/* ==========================================================================
   BİLDİRİM ZİLİ
   ========================================================================== */

.zil-sarmal { position: relative; }

/* Zil zemini GOLDEN ORANGE (kullanıcı kararı 2026-09-29) — `--seri-4`,
   Ocean Sunset paletinden. Seri kümesi "hangi kalem" der, durum değil:
   düğmeyi renklendirmek bir uyarı anlamı taşımıyor, yalnız ayırt ediyor.
   İkon KOYU: turuncu açık bir ton, beyaz ikon üzerinde kaybolurdu. */
.portal-ust .p-btn.zil {
  min-width: var(--p-hedef-sm);
  padding: 0 var(--p-a3);
}

.zil i { width: 20px; height: 20px; }

/* Okunmamış sayısı — DURUM kümesinden kırmızı: "burada bekleyen bir şey
   var" diyor. Zilin kendisi nötr kalıyor ki rozet fark edilsin. */
.zil-rozet {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: var(--p-yazi-xs);
  font-weight: 900;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  background: var(--red);
  border-radius: 999px;
}

.zil-rozet[hidden] { display: none; }

.zil-panel {
  position: absolute;
  top: calc(100% + var(--p-a2));
  right: 0;
  z-index: 40;
  width: min(360px, 80vw);
  max-height: 60vh;
  overflow: auto;
  overscroll-behavior: none;
  color: var(--p-ink);
  background: var(--p-kart);
  border: 1px solid var(--p-cizgi);
  border-radius: var(--p-radius);
  box-shadow: 0 12px 32px rgba(31, 50, 57, .22);
}

.zil-panel[hidden] { display: none; }

.zil-panel-bas {
  padding: var(--p-a3) var(--p-a4);
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  letter-spacing: var(--p-harf-etiket);
  text-transform: uppercase;
  color: var(--p-soluk);
  border-bottom: 1px solid var(--p-cizgi);
}

.zil-liste { margin: 0; padding: 0; list-style: none; }

.zil-satir {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--p-a3) var(--p-a4);
  font-family: var(--p-font);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--p-cizgi);
  cursor: pointer;
}

.zil-satir:hover { background: var(--p-aksan-yumusak); }

/* Hangi FİRMADAN, hangi ÜRÜN için — kullanıcı ikisinin de görünmesini
   istedi; zil listesinde tek satırda ikisi de var. */
.zil-firma {
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  letter-spacing: var(--p-harf-etiket);
  text-transform: uppercase;
  color: var(--p-aksan-koyu);
}

.zil-urun { font-size: var(--p-yazi-sm); font-weight: 700; }

.zil-onizleme {
  font-size: var(--p-yazi-sm);
  color: var(--p-ikincil);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zil-bos {
  margin: 0;
  padding: var(--p-a5) var(--p-a4);
  font-size: var(--p-yazi-sm);
  color: var(--p-ikincil);
  text-align: center;
}

.zil-bos[hidden] { display: none; }

.portal-ust .p-btn.sade {
  color: rgba(255, 255, 255, .78);
}

.portal-ust .p-btn.sade:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
}

/* ---- Koyu kabuk üstünde GERÇEK buton görünümü ----
   Çıkış çerçevesiz bir yazıydı; tıklanabilir olduğu ancak deneyerek
   anlaşılıyordu. Zemin ve kenarlık marka rengiyle değil, kabuğun kendi
   ailesiyle kuruluyor (beyazın saydam katmanları) — üst çubukta ikinci bir
   marka rengi, altındaki asıl eylemle yarışırdı.

   Yükseklik dokunma hedefiyle aynı: parmakla basılan bir düğme. */
/* Çıkış KIRMIZIMSI (kullanıcı kararı). Renk DURUM kümesinden — oturumu
   kapatmak geri alınamayan, "buradan çıkarsın" diyen bir eylem. Dolu
   kırmızı değil, koyu kabuk üstünde saydam kırmızı katman: üst çubuktaki
   asıl işle (tablo) yarışmasın ama yanlışlıkla basılacak kadar da nötr
   durmasın. */
.portal-ust .p-btn.kabuk {
  min-height: var(--p-hedef-sm);
  padding: 0 var(--p-a4);
  font-weight: 700;
  color: #ffffff;
  background: rgba(185, 28, 28, .38);      /* --red, saydam */
  border-color: rgba(252, 165, 165, .45);  /* --red-line, saydam */
}

.portal-ust .p-btn.kabuk:hover {
  background: rgba(185, 28, 28, .62);
  border-color: rgba(252, 165, 165, .7);
}

/* ===== ÜST ÇUBUK RENKLERİ — Ocean Sunset (kullanıcı kararı 2026-09-29) =====

   SIRA ÖNEMLİ: bu kurallar `.portal-ust .p-btn.kabuk`tan SONRA duruyor.
   Önce yukarıda yazılmışlardı ve özgüllükleri eşit olduğu için `.kabuk`
   onları eziyordu — zil ve Termin Talebi düğmesi Çıkış'ın kırmızısını
   alıyordu (ölçüldü: üçü de rgba(185,28,28,.38)).

   Renkler SERİ kümesinden: seri "hangi kalem" der, durum değil. Düğmeyi
   renklendirmek bir uyarı anlamı taşımıyor, yalnız ayırt ediyor.

   Zilin yazısı KOYU: Golden Orange açık ton, beyaz yazı üzerinde
   kaybolurdu. (Termin Talebi düğmesi 2026-10-02 kaldırıldı, KD-0076.) */
.portal-ust .p-btn.kabuk.zil {
  color: var(--p-ink);
  background: var(--seri-4);              /* Golden Orange */
  border-color: var(--seri-4);
}

.portal-ust .p-btn.kabuk.zil:hover {
  background: var(--seri-4);
  border-color: #ffffff;
  filter: brightness(1.06);
}

/* Oturumu Kapat da bu blokta: düğme `.portal-ust` içinde ve `.kabuk`
   sınıfını taşıyor — kuralı panel bölümüne yazınca `.kabuk` onu eziyor ve
   düğme Çıkış'ın eski saydam kırmızısında kalıyordu (ölçüldü). */
.portal-ust .p-btn.kabuk.kullanici-cikis {
  color: #ffffff;
  background: var(--seri-6);             /* Brown Red */
  border-color: var(--seri-6);
}

.portal-ust .p-btn.kabuk.kullanici-cikis:hover {
  background: var(--seri-6);
  border-color: var(--seri-6);
  filter: brightness(1.12);
}

.portal-ust .p-btn.kabuk:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}