/* Ortak üst menü (örnek GIS tasarımı): yalnız izl- önekli sınıflar; rapor sayfasının eski stilleriyle çakışmaz. */
.izl-ust { position: sticky; top: 0; z-index: 1000; height: 64px; background: rgba(4, 8, 19, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(22, 78, 99, .35); font: 14px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #e2e8f0; } /* Koyu çubuk (bg-[#040813]/90). */
:root[data-tema="acik"] .izl-ust { background: rgba(255, 255, 255, .82); border-bottom-color: rgba(14, 116, 144, .18); color: #1e293b; box-shadow: 0 6px 24px -12px rgba(15, 52, 96, .25); } /* Açık temada beyaz cam. */
.izl-ust-ic { height: 100%; max-width: 1920px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } /* İç düzen. */
.izl-sol { display: flex; align-items: center; gap: 22px; min-width: 0; } /* Marka + menü. */
.izl-marka { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; } /* Marka. */
.izl-logo { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 0 8px rgba(239, 68, 68, .35)); } /* Kurum logosu. */
.izl-marka-ad { display: flex; align-items: center; gap: 8px; font: 800 15px/1.1 "Outfit", "Inter", sans-serif; letter-spacing: .05em; color: #fff; text-transform: uppercase; white-space: nowrap; } /* Kurum adı. */
:root[data-tema="acik"] .izl-marka-ad { color: #0b1b33; } /* Açık tema. */
.izl-rozet { font: 700 11px/1 "Inter", sans-serif; letter-spacing: .1em; color: #22d3ee; padding: 3px 6px; border-radius: 5px; background: rgba(8, 51, 68, .7); border: 1px solid rgba(6, 182, 212, .4); } /* "GIS" rozeti. */
:root[data-tema="acik"] .izl-rozet { color: #0e7490; background: rgba(8, 145, 178, .1); } /* Açık tema. */
.izl-marka-alt { display: block; font: 500 11px/1.2 "Inter", sans-serif; color: rgba(103, 232, 249, .6); margin-top: 3px; letter-spacing: 0; text-transform: none; } /* Alt yazı. */
:root[data-tema="acik"] .izl-marka-alt { color: #0e7490; } /* Açık tema. */
.izl-menu { display: flex; align-items: center; gap: 6px; } /* Sekmeler. */
.izl-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9px; color: #94a3b8; text-decoration: none; font-size: 12px; font-weight: 500; border: 1px solid transparent; transition: color .2s, background .2s; white-space: nowrap; } /* Sekme. */
.izl-menu a:hover { color: #f1f5f9; background: rgba(30, 41, 59, .4); } /* Üzerine gelince. */
:root[data-tema="acik"] .izl-menu a { color: #475569; } :root[data-tema="acik"] .izl-menu a:hover { color: #0b1b33; background: rgba(8, 145, 178, .08); } /* Açık tema. */
.izl-menu a.izl-etkin { color: #fff; font-weight: 600; background: linear-gradient(90deg, rgba(30, 58, 138, .8), rgba(22, 78, 99, .6)); border-color: rgba(6, 182, 212, .4); box-shadow: 0 0 15px rgba(0, 242, 254, .15); } /* Etkin sekme. */
:root[data-tema="acik"] .izl-menu a.izl-etkin { color: #fff; background: linear-gradient(90deg, #0891b2, #2563eb); border-color: transparent; box-shadow: 0 6px 16px -6px rgba(8, 145, 178, .6); } /* Açık tema etkin. */
.izl-menu a.izl-etkin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; animation: izl-nabiz 2s cubic-bezier(.4, 0, .6, 1) infinite; } /* Nabız noktası. */
:root[data-tema="acik"] .izl-menu a.izl-etkin::before { background: #fff; box-shadow: 0 0 8px #fff; } /* Açık tema. */
@keyframes izl-nabiz { 50% { opacity: .4; } } /* animate-pulse. */
.izl-sag { display: flex; align-items: center; gap: 14px; } /* Kullanıcı alanı. */
.izl-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #334155, #0f172a); border: 1px solid rgba(71, 85, 105, .6); box-shadow: 0 0 0 2px rgba(6, 182, 212, .2); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #67e8f9; flex: none; } /* Baş harfler. */
.izl-kullanici-ad { text-align: right; line-height: 1.2; } /* Ad ve rol. */
.izl-kullanici-ad b { display: block; font-size: 12px; color: #fff; letter-spacing: .02em; } /* Ad. */
:root[data-tema="acik"] .izl-kullanici-ad b { color: #0b1b33; } /* Açık tema. */
.izl-kullanici-ad small { font-size: 10px; color: #94a3b8; font-weight: 500; } /* Rol. */
.izl-tema { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(30, 41, 59, .6); border: 1px solid rgba(51, 65, 85, .5); color: #cbd5e1; cursor: pointer; } /* Tema düğmesi. */
.izl-tema:hover { color: #67e8f9; } /* Üzerine gelince. */
:root[data-tema="acik"] .izl-tema { background: #fff; border-color: #c9d8ea; color: #475569; } /* Açık tema. */
.izl-tema svg, .izl-cikis svg { width: 16px; height: 16px; } /* Simgeler. */
.izl-cikis { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; background: rgba(244, 63, 94, .1); border: 1px solid rgba(244, 63, 94, .3); color: #fda4af; font: 600 12px/1 "Inter", sans-serif; letter-spacing: .03em; cursor: pointer; } /* Kırmızı çıkış. */
.izl-cikis:hover { background: rgba(244, 63, 94, .2); color: #fecdd3; } /* Üzerine gelince. */
:root[data-tema="acik"] .izl-cikis { color: #e11d48; } /* Açık tema. */
@media (max-width: 1100px) { .izl-kullanici-ad, .izl-marka-alt { display: none; } .izl-menu a { padding: 8px 10px; } } /* Dar ekran. */
@media (max-width: 760px) { .izl-ust { height: auto; } .izl-ust-ic { flex-wrap: wrap; padding: 8px 12px; } .izl-sol { flex-wrap: wrap; gap: 8px; } .izl-marka-ad { font-size: 13px; } } /* Telefon. */
@media print { .izl-ust { display: none !important; } } /* Yazdırmada görünmez. */