/* ============================================================ SAMSUN ULAŞIM SİSTEMİ - Tasarım Sistemi v3 Kurumun mevcut projelerinin (ulasimtakipsistemi, servermonitoring, samsunmobilv2) ortak gramerinden türetildi: - OKLCH soğuk kayrak nötrler (hue 240) + ılık off-white metin (hue 80) - Inter metin / JetBrains Mono sayı sözleşmesi ('tnum' global) - Renk = anlam: mint=canlı, mavi=ağ, amber=durak/seçim, kırmızı=hata - Kartlarda renkli kenar çizgisi (3px üst kural), %8 alfa yıkama - Ayrım hairline ile; gölge ve cam sadece özel yerlerde - Tek easing: cubic-bezier(.16,1,.3,1); 140/180ms bütçe - Genişleyen nabız halkası = canlı veri sinyali ============================================================ */ /* Tonlar kontrol.php'den (duvar ekranı varyantı): her yüzey ~0.04 L daha koyu, semantikler mesafe okunurluğu için daha doygun. TEMA SİSTEMİ (açık/koyu/sistem): - Varsayılan (:root) = AÇIK tema — ilk açılışta ve tercih belirtilmemişse gösterilir. - :root[data-theme="dark"] = kullanıcı açıkça KOYU seçmiş (işletim sistemi ne olursa olsun). - @media (prefers-color-scheme: dark) + :not([data-theme="light"]) = "Sistem" seçiliyken (veya henüz JS çalışmadıysa) işletim sistemi koyu ise koyu uygulanır; kullanıcı açıkça AÇIK seçtiyse bu blok atlanır. Seçim özniteliğinde tutulur ve localStorage'da saklanır (bkz. layouts/main.php sonundaki tema betiği). */ :root { /* SamRota 2026 — kurumsal turkuaz kimliği (AÇIK/gündüz zemin) */ --ground: #EAF1F3; --bg-deep: #EAF1F3; --bg-base: #F7FAFB; --bg-panel: rgba(255, 255, 255, 0.86); /* cam yüzey */ --bg-soft: rgba(11, 41, 66, 0.045); --line-thin: rgba(11, 64, 80, 0.10); --line: rgba(11, 64, 80, 0.16); --txt: #0B2942; --txt-mid: #3E5A68; --txt-mute: #5A6B7D; --accent: #0FA3B1; /* good - canlı / birincil eylem (mint) */ --accent-2: #0B8595; --accent-ink: #04222A; --blue: #2569B0; /* info - hatlar / ağ */ --amber: #C9820A; /* warn - duraklar / akıllı / seçim */ --amber-ink: #241A02; --bad: #D6433D; --purple: #7A5FD1; --radius: 18px; /* kart / panel */ --radius-sm: 10px; /* kontrol / rozet */ --tap: 200ms cubic-bezier(.16, 1, .3, 1); --tap-fast: 140ms cubic-bezier(.16, 1, .3, 1); --sidebar-w: 236px; --hdr-h: 64px; --ftr-h: 38px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Sora', 'Inter', sans-serif; --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; --glass: rgba(255, 255, 255, 0.82); --glass-2: rgba(255, 255, 255, 0.68); --glass-line: rgba(11, 64, 80, 0.14); color-scheme: light; } /* "Sistem" seçiliyken (veya tercih henüz uygulanmadıysa) OS koyu ise koyu tema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #061019; --bg-deep: #061019; --bg-base: #07141A; --bg-panel: rgba(12, 26, 34, 0.62); --bg-soft: rgba(255, 255, 255, 0.045); --line-thin: rgba(90, 205, 225, 0.12); --line: rgba(90, 205, 225, 0.18); --txt: #EAFBF2; --txt-mid: #9CC3CC; --txt-mute: #6E8792; --accent: #0FA3B1; --accent-2: #16C6D9; --accent-ink: #04222A; --blue: #54B9FF; --amber: #F5C451; --amber-ink: #241A02; --bad: #FF6B6B; --purple: #B08CFF; --glass: rgba(12, 26, 34, 0.62); --glass-2: rgba(8, 20, 28, 0.5); --glass-line: rgba(90, 205, 225, 0.15); color-scheme: dark; } } /* Kullanıcı açıkça KOYU seçtiyse — işletim sistemi ne olursa olsun uygula. */ :root[data-theme="dark"] { --ground: #061019; --bg-deep: #061019; --bg-base: #07141A; --bg-panel: rgba(12, 26, 34, 0.62); --bg-soft: rgba(255, 255, 255, 0.045); --line-thin: rgba(90, 205, 225, 0.12); --line: rgba(90, 205, 225, 0.18); --txt: #EAFBF2; --txt-mid: #9CC3CC; --txt-mute: #6E8792; --accent: #0FA3B1; --accent-2: #16C6D9; --accent-ink: #04222A; --blue: #54B9FF; --amber: #F5C451; --amber-ink: #241A02; --bad: #FF6B6B; --purple: #B08CFF; --glass: rgba(12, 26, 34, 0.62); --glass-2: rgba(8, 20, 28, 0.5); --glass-line: rgba(90, 205, 225, 0.15); color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Tema geçişi (açık/koyu) yumuşak olsun — daha özel bir transition tanımlayan öğelerde bu genel kural zaten geçersiz kılınır (öncelik/özgüllük gereği). */ *, *::before, *::after { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } body { background: var(--bg-deep); color: var(--txt); font: 400 14.5px/1.55 var(--font); font-feature-settings: 'cv11', 'ss01', 'tnum'; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: oklch(0.76 0.16 205 / 0.3); } /* Kaydırma çubukları - şeffaf ray, hairline başparmak */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--bg-deep); } .mono, time, .code { font-family: var(--mono); font-size: 0.92em; } .muted { color: var(--txt-mute); } .empty { padding: 24px; text-align: center; color: var(--txt-mute); font-size: 13.5px; } /* ---------------- Komuta başlığı (kontrol.php hdr) ---------------- */ .hdr { position: fixed; top: 0; left: 0; right: 0; height: var(--hdr-h); background: linear-gradient(to bottom, oklch(0.05 0.005 240), var(--bg-base) 90%); border-bottom: 1px solid var(--line-thin); display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0 24px; gap: 24px; z-index: 30; } .hdr-brand { display: flex; align-items: center; gap: 16px; } .sidebar-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line-thin); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--txt); cursor: pointer; flex-shrink: 0; } .sidebar-toggle:hover { background: var(--bg-base); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 20; } .hdr-brand img { height: 38px; } .hdr-title { font-weight: 800; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; } .hdr-title b { color: var(--accent); font-weight: 800; } .hdr-sub { font-size: 11.5px; color: var(--txt-mute); letter-spacing: .15em; text-transform: uppercase; margin-top: 2px; } .hdr-center { display: flex; flex-direction: column; align-items: center; } .hdr-shift { font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--txt-mute); margin-bottom: 2px; } .hdr-shift-name { color: var(--accent); font-weight: 700; } .hdr-clock { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: .02em; color: var(--txt); display: flex; align-items: baseline; gap: 10px; } .hdr-date { font-size: 13px; color: var(--txt-mid); font-weight: 500; } .hdr-right { display: flex; align-items: center; gap: 16px; } /* Tema anahtarı (açık/koyu/sistem) — hem panel başlığında (main.php) hem giriş sayfasında (login.php) ortak kullanılır. */ .theme-switch{display:flex;align-items:center;gap:2px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px} .theme-btn{display:flex;align-items:center;justify-content:center;width:30px;height:26px;border:0;background:transparent;border-radius:7px;color:var(--txt-mute);cursor:pointer;transition:var(--tap-fast)} .theme-btn:hover{color:var(--txt);background:var(--bg-soft)} .theme-btn.active{background:var(--accent);color:var(--accent-ink)} .theme-btn svg{width:15px;height:15px;pointer-events:none} .hdr-stat { display: flex; flex-direction: column; align-items: flex-end; } .hdr-stat-lbl { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--txt-mute); } .hdr-stat-val { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--accent); line-height: 1.1; } .hdr-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); position: relative; flex-shrink: 0; } .hdr-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ring 1.6s ease-out infinite; } @keyframes ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } } .hdr-status-text { font-size: 12.5px; font-weight: 700; color: var(--accent); letter-spacing: .15em; text-transform: uppercase; } /* ---------------- Alt durum çubuğu (kontrol.php ftr) ---------------- */ .ftr { position: fixed; bottom: 0; left: 0; right: 0; height: var(--ftr-h); background: var(--bg-base); border-top: 1px solid var(--line-thin); display: flex; align-items: center; gap: 28px; padding: 0 24px; z-index: 30; } .ftr-cell { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; } .ftr-cell b { font-family: var(--mono); color: var(--txt); font-weight: 600; } .ftr-cell .lbl { color: var(--txt-mute); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; } .ftr-spacer { flex: 1; } .ftr-marquee { font-family: var(--mono); font-size: 12.5px; color: var(--txt-mute); animation: pulse-dim 3s ease-in-out infinite; } @keyframes pulse-dim { 0%, 100% { opacity: .7; } 50% { opacity: 1; } } /* ---------------- Kabuk ---------------- */ .shell { display: flex; margin-top: var(--hdr-h); margin-bottom: var(--ftr-h); min-height: calc(100vh - var(--hdr-h) - var(--ftr-h)); } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-base); border-right: 1px solid var(--line-thin); display: flex; flex-direction: column; position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h) - var(--ftr-h)); } .nav { flex: 1; padding: 8px 10px; overflow-y: auto; } .nav-section { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-mute); padding: 16px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--txt-mid); font-weight: 500; font-size: 14px; margin-bottom: 1px; position: relative; transition: background var(--tap-fast), color var(--tap-fast); } .nav-item:hover { background: var(--bg-soft); color: var(--txt); text-decoration: none; } .nav-item:active { transform: scale(0.985); } .nav-item.active { background: oklch(0.76 0.16 205 / 0.14); color: var(--txt); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--accent); } .nav-item svg { opacity: 0.6; flex-shrink: 0; } .nav-item.active svg { opacity: 1; color: var(--accent); } .nav-item-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-footer { display: flex; align-items: center; gap: 4px; padding: 10px; border-top: 1px solid var(--line-thin); } .user-chip { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--radius-sm); flex: 1; color: inherit; transition: background var(--tap-fast); min-width: 0; } .user-chip:hover { background: var(--bg-soft); text-decoration: none; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: var(--accent); flex-shrink: 0; } .user-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .user-info strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-info span { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-mute); } /* Mobil çekmece profil kartı + sürüm satırı: yalnız mobilde görünür (bkz. @media max-width:880px sonundaki "Mobil çekmece — mobil uygulama görünümü" bloğu). Masaüstünde .sidebar-footer'daki .user-chip kullanılır. */ .nav-profile-card { display: none; } .nav-version { display: none; } .logout-label { display: none; } .logout-icon-circle { display: contents; } /* Genişleyen nabız halkası - canlı veri sinyali */ .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; animation: pulse 1.8s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(0.76 0.16 205 / .55); } 70% { box-shadow: 0 0 0 9px oklch(0.76 0.16 205 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.76 0.16 205 / 0); } } /* ---------------- Ana içerik ---------------- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .main-inner { padding: 24px 32px 44px; width: 100%; } .main-full { position: relative; } /* Harita sahnesi: kontrol.php'deki gibi çerçeveli kart içinde */ .main-full .map-stage { flex: 1; padding: 12px; display: flex; } .map-frame { position: relative; flex: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-thin); background: var(--bg-base); } .page-head { margin-bottom: 20px; } .page-head h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .page-head .muted { margin-top: 3px; font-size: 13px; } .page-head:has(.btn, .search-form, .head-actions, .inline-form) { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-head:has(.btn) h1 { flex: 1; } .head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Açılır menü (dropdown) — ilişkili toplu işlemleri tek buton altında toplar */ .menu-drop { position: relative; display: inline-flex; } .menu-drop-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 220px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius-sm); box-shadow: 0 14px 40px oklch(0.03 0 0 / 0.5); padding: 6px; } .menu-drop-panel[hidden] { display: none; } .menu-drop-item { display: block; width: 100%; text-align: left; padding: 9px 11px; font: inherit; font-size: 13px; color: var(--txt); background: none; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; } .menu-drop-item:hover { background: var(--bg-deep); } @media (max-width: 640px) { .head-actions { width: 100%; } .head-actions .btn, .head-actions .menu-drop { flex: 1 1 auto; } .head-actions .menu-drop .btn { width: 100%; } .menu-drop-panel { left: 0; right: auto; min-width: 100%; } } /* ---------------- Paneller ---------------- */ .panel { background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; max-width: 100%; } /* Metin, dar/kaydırılamayan konteynerlerde kesilip görünmez olmasın — taşan bir kelime/URL varsa kırılıp sarmalansın. */ .main-inner, .panel, .page-head, p { overflow-wrap: anywhere; } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid var(--line-thin); } .panel-head h2 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-mid); } .panel-badge { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 700; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } /* ---------------- KPI kartları (kontrol.php: 4px sol ray) ---------------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-card { --kpi-color: var(--accent); background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; color: inherit; position: relative; overflow: hidden; transition: transform var(--tap), border-color var(--tap-fast); } .stat-card:hover { transform: translateY(-1px); border-color: var(--kpi-color); text-decoration: none; } .stat-card:active { transform: scale(0.98); } .stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi-color); } .stat-live { --kpi-color: var(--accent); } .stat-stops { --kpi-color: var(--blue); } .stat-smart { --kpi-color: var(--amber); } .stat-route { --kpi-color: var(--purple); } .stat-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-mute); font-weight: 600; margin-bottom: 6px; } .stat-value { font-family: var(--mono); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--kpi-color); } .stat-hint { font-size: 12.5px; color: var(--txt-mid); margin-top: 6px; display: flex; align-items: center; gap: 6px; } /* Canlı sayı nefes alır - yalnız veri varken (data-active ile) */ .stat-live[data-active="1"] .stat-value { animation: stat-pulse 2s ease-in-out infinite; } @keyframes stat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .75; } } /* ---------------- Listeler ---------------- */ .layer-list, .log-list { list-style: none; } .layer-list li, .log-list li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line-thin); font-size: 13.5px; } .layer-list li:last-child, .log-list li:last-child { border-bottom: none; } .layer-list li:hover, .log-list li:hover { background: var(--bg-soft); } .layer-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex-shrink: 0; } .layer-list .tag { margin-left: auto; } /* Feed satırı (kontrol.php: mono zaman | metin) */ .log-list li { display: grid; grid-template-columns: 66px auto 1fr; gap: 10px; align-items: baseline; } .log-list time { font-family: var(--mono); font-size: 12.5px; color: var(--txt-mute); font-weight: 600; order: -1; } .log-action { font: 700 12.5px var(--mono); color: var(--accent); } .log-user { color: var(--txt); font-size: 13px; } /* ---------------- Etiketler ---------------- */ .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 4px; background: var(--bg-soft); color: var(--txt-mute); border: 1px solid var(--line-thin); white-space: nowrap; font-family: var(--mono); } .tag-smart { background: oklch(0.78 0.16 70 / 0.14); color: var(--amber); border-color: oklch(0.78 0.16 70 / 0.35); } .tag-ok { background: oklch(0.76 0.16 205 / 0.12); color: var(--accent); border-color: oklch(0.76 0.16 205 / 0.32); } .tag-off { background: oklch(0.68 0.18 25 / 0.12); color: var(--bad); border-color: oklch(0.68 0.18 25 / 0.3); } .tag-role-admin { background: oklch(0.70 0.15 235 / 0.14); color: var(--blue); border-color: oklch(0.70 0.15 235 / 0.35); } .tag-role-operator { background: oklch(0.78 0.16 70 / 0.14); color: var(--amber); border-color: oklch(0.78 0.16 70 / 0.35); } /* ---------------- Butonlar ---------------- */ /* Varsayılan: hayalet (şeffaf + hairline). Dolgu yalnız birincil eylemde. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: transparent; color: var(--txt-mid); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--tap-fast), color var(--tap-fast), background var(--tap-fast), transform var(--tap-fast); white-space: nowrap; } .btn:hover { border-color: var(--accent); color: var(--txt); text-decoration: none; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); } .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; } .btn-danger:hover { border-color: var(--bad); color: #fff; filter: brightness(1.1); } .btn-danger-text { color: var(--bad) !important; } .btn-block { width: 100%; } .btn-ghost { display: inline-flex; align-items: center; background: none; border: none; color: var(--txt-mute); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 9px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--tap-fast), color var(--tap-fast), transform var(--tap-fast); } .btn-ghost:hover { background: var(--bg-soft); color: var(--txt); text-decoration: none; } .btn-ghost:active { transform: scale(0.96); } /* ---------------- Form elemanları ---------------- */ .field { display: flex; flex-direction: column; gap: 5px; } .field > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-mute); } /* Girdi = çukur: kabından daha koyu, odakta aydınlanır */ .field input, .field select, .input { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--txt); font-family: inherit; font-size: 13.5px; padding: 8px 11px; transition: border-color var(--tap-fast), background var(--tap-fast); min-width: 0; } .field input::placeholder, .input::placeholder { color: var(--txt-mute); } .field input:focus, .field select:focus, .input:focus { outline: none; border-color: var(--accent); background: var(--bg-base); } .field input[type="color"] { padding: 3px; height: 34px; width: 50px; cursor: pointer; } .field-check { flex-direction: row; align-items: center; gap: 7px; padding-top: 20px; } .field-check input { accent-color: var(--accent); width: 15px; height: 15px; } .field-check span { font-size: 13px; color: var(--txt); font-weight: 500; letter-spacing: 0; text-transform: none; } .form-stack { display: flex; flex-direction: column; gap: 14px; padding: 16px; } .form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px 16px; } .form-inline-panel { border-color: var(--accent); } .field-grow { flex: 1; min-width: 160px; } .inline-form { display: inline-block; } .search-form { display: flex; gap: 8px; } .search-form .input { width: 260px; } .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .filter-chips { display: flex; gap: 6px; } .chip { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-thin); color: var(--txt-mute); transition: border-color var(--tap-fast), color var(--tap-fast), background var(--tap-fast); } .chip:hover { border-color: var(--accent); color: var(--txt); text-decoration: none; } .chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; } /* ---------------- Tablolar ---------------- */ .table { width: 100%; border-collapse: collapse; } .table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-mute); padding: 11px 16px; border-bottom: 1px solid var(--line); } .table td { padding: 10px 16px; border-bottom: 1px solid var(--line-thin); vertical-align: middle; font-size: 13.5px; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:not(.edit-row):hover td { background: var(--bg-soft); } /* Panel içine doğrudan konan tablolarda köşe hücreleri panelin radius'una otursun — border-collapse'lı tablo kenarlıkları overflow:hidden ile her tarayıcıda tam kırpılmayabiliyor, köşelerde kare çıkıntı bırakabiliyor. */ .panel > table.table:first-child thead tr:first-child th:first-child, .panel > table.table:only-child tr:first-child th:first-child, .panel > table.table:only-child tr:first-child td:first-child { border-top-left-radius: var(--radius); } .panel > table.table:first-child thead tr:first-child th:last-child, .panel > table.table:only-child tr:first-child th:last-child, .panel > table.table:only-child tr:first-child td:last-child { border-top-right-radius: var(--radius); } .panel > table.table:last-child tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); } .panel > table.table:last-child tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); } .row-actions { text-align: right; white-space: nowrap; } .table-note { padding: 10px 16px; font-size: 12.5px; color: var(--txt-mute); } .edit-row td { background: var(--bg-base); } .edit-row .form-row { padding: 4px 0 10px; } /* ---------------- Flash ---------------- */ .flash { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; margin-bottom: 16px; border: 1px solid; opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1); } @starting-style { .flash { opacity: 0; transform: translateY(-6px); } } .flash-error { background: oklch(0.68 0.18 25 / 0.12); border-color: oklch(0.68 0.18 25 / 0.4); color: oklch(0.8 0.12 25); } .flash-success { background: oklch(0.76 0.16 205 / 0.1); border-color: oklch(0.76 0.16 205 / 0.35); color: var(--accent-2); } /* ---------------- Giriş sayfası ---------------- */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; background: var(--bg-deep); } .login-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 20% 8%, oklch(0.76 0.16 205 / 0.07), transparent), radial-gradient(ellipse 45% 38% at 85% 92%, oklch(0.70 0.15 235 / 0.06), transparent); pointer-events: none; } .login-card { width: 100%; max-width: 380px; background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius); padding: 34px 30px 26px; position: relative; overflow: hidden; opacity: 1; transform: translateY(0); transition: opacity 240ms ease, transform 240ms cubic-bezier(.16, 1, .3, 1); } .login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } @starting-style { .login-card { opacity: 0; transform: translateY(10px); } } .login-brand { text-align: center; margin-bottom: 26px; } .login-logo { height: 74px; display: block; margin: 0 auto; } .login-brand h1 { font-size: 17px; font-weight: 800; letter-spacing: .04em; margin-top: 14px; text-transform: uppercase; } .login-brand h1 b { color: var(--accent); font-weight: 800; } .login-brand p { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-mute); margin-top: 6px; } .login-form { display: flex; flex-direction: column; gap: 15px; } .login-form .field input { padding: 10px 12px; font-size: 14px; } .login-form .btn { margin-top: 4px; padding: 10px; font-size: 14px; font-weight: 700; } .login-note { margin-top: 22px; text-align: center; font-size: 11.5px; color: var(--txt-mute); line-height: 1.65; } /* Buton içi yükleme çemberi */ .btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid oklch(0.16 0.03 205 / 0.3); border-top-color: var(--accent-ink); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------- Canlı harita ---------------- */ #map { position: absolute; inset: 0; } .map-hud { position: absolute; top: 14px; left: 14px; z-index: 10; display: flex; flex-direction: column; gap: 10px; max-height: calc(100% - 28px); } /* Paneller opak - cam yok (grameriniz: blur yalnız istisnai yerlerde) */ .hud-card { background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.4); } .hud-status { display: flex; align-items: center; gap: 8px; font-weight: 600; } .hud-status b { font-family: var(--mono); font-weight: 700; } .hud-sep { color: var(--txt-mute); } #hud-count { font-family: var(--mono); font-weight: 700; } /* Katmanlar: mobil uygulamadaki gibi ikon düğmesiyle açılıp kapanan yüzer panel — varsayılan kapalı, haritayı kaplamaz. */ .hud-layers-toggle { position: absolute; top: 14px; right: 14px; z-index: 10; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius); color: var(--txt-mid); cursor: pointer; box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.4); } .hud-layers-toggle:hover { color: var(--txt); border-color: var(--line); } .hud-layers-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); } /* ---------------- Tramvay: yönetim/vardiya paneli (haritanın altında, aç/kapa) ---------------- */ .tram-admin { /* fixed: .map-frame'in overflow:hidden'ı absolute'ta paneli (özellikle açılınca) kesiyordu — fixed ile haritanın çerçevesinden tamamen çıkıp her zaman viewport'un üstünde, tam görünür kalır. */ position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 1000; max-width: 1100px; margin: 0 auto; } .tram-admin-toggle { width: 100%; background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius-sm); padding: 9px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--txt-mute); cursor: pointer; box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.4); } .tram-admin-toggle:hover { color: var(--txt); border-color: var(--line); } .tram-admin-body { margin-top: 8px; background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius); padding: 16px; max-height: 60vh; overflow: auto; box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.4); } .tram-admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 780px) { .tram-admin-cols { grid-template-columns: 1fr; } } #hud-updated { color: var(--txt-mute); font-weight: 500; font-size: 11.5px; font-family: var(--mono); } .hud-layers[hidden] { display: none; } /* hidden özniteliği display:flex'e yenilmesin */ .hud-layers { position: absolute; top: 58px; right: 14px; z-index: 10; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; width: 236px; max-width: calc(100vw - 28px); max-height: min(62vh, 480px); padding: 12px 10px; } .hud-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-mute); padding: 0 6px 8px; } .hud-divider { height: 1px; background: var(--line-thin); margin: 7px 4px; } /* Katman satırı + özel anahtar (toggle switch) */ .toggle { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--txt-mid); padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: background var(--tap-fast), color var(--tap-fast); } .toggle:hover { background: var(--bg-soft); color: var(--txt); } .toggle:has(input:checked) { color: var(--txt); } .toggle input { appearance: none; margin: 0; margin-left: auto; width: 34px; height: 19px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; position: relative; cursor: pointer; flex-shrink: 0; order: 3; transition: background var(--tap-fast), border-color var(--tap-fast); } .toggle input::after { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--txt-mid); transition: transform var(--tap-fast), background var(--tap-fast); } .toggle input:checked { background: oklch(0.76 0.16 205 / 0.22); border-color: var(--accent); } .toggle input:checked::after { transform: translateX(15px); background: var(--accent); } .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .swatch-diamond { transform: rotate(45deg); border-radius: 2px; } /* Durak çekmecesi */ .stop-drawer { position: absolute; top: 58px; right: 14px; z-index: 11; width: 330px; max-height: calc(100% - 72px); background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius); box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.4); display: flex; flex-direction: column; opacity: 1; transform: translateX(0); transition: opacity 200ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1); } .stop-drawer[hidden] { display: none; } @starting-style { .stop-drawer { opacity: 0; transform: translateX(12px); } } .stop-drawer header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 4px; } .stop-drawer header .tag { flex-shrink: 0; } .stop-drawer header > div { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; } .stop-drawer header strong { font-size: 16px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-sub { padding: 0 16px 10px; color: var(--txt-mute); font-family: var(--mono); font-size: 11.5px; } .bus-list { overflow-y: auto; padding: 4px 8px 12px; } .bus-list::-webkit-scrollbar { width: 8px; } .bus-item { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: var(--radius-sm); transition: background var(--tap-fast); } .bus-item:hover { background: var(--bg-soft); } .bus-item + .bus-item { border-top: 1px solid var(--line-thin); } .bus-line { min-width: 44px; text-align: center; background: var(--blue); color: oklch(0.14 0.03 235); font: 700 12.5px var(--mono); border-radius: 4px; padding: 4px 7px; flex-shrink: 0; } .bus-meta { flex: 1; min-width: 0; } .bus-meta strong { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bus-meta span { font-size: 10.5px; color: var(--txt-mute); font-family: var(--mono); } .bus-eta { text-align: right; flex-shrink: 0; min-width: 40px; } .bus-eta strong { font: 700 18px/1.1 var(--mono); letter-spacing: -0.02em; color: var(--accent); } .bus-eta span { display: block; font-size: 9px; font-weight: 700; color: var(--txt-mute); letter-spacing: .1em; text-transform: uppercase; } /* Skeleton shimmer - yüklenirken gerçek düzenin hayaleti */ .skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-soft) 25%, var(--line-thin) 50%, var(--bg-soft) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skel-bus { height: 46px; margin: 6px 8px; } /* Harita overlay'leri (kontrol.php) — hud-card ile aynı yüzey: tema değişse de okunur */ .map-overlay { position: absolute; z-index: 9; pointer-events: none; background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius-sm); box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.4); } /* Lejant: sağ alt. Renkler haritadaki işaretçilerle bire bir (tema bağımsız). */ .map-overlay.legend { right: 14px; bottom: 14px; padding: 0 14px; height: 44px; display: flex; align-items: center; gap: 16px; font-size: 12.5px; font-weight: 500; color: var(--txt-mid); white-space: nowrap; } .legend-item { display: inline-flex; align-items: center; gap: 7px; line-height: 1; } .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .legend-dot.bus { background: #e93534; } .legend-dot.tram { background: #3ECF8E; } .legend-dot.stop { background: #5b9eff; } .legend-dot.smart { background: #e0b13b; border-radius: 2px; transform: rotate(45deg) scale(.9); } /* Telemetri: sol alt */ .map-overlay.bl { left: 14px; bottom: 14px; padding: 0 16px; height: 64px; display: flex; gap: 18px; align-items: center; } .map-overlay .ovl-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .map-overlay .ovl-lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-mute); font-weight: 600; white-space: nowrap; } .map-overlay .ovl-val { font-family: var(--mono); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--accent); } .map-overlay .ovl-sep { width: 1px; height: 28px; background: var(--line-thin); flex-shrink: 0; } /* MapLibre kontrolleri overlay'lerin üstünde dursun, üst üste binmesin */ .map-frame .maplibregl-ctrl-bottom-right { bottom: 62px; right: 4px; } .map-frame .maplibregl-ctrl-bottom-left { bottom: 82px; left: 4px; } .maplibregl-ctrl-group { border-radius: var(--radius-sm) !important; overflow: hidden; } /* Dar ekran: telemetri tam genişlik, lejant onun üstünde ortalı; yakınlaştırma düğmeleri kalkar (parmakla yakınlaştırma yeter). */ @media (max-width: 880px) { .map-overlay.bl { left: 14px; right: 14px; justify-content: space-evenly; gap: 10px; padding: 0 10px; } .map-overlay.bl .ovl-cell { align-items: center; text-align: center; } .map-overlay.legend { left: 14px; right: 14px; bottom: 88px; justify-content: center; gap: 12px 16px; height: auto; min-height: 40px; padding: 8px 12px; flex-wrap: wrap; white-space: normal; } .map-frame .maplibregl-ctrl-bottom-right { display: none; } .map-frame .maplibregl-ctrl-bottom-left { bottom: 140px; } .stop-drawer { left: 14px; right: 14px; width: auto; } } /* Harita popup */ .maplibregl-popup-content { background: var(--bg-panel) !important; color: var(--txt) !important; border-radius: var(--radius) !important; border: 1px solid var(--line-thin); padding: 12px 14px !important; font-family: var(--font) !important; box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.4) !important; } .maplibregl-popup-tip { border-top-color: var(--bg-panel) !important; border-bottom-color: var(--bg-panel) !important; } .veh-popup strong { font-size: 14px; } .veh-popup .mono { color: var(--txt-mute); } .veh-popup-rows { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; } .veh-popup-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; } .veh-popup-row .k { color: var(--txt-mute); } .veh-popup-row .v { color: var(--txt); font-weight: 600; text-align: right; } .veh-popup-sub { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-mute); } .veh-popup-stops { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; } .veh-popup-stops li { margin-bottom: 2px; } .veh-popup-updated { margin-top: 8px; font-size: 11px; } /* ---------------- Hat kartları ---------------- */ .route-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .route-card { display: flex; align-items: center; gap: 11px; background: var(--bg-panel); border: 1px solid var(--line-thin); border-radius: var(--radius); padding: 12px 14px; color: inherit; transition: transform var(--tap), border-color var(--tap-fast); } .route-card:hover { border-color: var(--blue); text-decoration: none; transform: translateY(-1px); } .route-card:active { transform: scale(0.98); } .route-card .tag { margin-left: auto; } .route-badge { background: var(--blue); color: oklch(0.14 0.03 235); font: 700 13px var(--mono); border-radius: 4px; padding: 4px 9px; min-width: 40px; text-align: center; flex-shrink: 0; } .route-name { font-size: 12.5px; color: var(--txt-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------------- Detay listesi ---------------- */ .detail-list { padding: 6px 0; } .detail-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 16px; border-bottom: 1px solid var(--line-thin); } .detail-list > div:last-child { border-bottom: none; } .detail-list dt { color: var(--txt-mute); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; align-self: center; } .detail-list dd { font-weight: 500; font-size: 13.5px; } /* ---------------- Hata sayfaları ---------------- */ .error-page { text-align: center; padding: 100px 20px; } .error-page h1 { font: 700 60px/1 var(--mono); letter-spacing: -0.02em; color: var(--txt-mute); } .error-page p { color: var(--txt-mid); margin: 12px 0 24px; } /* ---------------- Akıllı Durak Yönetimi ---------------- */ /* Şifre çipi - açık görünür (saha personeli için) + kopyala + gizle/göster */ .pw-chip { display: inline-flex; align-items: center; gap: 5px; background: oklch(0.78 0.16 70 / 0.12); border: 1px solid oklch(0.78 0.16 70 / 0.3); color: var(--amber); border-radius: var(--radius-sm); padding: 2px 4px 2px 9px; font-family: var(--mono); font-size: 13.5px; font-weight: 700; letter-spacing: .06em; transition: background var(--tap-fast); } .pw-chip .pw-val { min-width: 34px; } .pw-chip.copied { background: oklch(0.76 0.16 205 / 0.18); border-color: var(--accent); color: var(--accent); } .pw-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; border: none; background: transparent; color: inherit; border-radius: 5px; cursor: pointer; opacity: 0.6; transition: opacity var(--tap-fast), background var(--tap-fast), transform var(--tap-fast); } .pw-btn:hover { opacity: 1; background: oklch(0.78 0.16 70 / 0.18); } .pw-btn:active { transform: scale(0.9); } .pw-toggle[aria-pressed="true"] { opacity: 0.9; } /* Çevrimiçi/çevrimdışı noktası */ .online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; } .online-online { background: var(--accent); box-shadow: 0 0 6px var(--accent); } .online-offline { background: var(--bad); } .online-bilinmiyor { background: var(--txt-mute); } /* Açık arıza rozeti */ .fault-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: oklch(0.68 0.20 25 / 0.16); border: 1px solid oklch(0.68 0.20 25 / 0.4); color: var(--bad); font-family: var(--mono); font-size: 12px; font-weight: 700; } /* Modal */ .modal-overlay { position: fixed; inset: 0; z-index: 60; background: oklch(0.05 0.005 240 / 0.6); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; /* Sabit 60px, üst çubuğun (--hdr-h) gerçek yüksekliğini zar zor karşılıyordu — modal neredeyse çubuğa yapışık açılıyordu. Artık çubuk + görünür bir boşluk payı bırakılıyor. */ padding: calc(var(--hdr-h) + 20px) 20px calc(var(--ftr-h) + 20px); overflow-y: auto; opacity: 1; transition: opacity 160ms ease; } .modal-overlay[hidden] { display: none; } @starting-style { .modal-overlay { opacity: 0; } } .modal { width: 100%; max-width: 640px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--bg-panel); backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); border: 1px solid var(--line-thin); border-radius: var(--radius); box-shadow: 0 20px 60px oklch(0.03 0 0 / 0.6); transform: translateY(0); transition: transform 200ms cubic-bezier(.16,1,.3,1); } @starting-style { .modal { transform: translateY(-10px); } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-thin); flex: 0 0 auto; } .modal-head > div { display: flex; align-items: center; gap: 10px; } .modal-head strong { font-size: 17px; font-weight: 700; } .modal-body { padding: 18px 20px; flex: 1 1 auto; overflow-y: auto; } /* Sekmeli modal (Akıllı Durak detay) — başlık sabit kalır, yalnız aktif panel kaydırılır */ #detail-modal .modal-body { padding: 0; } .m-tabs { display: flex; gap: 2px; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--line-thin); background: var(--bg-panel); position: sticky; top: 0; z-index: 2; } .m-tab { padding: 12px 14px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--txt-mute); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .m-tab:hover { color: var(--txt); } .m-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .m-tab .fault-badge { min-width: 18px; height: 18px; font-size: 10.5px; } .m-tabpanel { padding: 18px 20px; } .m-tabpanel[hidden] { display: none; } .m-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin-bottom: 20px; } .m-field { display: flex; flex-direction: column; gap: 3px; } .m-field .k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-mute); } .m-field .v { font-size: 14px; font-weight: 500; } .m-field .v.mono { font-family: var(--mono); } .m-section-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-mid); margin: 18px 0 10px; display: flex; align-items: center; justify-content: space-between; } /* Arıza listesi */ .fault-item { border: 1px solid var(--line-thin); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 8px; border-left-width: 3px; } .fault-item.sev-kritik { border-left-color: var(--bad); } .fault-item.sev-yuksek { border-left-color: var(--amber); } .fault-item.sev-orta { border-left-color: var(--blue); } .fault-item.sev-dusuk { border-left-color: var(--txt-mute); } .fault-item.done { opacity: 0.6; } .fault-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .fault-top strong { font-size: 13.5px; flex: 1; } .fault-desc { font-size: 12.5px; color: var(--txt-mid); margin-bottom: 6px; } .fault-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--txt-mute); font-family: var(--mono); flex-wrap: wrap; } .fault-actions { display: flex; gap: 6px; margin-top: 8px; } .fstatus { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; } .fstatus-acik { background: oklch(0.68 0.20 25 / 0.15); color: var(--bad); } .fstatus-islemde { background: oklch(0.80 0.17 75 / 0.15); color: var(--amber); } .fstatus-cozuldu { background: oklch(0.78 0.17 205 / 0.15); color: var(--accent); } .new-fault-form { border-top: 1px solid var(--line-thin); padding-top: 16px; margin-top: 4px; } .new-fault-form .form-row { padding: 0; } /* Şifre benzersizlik göstergesi */ .pw-hint { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 4px; } .pw-hint.ok { color: var(--accent); } .pw-hint.bad { color: var(--bad); } .pw-hint.warn { color: var(--amber); } @media (max-width: 620px) { .m-grid { grid-template-columns: 1fr; } } /* ---------------- Erişilebilirlik ---------------- */ @media (prefers-reduced-motion: reduce) { .live-dot, .stat-live[data-active="1"] .stat-value, .skel { animation: none; } .flash, .login-card, .stop-drawer { transition: opacity 200ms ease; transform: none !important; } .stat-card, .route-card, .btn, .btn-ghost, .nav-item, .chip { transition: none; } } /* ---------------- Mobil ---------------- */ @media (max-width: 880px) { :root { --hdr-h: 54px; --ftr-h: 0px; } .hdr { padding: 0 12px; gap: 10px; } .hdr-brand img { height: 28px; } .hdr-brand > div { display: none; } .hdr-shift { display: none; } .hdr-clock { font-size: 17px; gap: 6px; } .hdr-date { font-size: 11px; } .hdr-stat { display: none; } .ftr { display: none; } .shell { flex-direction: column; } /* Sol menü: sabit yatay şeride kıvrılmak yerine hamburger ile açılan/kapanan çekmece. */ .sidebar-toggle { display: flex; } .sidebar-backdrop { display: block; } body.sidebar-open { overflow: hidden; } body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } .sidebar { position: fixed; top: var(--hdr-h); left: 0; bottom: 0; width: min(280px, 85vw); height: auto; flex-direction: column; align-items: stretch; flex-wrap: nowrap; z-index: 25; /* Cam temadaki 10-14px kenar boşluğu ile birlikte tamamen dışarı çıksın; aksi halde kapalıyken solda ince bir şerit kalıyordu. */ transform: translateX(calc(-100% - 16px)); transition: transform 0.25s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); } body.sidebar-open .sidebar { transform: translateX(0); } .nav { display: block; padding: 8px 10px; overflow-x: visible; overflow-y: auto; } .sidebar-footer { border-top: 1px solid var(--line-thin); margin-left: 0; } .main-inner { padding: 16px; } .main-full .map-stage { padding: 0; } .map-frame { border-radius: 0; border: 0; } .search-form .input { width: 100%; } .stat-value { font-size: 36px; } } /* ============================================================ SamRota 2026 — CAM (glass) TEMA katmanı Mevcut kurallara dokunmaz; cascade'de sonda olduğu için kazanır. Sadece GÖRÜNÜM; hiçbir class adı/yapısı değişmez. ============================================================ */ /* Canlı ağ arka planı + katmanlama */ #sr-net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block} .sr-glow{position:fixed;z-index:0;pointer-events:none;filter:blur(80px);opacity:.5;border-radius:50%;transition:opacity .25s} .sr-g1{width:52vw;height:52vw;left:-16vw;top:-18vw;background:radial-gradient(circle,rgba(22,198,217,.45),transparent 62%)} .sr-g2{width:46vw;height:46vw;right:-16vw;bottom:-18vw;background:radial-gradient(circle,rgba(15,163,177,.4),transparent 62%)} /* Açık temada parıltı daha soft — beyaz zeminde ağır kalmasın */ :root:not([data-theme="dark"]) .sr-glow{opacity:.22} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sr-glow{opacity:.5}} body{background:var(--ground)!important} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 30%,transparent 45%,rgba(0,0,0,.5))} /* İçerik canvas'ın üstünde kalsın (fixed .hdr/.ftr zaten z-index:30 — onlara dokunma) */ .shell{position:relative;z-index:1} /* Başlıklar Sora */ h1,h2,h3,.hdr-title,.page-head h1,.panel-head h2,.stat-value{font-family:var(--font-display)} /* Üst bar — cam */ .hdr{background:var(--glass)!important;backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2); border-bottom:1px solid var(--glass-line)!important} .hdr-title b{color:var(--accent)} /* Kenar çubuğu — cam kart. */ .shell > .sidebar,.sidebar{background:var(--glass)!important;backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-line)!important;border-radius:20px;margin:14px 0 14px 14px; box-shadow:0 20px 60px rgba(0,0,0,.35)} /* NOT: masaüstünde 14px üst+alt margin eklendiği için yükseklik de buna göre 28px azaltılmalı — yoksa sidebar-footer (profil kartı) sabit alt durum çubuğunun (.ftr) üstüne taşar. Yalnız masaüstünde (mobilde sidebar zaten height:auto ile yatay akışa dönüyor, bkz. 880px breakpoint). */ @media (min-width: 881px) { .shell > .sidebar,.sidebar{height:calc(100vh - var(--hdr-h) - var(--ftr-h) - 28px)!important} } .nav-item{border-radius:12px} .nav-item.active{background:linear-gradient(100deg,rgba(22,198,217,.16),rgba(15,163,177,.05))!important; color:var(--accent)!important;box-shadow:inset 0 0 0 1px rgba(22,198,217,.22)} .nav-item.active::before{background:var(--accent)!important;box-shadow:0 0 12px var(--accent)} .nav-section{color:var(--txt-mute)} /* Panel / kart — cam + glow + yumuşak giriş */ .panel,.stat-card,.card{background:var(--glass)!important;backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-line)!important;border-radius:var(--radius); box-shadow:0 18px 50px rgba(0,0,0,.32)} .panel-head{border-bottom:1px solid var(--glass-line)!important} .stat-card{overflow:hidden} .stat-card::before{width:4px;box-shadow:0 0 16px var(--kpi-color)} .stat-card:hover{transform:translateY(-2px);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px var(--kpi-color)} /* Birincil buton — mint gradyan + glow + ışık geçişi */ .btn{border-radius:12px} .btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2))!important;border:0!important; color:var(--accent-ink)!important;font-weight:700;box-shadow:0 12px 26px rgba(22,198,217,.3);position:relative;overflow:hidden} .btn-primary:hover{box-shadow:0 16px 36px rgba(22,198,217,.45);filter:none} .btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:sr-sheen 3.4s ease-in-out infinite} @keyframes sr-sheen{0%{left:-60%}55%,100%{left:130%}} /* Formlar — cam alanlar + mint odak */ input:not([type=checkbox]):not([type=radio]),select,textarea,.search-form input,.inline-form input{ background:var(--bg-soft)!important;border:1px solid var(--glass-line)!important;border-radius:12px!important;color:var(--txt)} input:focus,select:focus,textarea:focus{outline:0;border-color:rgba(22,198,217,.6)!important; box-shadow:0 0 0 4px rgba(22,198,217,.12)!important} /* Tablolar — cam başlık, mint hover */ .table thead th,table thead th{background:rgba(255,255,255,.03);border-bottom:1px solid var(--glass-line)} .table tbody tr:hover,table tbody tr:hover{background:rgba(22,198,217,.05)} .table td,.table th,table td,table th{border-color:var(--glass-line)} /* Rozet / chip / etiket */ .badge,.chip,.tag,.panel-badge,.pill{border-radius:20px} /* Mint scrollbar */ ::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent),var(--accent-2))!important;border-radius:20px; border:2px solid transparent;background-clip:content-box} *{scrollbar-color:rgba(22,198,217,.4) transparent} @media (max-width:900px){.sidebar{margin:10px}} @media (prefers-reduced-motion:reduce){.btn-primary::after{animation:none}} /* Kayan çekmeceler + modal içleri — HER temada bulanıklaştırılmış cam (arkası net görünüp üst üste binmiş gibi durmasın). Önceden yalnız koyu temada blur uygulanıyordu; açık temada .sl-drawer/#pg-modal gibi öğeler yalnız kendi temel %86 opaklığıyla kalıyordu — arkadaki sayfa içeriği net sızıp metinler üst üste binmiş gibi görünüyordu (ör. Ekran Listesi sağ çekmecesi, akıllı durak detay modalı). Renk/arka plan geçişleri hâlâ temaya göre farklı (aşağıdaki koyu-tema blokları), yalnızca blur artık HER ZAMAN uygulanıyor. */ .sl-drawer,.dk-drawer,#pg-modal>div,#pub-modal .modal,#scr-modal .modal,.md .pubm>div{ backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1); } :root[data-theme="dark"] .sl-drawer,:root[data-theme="dark"] .dk-drawer, :root[data-theme="dark"] #pg-modal>div,:root[data-theme="dark"] #pub-modal .modal, :root[data-theme="dark"] #scr-modal .modal,:root[data-theme="dark"] .md .pubm>div{ border-color:var(--glass-line)!important; } :root[data-theme="dark"] .sl-drawer,:root[data-theme="dark"] .dk-drawer{ background:linear-gradient(160deg,rgba(14,28,38,.95),rgba(7,16,24,.93))!important; backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid var(--glass-line)!important} :root[data-theme="dark"] #pg-modal>div,:root[data-theme="dark"] #pub-modal .modal, :root[data-theme="dark"] #scr-modal .modal,:root[data-theme="dark"] .md .pubm>div{ background:linear-gradient(160deg,rgba(15,30,40,.96),rgba(7,16,24,.94))!important; border:1px solid var(--glass-line)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sl-drawer,:root:not([data-theme="light"]) .dk-drawer{ background:linear-gradient(160deg,rgba(14,28,38,.95),rgba(7,16,24,.93))!important; backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid var(--glass-line)!important} :root:not([data-theme="light"]) #pg-modal>div,:root:not([data-theme="light"]) #pub-modal .modal, :root:not([data-theme="light"]) #scr-modal .modal,:root:not([data-theme="light"]) .md .pubm>div{ background:linear-gradient(160deg,rgba(15,30,40,.96),rgba(7,16,24,.94))!important; border:1px solid var(--glass-line)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} } /* Hat kartı — uzun isimli rozet taşmasın (ilk satır öne çıkan hatlar) */ .route-card{overflow:hidden} .route-badge{flex-shrink:1;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .route-card .tag{flex-shrink:0;margin-left:auto} /* ============================================================ Mobil çekmece — SamRota Yönetici (Flutter) mobil uygulamasının kendi gezinme menüsüyle AYNI görünüm: koyu lacivert gradyan zemin, üstte profil kartı (avatar + rol rozeti), akordiyon grup kartları, altta beyaz daire çıkış düğmesi + sürüm satırı. Yalnız hamburger çekmece açıkken ve yalnız mobil genişlikte devreye girer — masaüstü kenar çubuğuna hiç dokunmaz. "Cam tema" katmanından SONRA geldiği ve !important kullandığı için o katmanın masaüstü stilini ezer. ============================================================ */ @media (max-width: 880px) { body.sidebar-open .sidebar { background: linear-gradient(135deg, #0c1e26, #061019) !important; border-color: rgba(255, 255, 255, 0.08) !important; } body.sidebar-open .nav-section { color: rgba(255, 255, 255, 0.32) !important; } body.sidebar-open .nav-item { color: rgba(255, 255, 255, 0.7) !important; } body.sidebar-open .nav-item:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; } body.sidebar-open .nav-item svg { opacity: 0.75; } /* Profil kartı (üstte) */ body.sidebar-open .nav-profile-card { display: flex; align-items: center; gap: 12px; margin: 16px 14px 6px; padding: 14px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; color: inherit; } body.sidebar-open .nav-profile-card:hover { text-decoration: none; background: rgba(255, 255, 255, 0.07); } body.sidebar-open .nav-profile-avatar { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #0FA3B1, #16C6D9); box-shadow: 0 0 14px rgba(15, 163, 177, 0.45); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 19px; } body.sidebar-open .nav-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } body.sidebar-open .nav-profile-info strong { color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.sidebar-open .nav-profile-role { align-self: flex-start; background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px; } body.sidebar-open .nav-profile-chevron { color: rgba(255, 255, 255, 0.3); flex-shrink: 0; } /* Akordiyon gruplar: her biri yarı saydam yuvarlatılmış kart */ body.sidebar-open .nav-group { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; margin-bottom: 7px; overflow: hidden; } body.sidebar-open .nav-parent { color: rgba(255, 255, 255, 0.75) !important; font-weight: 700; } body.sidebar-open .nav-parent:hover { background: rgba(255, 255, 255, 0.06) !important; } body.sidebar-open .nav-child { color: rgba(255, 255, 255, 0.6) !important; } body.sidebar-open .nav-child:hover { background: rgba(255, 255, 255, 0.05) !important; } body.sidebar-open .nav-child.active { color: var(--accent) !important; } /* Alt bölüm: ortalanmış beyaz daire çıkış düğmesi + sürüm satırı */ body.sidebar-open .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; justify-content: center; padding: 16px 10px 10px; } body.sidebar-open .user-chip { display: none; } body.sidebar-open .logout-form { display: flex; justify-content: center; width: 100%; } body.sidebar-open .btn-ghost { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none !important; padding: 0; } body.sidebar-open .logout-icon-circle { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #04222A; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } body.sidebar-open .btn-ghost:hover .logout-icon-circle { filter: brightness(0.95); } body.sidebar-open .logout-label { display: block; color: #fff; font-size: 12px; font-weight: 600; } body.sidebar-open .nav-version { display: block; text-align: center; color: rgba(255, 255, 255, 0.28); font-size: 9.5px; font-weight: 600; padding: 10px 14px 14px; } }