/* ════════════════════════════════════════════════════════════════════════════ * 00-admin-vars.css — Admin Ürün Omurgası v2 CSS değişken seti * Kaynak: Diger/ADMIN_OMURGA_FAZLAR_v2.md Bölüm 3.3 (CSS palet onayı) * ROL_MIMARISI v2.4 ile uyumlu — admin tab'ları (Canlı/Operasyon/Kontrol/Cihazlar/ * Raporlar/Sistem/Kullanıcılar) bu palet kullanır. * * Tasarım felsefesi: Kurumsal SaaS dashboard (Notion/Linear/Vercel benzeri). * Açık gri zemin + beyaz kartlar + lacivert başlıklar + AZ kırmızı (sadece * gerçek müdahale anlarında — panik paneli hissi yaratma). * ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Renk paleti ─────────────────────────────────────────── */ --admin-bg: #F6F8FB; /* arka plan, çok açık gri */ --admin-card: #FFFFFF; /* kart yüzeyi */ --admin-primary: #1E3A5F; /* lacivert/koyu mavi — başlıklar, butonlar */ --admin-primary-light: #2C4F7E; /* lacivert hafif — hover, secondary */ --admin-success: #10B981; /* yeşil — sağlıklı (skor 80-100) */ --admin-warning: #F59E0B; /* amber/sarı-turuncu — takip (skor 60-79) */ --admin-risk: #DC2626; /* kırmızı — müdahale (skor <60), AZ kullan */ --admin-passive: #94A3B8; /* gri — pasif, IDLE, veri yok */ --admin-passive-dark: #64748B; /* gri koyu — servis dışı, ikincil metin */ --admin-border: #E2E8F0; /* açık gri kenarlık */ --admin-text: #1E293B; /* koyu metin */ --admin-text-muted: #64748B; /* ikincil metin */ /* ── Boşluk ölçeği ────────────────────────────────────────── */ --admin-gap-sm: 8px; /* iç padding */ --admin-gap-md: 16px; /* kart içi blok arası */ --admin-gap-lg: 24px; /* kartlar arası */ --admin-gap-xl: 40px; /* sekme/modül arası */ /* ── Tipografi ölçeği ─────────────────────────────────────── */ --admin-fs-xs: 11px; /* rozet, label, muted */ --admin-fs-sm: 13px; /* ikincil metin */ --admin-fs-md: 15px; /* ana metin */ --admin-fs-lg: 22px; /* kart başlık */ --admin-fs-xl: 36px; /* sayısal ana metrik (84/100) */ --admin-fs-xxl: 48px; /* dashboard büyük rakam */ /* ── Border radius ────────────────────────────────────────── */ --admin-radius-sm: 4px; /* rozet, küçük buton */ --admin-radius-md: 8px; /* kart, modal */ --admin-radius-lg: 12px; /* büyük kart, banner */ /* ── Gölge ────────────────────────────────────────────────── */ --admin-shadow-sm: 0 1px 3px rgba(0,0,0,0.04); --admin-shadow-md: 0 2px 6px rgba(0,0,0,0.06); --admin-shadow-lg: 0 4px 12px rgba(0,0,0,0.08); /* ── Sol şerit (kart border-left) ─────────────────────────── */ --admin-strip-width: 4px; } /* Koyu tema desteği — sonra eklenecek (ADMIN_OMURGA FAZ 6 polish) */ /* [data-tema="koyu"] { --admin-bg: #0F172A; ... } */ /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 1 — TEMA & GLOBAL SETUP ──────────────────────────────────────────────────────────────────────────── :root değişkenleri (renkler, gölgeler), [data-tema="koyu"], reset (*), html/body, body::before bg gradient, body::after top shimmer, scroll-behavior, touch-action, html.tema-degisim transition kapama. NOT: Aşama 1'de 4 ayrı :root tanımı (bu blok + line 1493 + 3561 + 4099) tek yere konsolide edilecek. Aşama 2 hedef: 01-base.css ══════════════════════════════════════════════════════════════════════════ */ /* -------------------- TEMA DEĞİŞKENLERİ — KONSOLİDE (Aşama 1, 3 May 2026) -------------------- 4 ayrı :root tanımı tek yere alındı, kategorize edildi. Eski konumlar: line 1604 (premium gölge+vivid), 3674 (geçiş), 4212 (type scale). ----------------------------------------------------------------------------------------- */ :root { /* ── ANA RENK PALETİ ── */ --bg:#f0f4f8; --surface:#fff; --surface2:#f7fafc; --surface3:#edf2f7; --border:#e2e8f0; --border2:#cbd5e0; --text:#1a202c; --muted:#718096; --dimmed:#a0aec0; --yesil:#38a169; --yesil-bg:#f0fff4; --yesil-b:#9ae6b4; --kirmizi:#e53e3e; --kirmizi-bg:#fff5f5; --kirmizi-b:#feb2b2; --sari:#d69e2e; --sari-bg:#fffff0; --sari-b:#faf089; --bakim:#9f7aea; --bakim-bg:#faf5ff; --bakim-b:#d6bcfa; --koptu:#718096; --koptu-bg:#f7fafc; --koptu-b:#e2e8f0; /* --red = BRAND/LOGO rengi (logo başlık, top shimmer, tab aktif, focus ring) --kirmizi = UI DURUM rengi (dolu/hata durumu, acil uyarı, koptu) İkisini karıştırmayın — UI durumu için daima --kirmizi kullanın. */ --red:#c0392b; --adm-accent:#00d4ff; --adm-accent2:#ff6b35; /* 14 May fix (P1.1): --adm-accent3 tanımsızdı (sadece kullanılıyordu), fallback'siz metrik kartlarında color özelliği etkisiz kalıyordu. Mor (#8b5cf6) — admin paneldeki "bugünkü döngü" / "toplam kWh" gibi nötr-vurgu metrikler için tanım. */ --adm-accent3:#8b5cf6; --shadow-sm:0 1px 4px rgba(0,0,0,.07); --shadow-md:0 4px 16px rgba(0,0,0,.1); --shadow-lg:0 12px 40px rgba(0,0,0,.14); /* ── PREMIUM GÖLGE KATMANLARI (line 1604'ten taşındı) ── */ --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08); --shadow-card-hover: 0 4px 8px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.12); --shadow-float: 0 8px 24px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.08); --shadow-inset: inset 0 1px 3px rgba(0,0,0,.08); /* ── VIVID DURUM RENKLERİ (line 1604'ten taşındı) ── */ --yesil-vivid: #10b981; --kirmizi-vivid:#ef4444; --sari-vivid: #f59e0b; --bakim-vivid: #8b5cf6; /* OMAR 10 May denetim — CSS #2: --mavi tanımı eklendi. 11-tasarimsal.css ve 13-son.css'te `var(--mavi, #3182ce)` ve `var(--mavi, #3b82f6)` iki farklı fallback ile kullanılıyordu (duyuru-banner, profil heat, vs). Tek kaynak burada — fallback'ler artık geçersiz değer dönmez, dark mode override da çalışır (aşağıdaki [data-tema="koyu"] bloğunda override edilebilir). */ --mavi: #3b82f6; /* ── HIZLANDIRILMIŞ GEÇİŞLER (line 3674 SPEED PATCH'ten taşındı) ── */ --transition: .1s cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.4, 0, .2, 1); --ease-spring:cubic-bezier(.34, 1.4, .64, 1); --ease-snap: cubic-bezier(.2, 0, 0, 1); /* ── TYPE SCALE + RADIUS/SPACING (line 4212'den taşındı) ── Major-third scale (1.25 oran) + 4px grid. */ --t-xs: 11px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 22px; --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; /* ── Z-INDEX HİYERARŞİSİ (OMAR 10 May denetim — CSS #6) ─────────────────── Önceden 30+ sayısal z-index değeri 8 dosyaya ve 7 JS dosyasına dağılmıştı. toast(9000) / sheet(9999) / onboarding(9999) çakışmaları + ariza-sheet dinamik inline 9999 race condition'ı vardı. Tek kaynak hiyerarşisi: 0 --z-bg body::before bg gradient (background katmanı) 1 --z-base wrap, kart relative pozisyon 10 --z-hover heatmap-cell hover 50 --z-sticky filtre-bar sticky 60 --z-header header sticky 100 --z-shimmer body::after üst dekorasyon 110 --z-filtre-active 11-tasarimsal override (sticky tip-segment) 150 --z-bar kbd-panel float 190 --z-banner pwa-banner, sira-kartim 200 --z-modal ana modal-overlay 300 --z-modal-nested cihaz-ata alt-modal 500 --z-modal-deep admin nested overlay 1100 --z-modal-deeper admin en derin overlay 8500 --z-floating-misc 13-son özel float 9000 --z-toast toast bildirim (modal üstünde) 9100 --z-tooltip tipografi tooltip 9700 --z-sheet-backdrop ariza-sheet backdrop (önceden 9998) 9750 --z-sheet ariza-sheet (önceden 9999, onboarding ile çakışıyordu) 9800 --z-onboarding onboarding overlay (önceden 9999) 9850 --z-onboarding-tip onboarding tooltip (önceden 10000) 9900 --z-confirm onayDiyalog (en üst, kullanıcı onayı) */ --z-bg: 0; --z-base: 1; --z-hover: 10; --z-sticky: 50; --z-header: 60; --z-shimmer: 100; --z-filtre-active: 110; --z-bar: 150; --z-banner: 190; --z-modal: 200; --z-modal-nested: 300; --z-modal-deep: 500; --z-modal-deeper: 1100; --z-floating-misc: 8500; --z-toast: 9000; --z-tooltip: 9100; --z-sheet-backdrop: 9700; --z-sheet: 9750; --z-onboarding: 9800; --z-onboarding-tip: 9850; --z-confirm: 9900; } [data-tema="koyu"] { --bg:#0d1117; --surface:#161b27; --surface2:#1e2538; --surface3:#263047; --red:#fc8181; --border:#252d42; --border2:#303b56; --text:#eaecf4; --muted:#8892b0; --dimmed:#5a6480; --yesil:#4ade80; --yesil-bg:#0a1f14; --yesil-b:#166534; --kirmizi:#f87171; --kirmizi-bg:#1f0a0a; --kirmizi-b:#7f1d1d; --sari:#f59e0b; --sari-bg:#1a1200; --sari-b:#92400e; --bakim:#c084fc; --bakim-bg:#180a2a; --bakim-b:#581c87; --koptu:#475569; --koptu-bg:#0f172a; --koptu-b:#1e293b; --adm-accent:#22d3ee; --adm-accent2:#fb923c; --adm-accent3:#a78bfa; /* 14 May (P1.1): dark mor — light #8b5cf6'dan biraz açık */ --shadow-sm:0 1px 4px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.5); --shadow-lg:0 12px 40px rgba(0,0,0,.6); /* ── PREMIUM GÖLGE OVERRIDE (line 1620'den taşındı) ── */ --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.4); --shadow-card-hover: 0 4px 8px rgba(0,0,0,.4), 0 16px 32px rgba(0,0,0,.5); } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh; overscroll-behavior-y:none; /* PWA: pull-to-refresh ve lastik efektini engelle */ } /* v188: Tema değişim anında tüm transition'ları durdur — görsel titreme önler */ html.tema-degisim *, html.tema-degisim *::before, html.tema-degisim *::after { transition: none !important; animation-duration: 0.001s !important; } /* Fix: 300ms ghost click gecikmesini kaldır — mobilde anlık tepki */ button,.admin-tab-btn,.sss-baslik,.mod-btn,.filtre-btn,.bos-id-chip,.tip-seg-btn, .abn-btn,.kapat-btn,.makine-kart{touch-action:manipulation;} /* v230 OMAR fix: PWA arkaplan titreme — body::before transform:scale(1→1.03) animasyonu * 20sn'de bir GPU repaint yapıyordu, mobil/PWA cihazlarda jank ve layout-shift hissi. * Çözüm: scale kaldır, sadece subtle opacity animasyonu kalsın (4 saniye yerine 30s, daha yumuşak). * prefers-reduced-motion respekte ediliyor. Layout-shift oluşturmaz (transform yerine opacity). */ body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:var(--z-bg);background:radial-gradient(ellipse at 15% 50%,#bee3f818 0%,transparent 55%),radial-gradient(ellipse at 85% 20%,#fed7d714 0%,transparent 55%),radial-gradient(ellipse at 55% 85%,#c6f6d514 0%,transparent 55%),radial-gradient(ellipse at 70% 55%,#e9d8fd10 0%,transparent 45%);animation:bgP 30s ease-in-out infinite alternate;will-change:opacity;} [data-tema="koyu"] body::before{background:radial-gradient(ellipse at 15% 50%,#4ade8008 0%,transparent 55%),radial-gradient(ellipse at 85% 20%,#f8717108 0%,transparent 55%),radial-gradient(ellipse at 55% 85%,#c084fc08 0%,transparent 55%);} @keyframes bgP{0%{opacity:.6}100%{opacity:.95}} @media (prefers-reduced-motion: reduce){body::before{animation:none;opacity:.7;}} body::after{content:'';position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#922b21,var(--red),#e74c3c,var(--red),#922b21);background-size:200% 100%;animation:shim 4s linear infinite;z-index:var(--z-shimmer);will-change:background-position;} @keyframes shim{0%{background-position:200% center}100%{background-position:-200% center}} @media (prefers-reduced-motion: reduce){body::after{animation:none;}} /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 2 — WRAP, HEADER, LOGO, HUB-CHIP, MOD-TOGGLE ──────────────────────────────────────────────────────────────────────────── .wrap, header (sticky + glassmorphism), .logo-block, .site-logo, .logo-text, .header-right, .hub-chip + .hub-dot (online/offline), @keyframes dotP, .mod-toggle (öğrenci/admin segment). Aşama 2 hedef: 01-base.css ══════════════════════════════════════════════════════════════════════════ */ .wrap{overflow-x:hidden;position:relative;z-index:var(--z-base);max-width:1440px;margin:0 auto;padding:0 20px 80px;} header{ padding:16px 0 18px; display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; margin-bottom:20px; position:sticky; top:0; z-index:var(--z-header); /* Glassmorphism */ background:color-mix(in srgb,var(--bg) 75%,transparent); backdrop-filter:blur(10px) saturate(180%); -webkit-backdrop-filter:blur(10px) saturate(180%); border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent); box-shadow:0 1px 0 color-mix(in srgb,var(--border) 40%,transparent), 0 4px 16px rgba(0,0,0,.04); } .logo-block{display:flex;align-items:center;gap:12px;} .site-logo{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));animation:bob 5s ease-in-out infinite;} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .logo-text h1{font-size:24px;font-weight:700;color:var(--red);line-height:1.1;margin-bottom:2px;} .logo-text .proje-isim{font-size:14px;font-weight:700;color:var(--text);} .logo-text .alt{font-size:10px;color:var(--dimmed);} .header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .hub-chip{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);} .hub-dot{width:8px;height:8px;border-radius:50%;background:var(--dimmed);transition:all .4s;} .hub-dot.aktif{background:var(--yesil);box-shadow:0 0 0 3px color-mix(in srgb,var(--yesil) 25%,transparent);animation:dotP 2s infinite;} .hub-dot.dis{background:var(--kirmizi);box-shadow:0 0 0 3px color-mix(in srgb,var(--kirmizi) 25%,transparent);} @keyframes dotP{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--yesil) 25%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--yesil) 10%,transparent)}} .mod-toggle{display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px;} .mod-btn{padding:5px 13px;border-radius:999px;border:none;background:transparent;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s;} .mod-btn.aktif{background:var(--text);color:var(--bg);} .mod-btn.demo{color:#a855f7;} .mod-btn.demo.aktif{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;} /* OMAR 10 May denetim — HTML #5: btn-logout inline style class'a taşındı. */ .btn-logout{background:var(--kirmizi);color:#fff;border:none;padding:6px 10px;font-size:12px;} .btn-logout:hover{background:color-mix(in srgb,var(--kirmizi) 88%,#000);} .ayarlar-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;} .ses-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;box-shadow:var(--shadow-sm);position:relative;} .ses-btn.sessiz::after{content:'';position:absolute;width:2px;height:24px;background:var(--kirmizi);border-radius:1px;transform:rotate(45deg);} .tema-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;box-shadow:var(--shadow-sm);} .tema-btn:hover{transform:rotate(20deg) scale(1.1);} .bos-banner{display:none;background:linear-gradient(135deg,var(--yesil-bg),color-mix(in srgb,var(--yesil-bg) 50%,var(--surface)));border:1.5px solid var(--yesil-b);border-radius:14px;padding:14px 20px;margin-bottom:16px;animation:slideDown .35s cubic-bezier(.34,1.56,.64,1);} .bos-banner.gorulur{display:flex;align-items:center;gap:12px;} .bos-banner-ikon{font-size:24px;animation:bounce 1.2s ease-in-out infinite;} @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .bos-banner-text{flex:1;} .bos-banner-text strong{font-size:14px;font-weight:700;color:var(--yesil);display:block;} .bos-banner-text small{font-size:11px;color:var(--muted);font-weight:700;} .bos-banner-ids{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;} .bos-id-chip{background:var(--yesil);color:#fff;font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;cursor:pointer;font-family:'Space Mono',monospace;} .bos-id-chip:hover{transform:scale(1.08);box-shadow:0 3px 10px color-mix(in srgb,var(--yesil) 40%,transparent);} @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} .ozet-strip{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .ozet-kart{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px;flex:1;min-width:0;box-shadow:var(--shadow-sm);position:relative;} .ozet-kart::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;} .oz-yogun::before{background:var(--bakim);} .oz-sakin::before{background:var(--yesil);} .ozet-kart .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:5px;} .ozet-kart .val{font-family:'Space Mono',monospace;font-size:22px;font-weight:700;color:var(--text);line-height:1;} .ozet-kart .sub{font-size:10px;color:var(--dimmed);margin-top:3px;font-weight:700;} @media(min-width:600px){.ozet-kart .val{font-size:26px;} .ozet-kart .lbl{font-size:10px;}} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;} /* 14 May Aşama 3: .stat-card 02-header tanımı 7 property'den 6'sı DEAD oldu — bg/border/radius/padding/shadow/position → 10-yonetim:241+11-tasarimsal:1003+1159 eziyor. Sadece cursor:pointer survive eder. ::before 10-yonetim:248 display:none eziyor → DEAD. */ .stat-card{cursor:pointer;} /* .s-bos/.s-dolu/.s-bitti/.s-sorun ::before üst şerit renkleri DEAD — .stat-card::before 10-yonetim:248 display:none ile gizleniyor. Renkler görünmez, .stat-card.s-* arka planları 11-tasarimsal:1160-1163 üzerinden. */ .stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:5px;} .stat-val{font-family:'Space Mono',monospace;font-size:32px;font-weight:700;line-height:1;} .sv-yesil{color:var(--yesil);}.sv-kirmizi{color:var(--kirmizi);}.sv-sari{color:var(--sari);}.sv-gri{color:var(--koptu);}/* v200 (29 Nis): kırmızı→koptu fix — class adı "gri" idi ama renk kırmızıydı (copy-paste). Bakım/Koptu stat-card sayısı artık doğru gri tonda. */ .bos-bildirim-btn{background:var(--yesil);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;margin:8px 0 0;width:100%;text-align:center;box-shadow:var(--shadow-sm);} .bos-bildirim-btn:hover{background:color-mix(in srgb,var(--yesil) 80%,black);transform:translateY(-1px);} .features-section{margin:14px 0 14px;} .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} @media (max-width: 600px){.features-grid{grid-template-columns:1fr;}} /* v169: Feature kartları tam genişlik — 3'lü grid */ .feature-card{min-width:0;word-break:break-word;} .feature-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 12px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;cursor:pointer;} .feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .feature-icon{font-size:28px;margin-bottom:8px;} .feature-title{font-size:14px;font-weight:700;margin-bottom:6px;} .feature-desc{font-size:11px;color:var(--muted);line-height:1.4;} .feature-desc strong{color:var(--text);} .toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;} /* Filtre sticky */ .filtre-bar-wrap{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);padding:8px 0 10px;margin:-4px 0 8px;} .filtre-bar{display:flex;gap:6px;flex-wrap:wrap;} .filtre-btn{padding:5px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;box-shadow:var(--shadow-sm);} /* 14 May Aşama 3 #2: 5 property 10-yonetim:400 ile aynı/overridden — sadece border-color (left/top/right için) live; border-bottom 10-yonetim:405'te var(--red) accent ile override. background/color/transform/shadow 10-yonetim eziyor. */ .filtre-btn.aktif{border-color:var(--text);} .filtre-btn .dot{width:6px;height:6px;border-radius:50%;} .f-count{opacity:.6;font-size:10px;margin-left:2px;} .main-layout{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;} @media (max-width: 900px){.main-layout{grid-template-columns:1fr;}} /* Öğrenci modunda olay panel gizlenir — grid tek sütuna düşmeli */ body:not(.admin-mod) .main-layout{grid-template-columns:1fr;} /* v198: Admin modunda Olay Akışı tam genişlikte — Yönetim Merkezi ile aynı boyda. Eski 300px sticky-aside yapısı admin'de daraltılmış görünüyordu; OMAR talebi üzerine admin modu için tek sütun + olay panel admin-panel altına akar. position:static sticky'yi kapatır, böylece scroll sırasında abnormal davranış olmaz. */ body.admin-mod .main-layout{grid-template-columns:1fr;} body.admin-mod .olay-panel{position:static;max-height:none;} /* (admin@<900 1fr satırı silindi — yukarıdaki @media zaten kapsıyor) */ /* Admin modunda makine grid öğrenci ile aynı davransın */ @media (max-width: 480px){body.admin-mod .makine-grid{grid-template-columns:repeat(2,1fr);gap:8px;}} @media(min-width:481px) and (max-width:768px){body.admin-mod .makine-grid{grid-template-columns:repeat(3,1fr);gap:9px;}} /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 3 — MAKİNE GRID, FİLTRE BAR, FEATURE KARTLARI, OLAY PANEL ──────────────────────────────────────────────────────────────────────────── .makine-grid (responsive 1fr/2fr breakpoint'leri), .filtre-bar-wrap (sticky + glassmorphism), .features-grid 3-lü grid (v169), .olay-panel (admin sağ kolon), öğrenci/admin grid override'ları. Aşama 2 hedef: 02-kartlar.css (grid) + 04-admin.css (olay-panel) ══════════════════════════════════════════════════════════════════════════ */ .makine-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 18vw, 220px), 1fr)); gap: clamp(8px, 1.2vw, 14px); } /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 4 — MAKİNE KART BAZ & DURUM SINIFLARI ──────────────────────────────────────────────────────────────────────────── .makine-kart base (sol border + premium hover), durum sınıfları .mk-bos / .mk-dolu / .mk-bitti / .mk-bakim / .mk-koptu (üst şerit + arka plan + glow varyantları). NOT: Bu sınıflar aşağıdaki bölümlerde tekrar override ediliyor — Aşama 1'de konsolidasyon hedefi (mk-bitti 16 tekrar, makine-kart 15 tekrar). Aşama 2 hedef: 02-kartlar.css ══════════════════════════════════════════════════════════════════════════ */ /* Kart — temiz yüzey, sol border renkli v249: çerçeve kontrastı arttırıldı (OMAR talep) — parlak ekranda makine kartları arkaplandan ayırt edilmiyordu. var(--border) #e2e8f0 (açık gri) yerine var(--border2) #cbd5e0 (orta gri) + 1.5px → 2px. Hem light hem dark tema için --border2 daha kontrastlı tanımlı. */ .makine-kart{background:var(--surface);border:2px solid var(--border2);border-radius:16px;padding:13px;cursor:pointer;position:relative;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,padding .25s ease,min-height .25s ease,border-radius .25s ease;display:flex;flex-direction:column;gap:4px;min-height:160px;} .makine-kart:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);} /* .makine-kart::before sol şerit premium güncellemede üst şerite dönüştürüldü */ .mk-bos::before{background:var(--yesil);}.mk-dolu::before{background:var(--kirmizi);}.mk-bitti::before{background:var(--sari);}.mk-bakim::before{background:var(--bakim);}.mk-koptu::before{background:var(--koptu);} /* Sol kalın border — durum hiyerarşisi */ .mk-bos { border-left: 4px solid var(--yesil); } .mk-dolu { border-left: 4px solid var(--kirmizi); } .mk-bitti{ border-left: 4px solid var(--sari); } .mk-bakim{ border-left: 4px solid var(--bakim); } .mk-koptu{ border-left: 4px solid var(--koptu); } /* @keyframes borderPulse + .mk-dolu animation/box-shadow 14 May Aşama 3 ile silindi. - animation:borderPulse 10-yonetim:599 activeGlow ile eziliyordu → DEAD keyframe - box-shadow 10-yonetim:598 + 11-tasarimsal:924-928 inset glass ile eziliyordu → DEAD - .mk-bitti border-color (eski yeşil ton) 11-tasarimsal:849 sarı ile eziliyordu */ .mk-bakim{opacity:.85;} .mk-koptu{opacity:.7;} /* @keyframes glowD 14 May Aşama 3 #4 ile silindi — hiçbir yerde referans yoktu (dead) */ /* .kart-ust 14 May Aşama 3 #15 ile silindi — kart-render.js v179 tasarımında .mk-sol-panel + .mk-sag-panel kullanılıyor, .kart-ust hiçbir DOM render etmiyordu (sadece 11-tasarimsal kompakt + 09-v18 kompakt CSS kuralları DEAD). */ .kart-admin-alt{font-size:10px;color:var(--dimmed);text-align:right;padding-top:5px;border-top:1px solid rgba(0,0,0,.06);margin-top:4px;display:flex;justify-content:space-between;align-items:center;} @keyframes spin{to{transform:rotate(360deg)}} #modal-reset-admin:hover{background:color-mix(in srgb,var(--kirmizi,#e53e3e) 8%,transparent);} #modal-reset-admin:active{transform:scale(.98);} #modal-reset-admin:disabled{opacity:.5;cursor:default;}/* @keyframes — kalan-sure animasyonları */ @keyframes urgentTick { from { opacity: .7; transform: scale(.98); } to { opacity: 1; transform: scale(1.01); } } /* Olay paneli — her zaman sağ tarafta */ .olay-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;position:sticky;top:12px;display:flex;flex-direction:column;height:fit-content;} .olay-baslik{padding:14px 16px;border-bottom:1px solid var(--border);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;} .olay-baslik-ikon{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--adm-accent),var(--adm-accent2));display:flex;align-items:center;justify-content:center;font-size:10px;} .olay-baslik-left{display:flex;align-items:center;gap:8px;} /* 2.74bg Olay Akışı tip filtresi — chip'ler çoklu seçim, "Tümü" = seçim temizle */ .olay-filtre{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;border-bottom:1px solid var(--border);flex-shrink:0;} .olay-filtre-chip{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:999px;padding:3px 10px;font-size:11.5px;line-height:1.4;cursor:pointer;transition:background .15s,color .15s,border-color .15s;} .olay-filtre-chip:hover{border-color:var(--mavi);color:var(--text);} .olay-filtre-chip.aktif{background:var(--mavi);border-color:var(--mavi);color:#fff;} .olay-liste{overflow-y:auto;max-height:calc(100vh - 200px);} .olay-item{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;gap:10px;transition:background .12s;} .olay-item:hover{background:var(--surface2);} .olay-ikon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;} .oi-basladi{background:#c6f6d5;}.oi-bitti{background:#fefcbf;}.oi-bostan{background:#fffbeb;color:#b45309;}.oi-koptu{background:#fed7d7;}.oi-bakim{background:#e9d8fd;}.oi-yarida{background:#e2e8f0;} /* v189: Hub timeout (sistemik) — sarı pastel, sensor kopmasından (kırmızı) farklı */ .oi-hub-timeout{background:#fef3c7;color:#92400e;} /* v189: Şikayet yapıldı (öğrenci bildirimi) — kırmızı pastel + dik border */ .oi-sikayet{background:#fed7d7;color:#9b2c2c;border-left:3px solid var(--kirmizi);} [data-tema="koyu"] .oi-basladi{background:#166534;} [data-tema="koyu"] .oi-bitti{background:#78350f;color:#fde68a;}/* v200 (29 Nis): dark mode prefix eksikti — light bg #fefcbf koyu modda da çıkıyordu. Koyu sarı-amber tonu. */ [data-tema="koyu"] .oi-bostan{background:#451a03;color:#fbbf24;} [data-tema="koyu"] .oi-koptu{background:#7f1d1d;} [data-tema="koyu"] .oi-hub-timeout{background:#451a03;color:#fbbf24;} [data-tema="koyu"] .oi-sikayet{background:#7f1d1d;color:#fca5a5;} [data-tema="koyu"] .oi-bakim{background:#581c87;} .olay-mesaj{font-size:11px;font-weight:700;line-height:1.4;color:var(--text);} .olay-zaman{font-size:10px;color:var(--dimmed);margin-top:2px;font-family:'Space Mono',monospace;} .olay-bos{padding:24px;text-align:center;color:var(--dimmed);font-size:12px;font-weight:700;} .yukleniyor{text-align:center;padding:60px 0;color:var(--muted);} .spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:#3182ce;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px;} .modal-overlay{ position:fixed;inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(8px) saturate(160%); -webkit-backdrop-filter:blur(8px) saturate(160%); z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px; opacity:0;pointer-events:none;transition:opacity .25s; } .modal-overlay.acik{opacity:1;pointer-events:all;} /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 5 — MODAL, TOAST, OVERLAY ──────────────────────────────────────────────────────────────────────────── .modal (FAZ 1'de 3 katman → 1 base + bottom-sheet), .modal-overlay, .modal-icerik, m-btn (v169 modal buton sınıfları), .toast + .toast-wrap (toast-wrap line 1800'de duplicate — Aşama 1'de tek yere alınacak). Aşama 2 hedef: 03-modal.css ══════════════════════════════════════════════════════════════════════════ */ /* .modal — Konsolide (refactor 20 Nis 2026): 3 katman → 1 base. Mobil bottom-sheet override @media (max-width:640px) bloğunda (~2477). Mobil scroll fix v153 (~4232) ayrı concern. */ .modal{ /* 10 Haz OMAR: açılır menü (DURUMU DEĞİŞTİR modalı) şeffaflığı çok yüksekti — arkadaki makine kartları içeriden sızıyordu. %88→%96 (saydamlık %12→%4); blur(14px) korunur (11-tasarimsal:483 ezer) → premium cam hissi durur ama okunabilir/koyu. Mobil zaten opak (11-tasarimsal:246 var(--surface) !important), print white. */ background:color-mix(in srgb,var(--surface) 96%,transparent); backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%); border:1px solid color-mix(in srgb,var(--border) 70%,transparent); border-top:1px solid color-mix(in srgb,#fff 18%,transparent); border-radius:24px; padding:24px; width:100%;max-width:480px;max-height:88vh;overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transform:translateY(20px) scale(.96); transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s; box-shadow:0 24px 64px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.12); } .modal-overlay.acik .modal{transform:translateY(0) scale(1);} .modal-baslik{display:flex;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);} .modal-baslik h3{font-size:15px;font-weight:700;} .kapat-btn{background:var(--surface2);border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;} .modal-satir{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;} .modal-satir .lbl{color:var(--muted);font-weight:700;font-size:11px;} .modal-satir .val{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;} .modal-chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 12px;font-size:11px;font-weight:700;} .dongu-item{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin-bottom:5px;display:flex;justify-content:space-between;} /* v200 (29 Nis): hardcoded renkler → CSS değişken (dark mode otomatik uyumlu) */ .dongu-tamamlandi{background:var(--yesil-bg);color:var(--yesil);}.dongu-yarida{background:var(--kirmizi-bg);color:var(--kirmizi);} .global-offline{ max-height:0;overflow:hidden;background:var(--kirmizi);color:#fff;text-align:center; font-weight:700;font-size:13px;border-radius:10px;margin-bottom:0;letter-spacing:.01em; transition:max-height .35s ease,padding .35s ease,margin-bottom .35s ease; } .global-offline.gorulur{max-height:60px;padding:10px;margin-bottom:14px;} .kbd-panel{position:fixed;bottom:20px;right:20px;z-index:var(--z-bar);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-lg);font-size:11px;min-width:200px;transform:translateY(120%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);} .kbd-panel.gorulur{transform:translateY(0);} .kbd-panel h4{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:10px;letter-spacing:.08em;} .kbd-satir{display:flex;justify-content:space-between;align-items:center;padding:6px 0;gap:16px;font-size:13px;color:var(--text);} .kbd-hint{background:var(--surface3);border:1px solid var(--border2);border-radius:5px;padding:2px 7px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--muted);opacity:0.7;} /* Aşama 1 (3 May): line ~1907'deki override (sağ alt + flex-end) buraya birleştirildi. */ .toast-wrap{position:fixed;bottom:24px;right:20px;z-index:var(--z-toast);display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;} /* OMAR 10 May denetim — HTML #5: yaygın modal form pattern'leri class'a taşındı. Eski 6 inline style (oneri-modal label/select/textarea, csv-tarih-modal input, oneri-gonder-btn, hakkinda-oneri-btn) tekrarlanıyordu; tek kaynak: */ .modal-label{font-size:12px;font-weight:700;color:var(--muted);display:block;margin-bottom:6px;} .modal-input{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;box-sizing:border-box;} .modal-input.modal-input--textarea{resize:vertical;} .modal-primary-btn{width:100%;padding:12px;background:var(--yesil);color:#fff;border:none;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;} .modal-primary-btn:hover{background:color-mix(in srgb,var(--yesil) 88%,#000);} .modal-primary-btn--mavi{background:var(--mavi);font-weight:700;margin-bottom:8px;} .modal-primary-btn--mavi:hover{background:color-mix(in srgb,var(--mavi) 88%,#000);} .modal-label-meta{color:var(--muted);font-weight:400;} .modal-counter{font-size:11px;color:var(--muted);text-align:right;margin-top:4px;} .modal-help-text{font-size:11px;color:var(--muted);text-align:center;line-height:1.4;} .csv-tarih-form{padding:10px 0;} .csv-tarih-input{margin-bottom:10px;padding:8px;border-radius:8px;} .csv-export-btn{width:100%;padding:8px;background:var(--text);color:var(--bg);border:none;border-radius:8px;font-weight:bold;cursor:pointer;} .csv-export-btn:hover{background:color-mix(in srgb,var(--text) 88%,#fff);} .toast{background:var(--text);color:var(--bg);padding:10px 20px;border-radius:999px;font-size:13px;font-weight:700;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) both;box-shadow:var(--shadow-lg);white-space:nowrap;} @keyframes toastIn{from{opacity:0;transform:scale(.85) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes toastOut{to{opacity:0;transform:scale(.85) translateY(-10px)}} body:not(.admin-mod) .admin-only{display:none;} /* v188: ozet-strip artık öğrencide de görünür (En Yoğun Saat öğrenci için yararlı) */ /* v210 (3 May): Yönetici modunda öğrenciye yönelik SSS bölümü gereksiz — gizle. */ body.admin-mod #sss-section{display:none;} /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 6 — ADMIN PANEL (TOPBAR, TABS, GRID, ÇEKMECE) ──────────────────────────────────────────────────────────────────────────── .admin-topbar (filter + arama + ayarlar), .admin-tabs + .admin-tab-btn (canlı/operasyon/cihazlar/teknik 4 sekme), .admin-grid, .sag-cekmece (slide-in detay paneli), op-tab-* alt sekmeler, .modal hızlı durum değiştirme butonları, ısı haritası tooltip. Aşama 2 hedef: 04-admin.css ══════════════════════════════════════════════════════════════════════════ */ /* -------------------- ADMIN PANEL -------------------- */ .admin-panel{margin-top:28px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-md);overflow:hidden;} .admin-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; position: relative; /* ::before gradient bar için gerekli */ padding: 20px 24px 0; } .admin-topbar-left { flex: 1; } .admin-topbar-right { margin-left: auto; } .admin-topbar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--adm-accent),var(--adm-accent2));border-radius:24px 24px 0 0;} .admin-topbar h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px;} .admin-topbar h3::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--yesil);box-shadow:0 0 0 3px color-mix(in srgb,var(--yesil) 25%,transparent);animation:dotP 2s infinite;} .admin-sub{font-size:11px;color:var(--muted);font-weight:700;padding-left:20px;} /* 8 Haz 2026 — Admin menü: ikon-öne çıkan dikey kart-tab (ikon üst + etiket alt). Eski kompakt UPPERCASE tek-satır pill yerine ferah, görsel, sarmalı grid. */ .admin-tabs{display:flex;flex-wrap:wrap;gap:8px;background:transparent;border:none;padding:0;width:100%;margin-top:14px;overflow:visible;} .admin-tab-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1 1 88px;min-width:80px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);border-radius:14px;padding:12px 8px;font-size:11px;font-weight:600;cursor:pointer;text-transform:none;white-space:nowrap;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .15s;} .admin-tab-btn .tab-ik{font-size:21px;line-height:1;filter:saturate(1.05);} .admin-tab-btn .tab-et{font-size:11px;letter-spacing:.01em;} .admin-tab-btn:not(.aktif):hover{background:var(--surface3);color:var(--text);transform:translateY(-2px);border-color:color-mix(in srgb,var(--adm-accent) 40%,var(--border));box-shadow:0 4px 12px color-mix(in srgb,var(--text) 8%,transparent);} .admin-tab-btn.aktif{background:linear-gradient(135deg,var(--adm-accent),var(--adm-accent2));color:#fff;border-color:transparent;box-shadow:0 6px 16px color-mix(in srgb,var(--adm-accent) 35%,transparent);transform:translateY(-1px);} .admin-tab-btn.aktif .tab-ik{filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));} @media (max-width:600px){ .admin-tabs{gap:6px;} .admin-tab-btn{flex:1 1 calc(25% - 5px);min-width:0;padding:10px 4px;border-radius:12px;} .admin-tab-btn .tab-ik{font-size:19px;} .admin-tab-btn .tab-et{font-size:10px;} } .admin-content{padding:24px;position:relative;} .admin-pane{ display:block; opacity:0; transform:translateY(8px); transition:opacity .22s ease,transform .22s ease; pointer-events:none; position:absolute; width:calc(100% - 48px); top:24px; } .admin-pane.aktif{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; width:100%; top:auto; } .admin-card{background:var(--surface2);border:1px solid var(--border);border-radius:18px;padding:18px 16px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;} .admin-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,var(--adm-accent),var(--adm-accent2));} .admin-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);} .admin-card .k{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px;} .admin-card .v{font-family:'Space Mono',monospace;font-size:28px;font-weight:700;color:var(--text);line-height:1;} .admin-card .s{font-size:10px;color:var(--dimmed);margin-top:6px;} .admin-section-heading{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:20px 0 12px;} .admin-section-heading::before,.admin-section-heading::after{content:'';flex:1;height:1px;background:var(--border);} .admin-split{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:16px;} .admin-list{display:flex;flex-direction:column;gap:8px;} .admin-list-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);} .admin-note{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--adm-accent2);border-radius:12px;padding:14px 16px;font-size:11px;color:var(--muted);} .admin-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--surface2);} .admin-table{width:100%;border-collapse:collapse;font-size:12px;} .admin-table thead tr th{padding:13px 14px;border-bottom:1px solid var(--border);text-align:left;font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--surface3);} .admin-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;} .mini-btn{border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:10px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--text);transition:all .15s;} .mini-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);background:var(--surface3);border-color:var(--border2);} .mini-btn.warn{background:var(--sari-bg);color:var(--sari);border-color:var(--sari-b);} .mini-btn.warn:hover{background:var(--sari);color:#fff;border-color:var(--sari);transform:translateY(-1px);} .mini-btn.danger{background:var(--kirmizi-bg);color:var(--kirmizi);border-color:var(--kirmizi-b);} .mini-btn.danger:hover{background:var(--kirmizi);color:#fff;border-color:var(--kirmizi);transform:translateY(-1px);} .mini-btn.ok{background:var(--yesil-bg);color:var(--yesil);border-color:var(--yesil-b);} .mini-btn.ok:hover{background:var(--yesil);color:#fff;border-color:var(--yesil);transform:translateY(-1px);} .mini-btn[style*="kirmizi"]:hover{background:var(--kirmizi)!important;color:#fff!important;transform:translateY(-1px);} .mini-btn[style*="bakim"]:hover{background:var(--bakim)!important;color:#fff!important;transform:translateY(-1px);} .teknik-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;} .teknik-card{background:var(--surface2);border:1px solid var(--border);border-radius:18px;padding:20px;} .teknik-card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px;} .teknik-yorum{background:var(--surface);border:1px solid var(--border);border-left:3px solid #7c3aed;border-radius:10px;padding:12px 14px;font-size:11px;color:var(--muted);} .ayarlar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px;} .ayarlar-kart{background:var(--surface2);border:1px solid var(--border);border-radius:18px;padding:20px 18px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;} .ayarlar-kart::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#f59e0b,#d97706);border-radius:18px 18px 0 0;} .ayarlar-kart:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);} .ayarlar-kart .k{font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px;} .ayarlar-kart .v{font-family:'Space Mono',monospace;font-size:30px;font-weight:700;color:#f59e0b;line-height:1;} /* Isı haritası tooltip */ .heatmap-cell{position:relative;} .heatmap-cell[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.85);background:var(--text);color:var(--bg);font-size:10px;font-weight:700;padding:4px 8px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:var(--z-hover);font-family:'Nunito',sans-serif;} .heatmap-cell[data-tip]::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%) scale(.85);border:4px solid transparent;border-top-color:var(--text);pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:var(--z-hover);} .heatmap-cell:hover[data-tip]::after,.heatmap-cell:hover[data-tip]::before{opacity:1;transform:translateX(-50%) scale(1);} /* Modal hızlı durum değiştirme */ .hizli-durum-panel{margin-top:14px;padding:12px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;} .hizli-durum-baslik{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px;} .hizli-durum-list{display:flex;gap:8px;flex-wrap:wrap;} .hizli-durum-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;} .hizli-durum-btn:hover:not(.aktif-durum){transform:scale(1.05);box-shadow:var(--shadow-sm);} .hizli-durum-btn.aktif-durum{outline:2.5px solid var(--text);outline-offset:2px;cursor:default;} @media (max-width: 900px){.admin-split{grid-template-columns:1fr;}.teknik-grid{grid-template-columns:1fr;}.admin-content{padding:16px;}} .admin-olay-mini{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;position:sticky;top:12px;} .admin-olay-mini-baslik{padding:11px 14px;border-bottom:1px solid var(--border);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;background:var(--surface2);} .admin-olay-mini-liste{max-height:520px;overflow-y:auto;} .admin-olay-mini-liste .olay-item{padding:8px 12px;} .admin-olay-mini-liste .olay-ikon{width:22px;height:22px;font-size:10px;border-radius:6px;} /* 8 Haz 2026 — Sistem tab Firmware Durumu tablosu mobil sığma fix. 7-kolon tablo (Cihaz|MAC|Sürüm|Build|Durum|Son rapor|İşlem) dar ekranda taşıyordu. */ .fw-tablo-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} @media (max-width:600px){ /* İkincil kolonları gizle → kalan Cihaz|Sürüm|Durum|İşlem (esas + OTA butonu). */ .fw-cihaz-tablo th:nth-child(2),.fw-cihaz-tablo td:nth-child(2), /* MAC */ .fw-cihaz-tablo th:nth-child(4),.fw-cihaz-tablo td:nth-child(4), /* Build */ .fw-cihaz-tablo th:nth-child(6),.fw-cihaz-tablo td:nth-child(6){ /* Son rapor + 🗑 */ display:none; } .fw-cihaz-tablo th,.fw-cihaz-tablo td{padding:3px 5px!important;} .fw-cihaz-tablo{font-size:11px;} } /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 7 — UTILITY: DEMO BANNER, ISI HARİTASI, RAPORLAR DROPDOWN ──────────────────────────────────────────────────────────────────────────── .demo-banner, ısı haritası (heatmap-cell + legend), yapılandırma input alanları, .raporlar-dropdown + menu, .filtre-gizli utility, EKSİK SINIFLAR DÜZELTME bloğu (FAZ 1.5'da temizlenmesi gereken son artıklar). Aşama 2 hedef: 04-admin.css (ısı haritası) + 01-base.css (utility) ══════════════════════════════════════════════════════════════════════════ */ /* -------------------- ACCESSIBILITY HELPERS -------------------- */ /* 15 May v2.73t — CSS audit A4: WCAG screen reader helper. Ekran okuyucuya görünür ama gözle görülmez. aria-label yetersiz olduğunda (örn. icon-only button extra context) … ile metin sağla. */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;} /* -------------------- DEMO BANNER (TANIMI 08-feature.css:88'de) -------------------- 14 May fix (P1.5): 07-utility'deki .demo-banner duplicate tanımı SİLİNDİ — 08-feature.css cascade'de kazanıyordu (gerçek görünüm: mor düz arkaplan). .gorulur class ölüydü (JS hiç set etmiyor); tek state API: [hidden] attribute. .demo-cik-btn 08-feature.css:94'te tanımlı. */ /* 2.70 fix: Eski selector `body .admin-panel` mor/purple border'ı HER admin paneline * uyguluyordu (demo modu olmasa bile). Demo banner CSS bloğunda durması niyetin * sadece demo modu olduğunu gösteriyor. body.demo-mod ile sınırlandırıldı. */ body.demo-mod .admin-panel {border-color:rgba(124,58,237,.35);box-shadow:0 0 0 1px rgba(124,58,237,.1),var(--shadow-md);} /* -------------------- ISI HARİTASI -------------------- */ .heatmap-wrap{overflow-x:auto;overflow-y:visible;padding-bottom:8px;} .heatmap-container{min-width:600px;overflow:visible;} .heatmap-header-row{display:grid;grid-template-columns:54px repeat(24,1fr);gap:3px;margin-bottom:4px;} .heatmap-hour-label{font-size:8px;font-family:'Space Mono',monospace;color:var(--dimmed);text-align:center;} .heatmap-row{display:grid;grid-template-columns:54px repeat(24,1fr);gap:3px;margin-bottom:3px;} .heatmap-day-label{font-size:10px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;} .heatmap-cell{aspect-ratio:1;border-radius:4px;cursor:pointer;transition:transform .12s;min-height:24px;min-width:24px;} .heatmap-cell:hover{transform:scale(1.3);z-index:var(--z-hover);box-shadow:0 2px 8px rgba(0,0,0,.3);} /* v236 — Haftalık yoğunluk heatmap (yogunluk.js renderYogunlukHeatmap): * Mobilde 18px sabit (eskisi gibi, fit-to-screen), PC ≥768 24px, geniş PC ≥1200 28px. * table width:100% ile parent karta yayılır + max-width:900px (anormal geniş ekranda taşma yok). * Hücreler hâlâ kare (width=height), ama PC'de görünürlük artırılmış. */ /* v237 — table tam parent kart genişliğine yayılır (max-width sınırı kaldırıldı). * Hücre sabit genişlik yerine 1fr-benzeri (auto) — table-layout:fixed parent'a göre dağılır. */ .haftalik-heatmap-table{width:100%;table-layout:fixed;} .haftalik-heatmap-cell{height:18px;border-radius:2px;} /* .haftalik-heatmap-head — yogunluk.js header satırı, şimdilik table-default stil yeterli (placeholder, ileride özel stil burada) */ @media (min-width: 768px) { .haftalik-heatmap-cell{height:24px;} } @media (min-width: 1200px) { .haftalik-heatmap-cell{height:28px;border-radius:3px;} } .hc-0{background:var(--surface3);}.hc-1{background:color-mix(in srgb,#0e7490 20%,var(--surface3));} .hc-2{background:color-mix(in srgb,#0e7490 40%,var(--surface3));}.hc-3{background:color-mix(in srgb,#0891b2 65%,transparent);} .hc-4{background:#0891b2;}.hc-5{background:#0284c7;}.hc-6{background:#0369a1;} .hc-7{background:color-mix(in srgb,#0369a1 80%,#7c3aed);}.hc-hi{background:linear-gradient(135deg,#0369a1,#7c3aed);box-shadow:0 0 8px rgba(124,58,237,.4);} .dongu-chart-wrap{margin-top:20px;background:var(--surface2);border:1px solid var(--border);border-radius:18px;padding:20px;} .dongu-chart-canvas-wrap{height:160px;} @media (max-width: 640px){.logo-text h1{font-size:13px;}header{flex-direction:column;align-items:flex-start;}.toolbar{flex-direction:column;align-items:stretch;}} /* Yapılandırma input alanları stili */ .admin-config-input { width: 100%; padding: 6px 10px; font-family: 'Space Mono', monospace; font-size: 18px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-align: center; } .admin-config-input:focus { outline: none; border-color: var(--adm-accent); } .teknik-modal-genis{max-width:1220px;width:min(1220px,96vw);} .teknik-modal-toolbar{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr)) auto;gap:12px;align-items:end;margin-bottom:16px;} .teknik-field{display:flex;flex-direction:column;gap:6px;} .teknik-field label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;} .teknik-field input,.teknik-field select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;} .teknik-modal-actions{display:flex;gap:8px;align-items:end;justify-content:flex-end;} .teknik-action-btn{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);} .teknik-action-btn.primary{background:#7c3aed;color:#fff;border-color:#7c3aed;} .teknik-summary-grid{display:grid;grid-template-columns:repeat(6,minmax(110px,1fr));gap:10px;margin-bottom:16px;} .teknik-summary-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-sm);} .teknik-summary-card .k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:6px;} .teknik-summary-card .v{font-family:'Space Mono',monospace;font-size:22px;font-weight:700;color:var(--text);} .teknik-chart-grid,.teknik-result-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;} .teknik-chart-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm);} .teknik-chart-wrap{height:260px;position:relative;} .teknik-table-wrap{border:1px solid var(--border);border-radius:16px;overflow:auto;background:var(--surface);box-shadow:var(--shadow-sm);} .teknik-table td,.teknik-table th{white-space:nowrap;} .tech-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--border);} /* 16 May 2.74h: variant selektörü .tech-badge.X (iki class) → .tech-badge-X (tek tireli) düzeltildi — JS (admin-teknik.js) safeCls ile tech-badge-{classification} yazıyor; eski iki-class formu hiç eşleşmiyordu (renkler 4+ aydır görünmüyordu). Sınıflar utils.js _CLS_WHITELIST ile hizalandı: ölü yarida_kaldi/kopma çıktı; uzamis_dongu/suspicious_long (sarı) + timeout/zombie_or_merged (kırmızı) eklendi. belirsiz → kasıtlı renksiz (base stil). */ .tech-badge-normal{background:var(--yesil-bg);color:var(--yesil);border-color:var(--yesil-b);} .tech-badge-erken_bitti,.tech-badge-sahte_calisma,.tech-badge-uzamis_dongu,.tech-badge-suspicious_long{background:var(--sari-bg);color:var(--sari);border-color:var(--sari-b);} .tech-badge-idle_on,.tech-badge-timeout,.tech-badge-zombie_or_merged{background:var(--kirmizi-bg);color:var(--kirmizi);border-color:var(--kirmizi-b);} @media (max-width: 980px){.teknik-modal-toolbar{grid-template-columns:1fr 1fr;}.teknik-modal-actions{grid-column:1/-1;justify-content:stretch;}.teknik-modal-actions .teknik-action-btn{flex:1;}.teknik-summary-grid{grid-template-columns:repeat(3,1fr);}.teknik-chart-grid,.teknik-result-layout{grid-template-columns:1fr;}}@media (max-width: 640px){.teknik-summary-grid{grid-template-columns:repeat(2,1fr);}} /* -------------------- EKSİK SINIFLAR (DÜZELTME) -------------------- */ .admin-empty{padding:16px;text-align:center;color:var(--dimmed);font-size:12px;font-weight:700;} .dongu-baslik{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:12px 0 8px;} .dongu-bilgi{font-size:10px;color:var(--dimmed);margin-top:3px;font-family:'Space Mono',monospace;} .dongu-sure{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;} .heatmap-section{margin-bottom:16px;} .heatmap-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;} .dongu-chart-baslik{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;font-weight:700;color:var(--muted);} .badge{background:var(--surface3);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--muted);} /* Aşama 1.E (3 May): RAPORLAR DROPDOWN bloğu silindi — v210'da Yönetim Merkezi Raporlar sekmesine 3 büyük kart layout'a taşındı, dropdown UI artık ölü. */ /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 8 — FEATURE BLOKLARI: ÖZET, SAĞLIK, SIRA, EŞİK, GLOW ──────────────────────────────────────────────────────────────────────────── .akilli-ozet-kart (line 1389'da DUPLICATE — Aşama 1'de tek tanım), .makine-saglik-skor (FAZ 1 sağlık halkası), .sira-kartim-wrap (floating now-playing bar — 6 katmanlı !important zinciri FAZ 1'de temizlendi), .esik-uyari-* (eşik uyarı sistemi v157+), GlowBitti @keyframes, durum badge çift ikonları, PWA banner z-index. Aşama 2 hedef: 02-kartlar.css (kart-içi feature) + 07-floating.css (.sira-kartim-wrap) + 08-animations.css (@keyframes) ══════════════════════════════════════════════════════════════════════════ */ /* ============================ AKILLI ÖZET KARTI ============================ */ .akilli-ozet-kart { background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow-lg, 0 4px 20px rgba(0,0,0,.08)); border-left: 4px solid var(--adm-accent); } .akilli-ozet-baslik { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .akilli-ozet-ikon { font-size: 18px; } /* Aşama 1 (3 May): satirlar + satir + iyi/uyari/kritik tanımları line ~1529'daki geç override değerleriyle birleştirildi (gap 6px, padding 7px 12px, radius 9px). */ .akilli-ozet-satirlar { display: flex; flex-direction: column; gap: 6px; } .akilli-ozet-satir { font-size: 12px; padding: 7px 12px; border-radius: 9px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .akilli-ozet-satir.iyi { background: var(--yesil-bg); color: #276749; } .akilli-ozet-satir.uyari { background: var(--sari-bg); color: #854d0e; } .akilli-ozet-satir.kritik { background: var(--kirmizi-bg); color: #9b2c2c; } /* ============================ MAKİNE SAĞLIK SKORU ============================ */ /* ── SIRA KARTIM WIDGET ── */ .sira-kartim-wrap{margin-bottom:14px;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid var(--border2);border-top:1.5px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-md);animation:slideDown .3s cubic-bezier(.34,1.56,.64,1);} .sira-kartim-baslik{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted);margin-bottom:10px;} .sira-kartim-satir{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;} .sira-kartim-satir:last-child{border-bottom:none;} .sira-kartim-tip{font-size:13px;font-weight:700;flex:0 0 auto;} .sira-kartim-no{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--surface3);color:var(--text);} .sira-kartim-no.birinci{background:linear-gradient(135deg,#d4af37,#f4c542);color:#1a1a00;box-shadow:0 2px 8px rgba(212,175,55,.35);} .sira-kartim-sure{font-size:11px;color:var(--muted);font-weight:700;flex:1;} .sira-birak-mini-btn{margin-left:auto;background:var(--kirmizi-bg);color:var(--kirmizi);border:1px solid var(--kirmizi-b);border-radius:6px;padding:3px 9px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;} .sira-birak-mini-btn:hover{background:var(--kirmizi);color:#fff;} /* ── MAKİNE KART BÜYÜK DURUM İKONU ── */ /* 4 May 1F: glowBitti keyframe + .mk-bitti override silindi — 11-tasarimsal.css :337 tek nokta olarak kartGlowBitti animasyonunu (will-change dahil) tutuyor. */ /* ── DURUM BADGE ÇİFT ── */ /* ── EŞİK UYARI SİSTEMİ ── */ .esik-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--kirmizi);color:#fff;font-size:10px;font-weight:700;margin-left:5px;vertical-align:middle;animation:esik-pulse 2s infinite;} .tani-badge{display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 6px;border-radius:999px;background:#c62828;color:#fff;font-size:10px;font-weight:700;margin-left:5px;vertical-align:middle;} @keyframes esik-pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,62,62,.5)}50%{box-shadow:0 0 0 5px rgba(229,62,62,0)}} .esik-uyari-kart{margin-top:18px;border-radius:16px;overflow:hidden;border:1px solid var(--kirmizi-b);background:var(--kirmizi-bg);} .esik-uyari-kart:has(.esik-uyari-ok){border-color:var(--yesil-b);background:var(--yesil-bg);} .esik-uyari-baslik{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;font-size:12px;font-weight:700;color:var(--kirmizi);text-transform:uppercase;letter-spacing:.04em;} .esik-uyari-kart:has(.esik-uyari-ok) .esik-uyari-baslik{color:var(--yesil);} .esik-uyari-zaman{font-size:10px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;} .esik-uyari-aciklama{padding:0 16px 10px;font-size:11px;color:var(--muted);line-height:1.5;} .esik-uyari-ok{padding:12px 16px 14px;font-size:12px;font-weight:700;color:var(--yesil);} /* ── MAKİNE SAĞLIK SKORU ── */ /* ── PWA BANNER ── */ /* v200 OMAR (29 Nis): z-index 210→190. Modal-overlay 200; modal açıkken PWA banner üstte rendere modal tıklanamaz oluyordu. 190 → modal'ın altında, normal akışta görünür ama modal açılınca arka plana düşer. */ .pwa-banner{position:fixed;bottom:20px;left:20px;right:20px;background:var(--surface);border:1px solid var(--border);padding:15px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 25px rgba(0,0,0,0.3);z-index:var(--z-banner);animation:slideUp .5s ease;} /* OMAR 10 May denetim — HTML #5: demo-banner inline style class'a taşındı. hidden attribute toggle ile aç/kapat (display:flex when not[hidden]). */ .demo-banner{display:none;background:#7c3aed;color:#fff;padding:8px 16px;text-align:center;font-size:13px;font-weight:700;justify-content:center;align-items:center;gap:12px;} .demo-banner:not([hidden]){display:flex;} .demo-cik-btn{padding:3px 12px;background:#fff;color:#7c3aed;border:none;border-radius:20px;font-weight:700;cursor:pointer;font-size:12px;} .demo-cik-btn:hover{background:#f4f0ff;} @keyframes slideUp{from{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}} .pwa-content{display:flex;align-items:center;gap:12px;} .pwa-icon{width:45px;height:45px;border-radius:10px;object-fit:contain;} .pwa-text strong{display:block;font-size:14px;color:var(--text);font-weight:700;} .pwa-text p{font-size:12px;color:var(--muted);margin:0;} .pwa-actions{display:flex;gap:8px;align-items:center;} .pwa-btn-main{background:var(--yesil);color:white;border:none;padding:8px 16px;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px;} .pwa-btn-close{background:none;border:1px solid var(--border);border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--muted);font-size:13px;} /* ── OTOMATİK KARANLIK MOD ── */ @media (prefers-color-scheme: dark) { html:not([data-tema="acik"]) { --bg:#0f1117;--surface:#1e2130;--surface2:#262b3e;--surface3:#2e3450; --border:#2d3149;--border2:#3a4060;--text:#e8eaf6;--muted:#8892b0;--dimmed:#5a6480; --yesil:#4ade80;--yesil-bg:#0a1f14;--yesil-b:#166534; --kirmizi:#f87171;--kirmizi-bg:#1f0a0a;--kirmizi-b:#7f1d1d; --sari:#fbbf24;--sari-bg:#1f1600;--sari-b:#78350f; --bakim:#c084fc;--bakim-bg:#180a2a;--bakim-b:#581c87; --koptu:#475569;--koptu-bg:#0f172a;--koptu-b:#1e293b; --adm-accent:#22d3ee;--adm-accent2:#fb923c; --shadow-sm:0 1px 4px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.5);--shadow-lg:0 12px 40px rgba(0,0,0,.6); } } /* ── TIMELINE (OLAY ŞERİDİ) ── */ .timeline-item{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--border);transition:background .1s;} .timeline-item:hover{background:var(--surface2);} .timeline-time{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);min-width:140px;} .timeline-badge{font-size:18px;} .timeline-desc{flex:1;font-size:12px;font-weight:700;} /* ── DOM PERFORMANS SINIFI ── */ .filtre-gizli{display:none !important;} /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 9 — V1.8 UX + GÖRSEL İYİLEŞTİRMELER (TARİHSEL — uzun blok) ──────────────────────────────────────────────────────────────────────────── v112 uyumluluk + v1.8 4 öneri implementasyonu (floating bar, skeleton, tabular numerals, haptic) + ÖNERI 3 (modal+admin yeniden tasarım) + v1.8 görsel iyileştirmeler (durum netliği, kart okunabilirliği, mobil yoğunluk, floating bar kalitesi) + v1.8 öneri implementasyonları + v1.8 mockup implementasyonu. NOT: ~500 satırlık karışık blok. Aşama 1'de !important temizliği ve duplicate konsolidasyon hedefi. Aşama 2 hedef: 02-kartlar.css + 05-skeleton.css + 07-floating.css (içerik karışık olduğu için ayrım Aşama 2'de yapılacak) ══════════════════════════════════════════════════════════════════════════ */ /* ================================================================ YENİ GÖRSEL İYİLEŞTİRMELER (index.html v112 ile uyumlu) ================================================================ */ /* ── STATS WRAP: stat kartlar (halka ölü kod temizliğinde kaldırıldı v155) ── */ .stats-wrap{display:block;margin-bottom:16px;} .stats-wrap .stats{flex:1;margin-bottom:0;} @media (max-width: 640px){.stats-wrap{flex-direction:column;align-items:stretch;}} /* ── YOĞUNLUK ŞERİDİ (eski büyük kart yerine) ── */ .yogunluk-serit{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:14px;font-size:12px;font-weight:700;box-shadow:var(--shadow-sm);} .yogunluk-serit .yogunluk-ikon{font-size:16px;} .yogunluk-serit .yogunluk-durum{font-weight:700;color:var(--text);} .yogunluk-serit .yogunluk-detay{color:var(--muted);font-size:11px;flex:1;} .yogunluk-serit .yogunluk-yuzde{font-family:'Space Mono',monospace;font-size:11px;color:var(--dimmed);margin-left:auto;background:var(--surface2);border:1px solid var(--border);padding:2px 8px;border-radius:999px;} .yogunluk-serit.sakin{border-left:3px solid var(--yesil);} .yogunluk-serit.orta{border-left:3px solid var(--sari);} .yogunluk-serit.yogun{border-left:3px solid var(--kirmizi);} .yogunluk-serit.cok-yogun{border-left:3px solid #7c3aed;} @media (max-width: 480px){.yogunluk-serit .yogunluk-detay{display:none;}} /* ── BOŞ BANNER AKSİYONLAR ── */ .bos-banner-aksiyonlar{display:flex;flex-direction:column;gap:5px;flex-shrink:0;} .bos-banner-aksiyonlar .bos-bildirim-btn{padding:5px 12px;font-size:11px;border-radius:999px;flex:none;width:auto;} @media (max-width: 480px){.bos-banner{flex-wrap:wrap;}.bos-banner-aksiyonlar{flex-direction:row;width:100%;}.bos-banner-aksiyonlar .bos-bildirim-btn{flex:1;}} /* ── FİLTRE BAR İKİ GRUP ── */ .toolbar{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;} /* tip segmented control */ .tip-segment-wrap{display:flex;align-items:center;gap:4px;padding-top:4px;} .tip-segment{display:inline-flex;background:var(--surface2);border-radius:10px;padding:2px;border:1px solid var(--border);gap:1px;} .tip-seg-btn{padding:4px 12px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;font-family:'Nunito',sans-serif;white-space:nowrap;} .tip-seg-btn.aktif{background:var(--text);color:var(--bg);box-shadow:0 2px 6px rgba(0,0,0,.18);} .tip-seg-btn:not(.aktif):hover{background:var(--border);color:var(--text);} @media(min-width:600px){.toolbar{flex-direction:row;align-items:center;gap:12px;}.tip-segment-wrap{border-left:1px solid var(--border);padding-left:10px;padding-top:0;}} /* ── TEKNİK/MEMUR SEKME GİZLEME (layout shift önlemi) ── */ .admin-tab-btn.teknik-only{display:none;} .admin-tab-btn.memur-only{display:none;} body.rol-teknik .admin-tab-btn.teknik-only{display:inline-flex;} body.rol-memur .admin-tab-btn.memur-only{display:inline-flex;} body.rol-super .admin-tab-btn.teknik-only{display:inline-flex;} body.rol-super .admin-tab-btn.memur-only{display:inline-flex;} /* ================================================================ ÖNERİ 3 — MODAL + ADMIN PANEL YENİDEN TASARIM ================================================================ */ /* ── M3 MODAL: İLERLEME BLOĞU ── */ .m3-progress-blok { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; } .m3-program-satir { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .m3-program-ad { font-size: 15px; font-weight: 700; color: var(--text); } .m3-yuzde { font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; color: var(--kirmizi); } .m3-bar-bg { width: 100%; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .m3-bar-fill { height: 100%; background: linear-gradient(90deg, var(--kirmizi), #fc8181); border-radius: 4px; transition: width .8s cubic-bezier(.4,0,.2,1); } .m3-sure-satir { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; } .m3-gecen { color: var(--muted); } .m3-kalan { color: var(--kirmizi); font-family: 'Space Mono', monospace; } .m3-kalan.az { color: var(--sari); } /* ── M3 MODAL: BİLGİ SATIRLARI ── */ .m3-rows { margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .m3-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 13px; } .m3-row:last-child { border-bottom: none; } .m3-row span { color: var(--muted); font-weight: 700; } .m3-row strong { color: var(--text); font-family: 'Space Mono', monospace; font-size: 12px; } /* ── ADMIN ÖZETİ — KOMPAKT 4 KART ── */ .admin-ozet-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 15vw, 160px), 1fr)); gap: clamp(8px, 1vw, 12px); margin-bottom: 20px; } .admin-ozet-mini-kart { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 14px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .15s; cursor: default; } .admin-ozet-mini-kart:hover { transform: translateY(-2px); } .aom-val { font-family: 'Space Mono', monospace; font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .aom-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } @media (max-width: 640px) { .admin-ozet-mini-grid { grid-template-columns: repeat(2,1fr); } } /* v200 (29 Nis): Küçük telefonlarda (iPhone SE 375px) tek sütun → her kart full genişlik */ @media (max-width: 480px) { .admin-ozet-mini-grid { grid-template-columns: 1fr; gap: 8px; } } /* ── ADMIN TABLO: kompakt (RSSI/Döngü sütun kaldırıldı) ── */ .admin-table td:nth-child(3) { font-family: 'Space Mono', monospace; font-size: 12px; } /* ============================================================ v1.8 UX IMPROVEMENTS 1. Floating Now-Playing Bar 2. Skeleton Loading 3. Haptic (JS only) 4. Tabular Numerals 5. Micro-animations 6. Empty States + Greeting ============================================================ */ /* ─── 4. TABULAR NUMERALS ─── */ .m3-gecen, .m3-kalan, .m3-yuzde, .sira-kartim-sure, .sira-kartim-no, .fb-alt { font-variant-numeric: tabular-nums; } /* 4 May 1F: .makine-kart { transition: ... } silindi — 11-tasarimsal:1015 override ediyor (background-color animation 11'de yok = aynı sonuç). */ /* 4 May 1F: transform + transition silindi — 11-tasarimsal:580 !important ile ezilmiş (.97 scale + .06s transition). background: var(--surface2) :active'te tek aktif effect, korundu. */ /* transition 11-tasarimsal:575 !important ile eziliyor → silindi. Sadece background:active live. */ .makine-kart:active { background: var(--surface2); } /* v200 OMAR (29 Nis): #10 focus-visible kuralı kaldırıldı — line 3265'teki global `:focus-visible { outline: 3px solid var(--kirmizi) !important; }` shorthand outline'ın TÜM bileşenlerini !important yapıyor → buradaki 2px var(--red) hiç çalışmıyordu. Sadeleştirme: tek source of truth (line 3265). Eğer button/filtre için marka kırmızısı istenirse `!important` ile yeniden eklenebilir. */ @keyframes pulse-icon { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.7; transform:scale(1.15); } } /* ─── 2. SKELETON LOADING — TAMAMEN 10-yonetim.css + 11-tasarimsal.css'e taşındı. v1 + v2 + @keyframes shimmer DEAD: shimmer animasyonu artık premiumShimmer (11-tasarimsal:652) ile .skeleton-kart::after üzerinde çalışıyor. 14 May Aşama 3. */ /* ─── 1. FLOATING NOW-PLAYING BAR (!important kaldırıldı — base 678 !important'sız) ─── */ .sira-kartim-wrap { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 28px)); z-index: var(--z-banner); /* modal altında kalır — 10 May normalize sonrası variable */ margin-bottom: 0; padding: 0; background: var(--surface); border: 1.5px solid var(--border2); border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08); backdrop-filter: blur(8px); animation: floatBarIn 0.35s cubic-bezier(.34,1.56,.64,1); } @keyframes floatBarIn { from { transform: translateX(-50%) translateY(28px); opacity:0; } to { transform: translateX(-50%) translateY(0); opacity:1; } } .fb-inner { padding: 12px 16px; } .fb-nowplay { display:flex; align-items:center; gap:12px; } .fb-ikon { font-size:26px; flex-shrink:0; animation:pulse-icon 2.4s ease-in-out infinite; } .fb-bilgi { flex:1; min-width:0; } .fb-baslik { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fb-alt { font-size:11px; color:var(--muted); font-weight:700; margin-top:2px; } .fb-kapat { background:var(--surface2); border:1px solid var(--border); border-radius:50%; width:28px; height:28px; font-size:12px; color:var(--muted); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .15s; } .fb-kapat:hover { background:var(--surface3); } .fb-prog-bg { height:4px; background:var(--border); border-radius:0 0 20px 20px; overflow:hidden; } .fb-prog-fill{ height:100%; background:linear-gradient(90deg,#3182ce,#63b3ed); border-radius:4px; transition:width 1s linear; } /* #selam-banner ilk tanımı kaldırıldı — satır 1087'deki daha kapsamlı tanım aktif (dead code temizliği) */ /* ── TEKNIK ANALİZ TABLO BADGE'LERİ ── */ .tech-badge { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; } /* ================================================================ v1.8 GÖRSEL İYİLEŞTİRMELER Kullanışlılık odaklı: durum netliği · kart okunabilirliği · mobil yoğunluk · floating bar kalitesi ================================================================ */ /* ────────────────────────────────────────────────────────────── 1. MAKİNE KARTI — DURUM DAHA AÇIK ────────────────────────────────────────────────────────────── */ /* .makine-kart::before/::after — 14 May Aşama 3 ile sertleştirildi. - .makine-kart::before width:0 block: 11-tasarimsal:813 (top strip 4px) eziyor → DEAD - .makine-kart::after 4px üst şerit: 11-tasarimsal:1080 (50% glass overlay display:block !important) eziyor → DEAD - .mk-bos/.mk-dolu/.mk-bakim::after solid renkleri: 11-tasarimsal:1142 white gradient eziyor → DEAD Kalanlar load-bearing: - .mk-bitti::after animation:sariPulse 1.8s — glass overlay'i bitti durumunda pulse eder - .mk-koptu::after opacity:.5 — koptu durumunda glass overlay desature - @keyframes sariPulse — 11-tasarimsal:827 (.mk-bitti::before) ve :1027 (kompakt fleet large) tarafından kullanılır */ .mk-bitti::after { animation: sariPulse 1.8s ease-in-out infinite; } .mk-koptu::after { opacity: .5; } @keyframes sariPulse { 0%,100% { opacity:1; } 50% { opacity:.55; } } /* Durum arkaplanı — çok hafif renk tonu */ /* .mk-* base background: refactor (20 Nis) — 2 katman ölü kod silindi. Final değer linear-gradient bloğunda (~satır 2150). Dark: ~1357. Fallback: ~3107. */ /* .kalan-sure scope: refactor (20 Nis) — tek tanım base'de, satır ~209. countdownPulse keyframe .m3-kalan.az tarafından kullanıldığı için burada bırakıldı. */ @keyframes countdownPulse { from { opacity:.8; } to { opacity:1; } } /* ────────────────────────────────────────────────────────────── 4. KART GRID — MOBİL OPTİMİZASYON ────────────────────────────────────────────────────────────── */ /* ── RESPONSIVE MAKİNE GRID — tek yetkili kural ── */ /* Telefon: 2 sütun */ @media (max-width: 480px) { .makine-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .makine-kart { padding: 10px 10px 9px; border-radius: 13px; } } /* Küçük tablet/phablet: 3 sütun */ @media (min-width: 481px) and (max-width: 768px) { .makine-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; } } /* Orta ekran: 4 sütun */ @media (min-width: 769px) and (max-width: 1024px) { .makine-grid { grid-template-columns: repeat(4, 1fr); } } /* Geniş: fluid, 5-6 sütun */ @media (min-width: 1025px) { .makine-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 14vw, 210px), 1fr)); } } /* ────────────────────────────────────────────────────────────── 5. FİLTRE ÇUBUĞU — DAHA NET AKTİF DURUM ────────────────────────────────────────────────────────────── */ .filtre-btn { padding: 6px 14px; font-size: 12px; border-radius: 10px; transition: background .15s, color .15s, transform .1s, box-shadow .15s; } .filtre-btn:active { transform: scale(.95); } /* .filtre-btn.aktif 14 May Aşama 3 ile temizlendi — 10-yonetim.css:400 ile property-property aynı bloktu (bg+color+shadow+transform+border-bottom). Dead. */ /* Filtre bar kaydırılabilir — mobilde taşmayı önle */ .filtre-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .filtre-bar::-webkit-scrollbar { display: none; } /* ────────────────────────────────────────────────────────────── 6. SELAM BANNER — DÜZGün STİL ────────────────────────────────────────────────────────────── */ /* v214 (3 May): selamlama kutu içine alındı (border + bg + radius). */ #selam-banner { margin: 4px 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: .005em; display: flex; align-items: center; gap: 8px; min-height: 40px; } #selam-banner:empty { display: none; } /* ────────────────────────────────────────────────────────────── 7. SKELETON LOADING — 14 May Aşama 3 ile temizlendi. .skeleton-grid + .skeleton-kart canonical kaynak: - .skeleton-kart base: 10-yonetim.css:485 (surface + 1px border, 148px height) - .skeleton-kart::before üst şerit: 10-yonetim.css:493 - .skeleton-kart::after shimmer overlay: 10-yonetim.css:501 - .skeleton-kart contain perf: 11-tasarimsal.css:610 - .skeleton-grid layout: 11-tasarimsal.css:659 (clamp responsive + padding) - .skeleton-kart::after animation: 11-tasarimsal.css:656 (premiumShimmer 1s) Önceki v1 (radius 16, height 132, gradient bg, animation shimmer) DEAD idi. ────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────── 8. FLOATING NOW-PLAYING BAR — GLASS MORPHISM .sira-kartim-wrap glass katmanı 14 May Aşama 3 ile temizlendi. Tüm property'leri 10-yonetim.css (background+border+border-top+shadow+ border-radius+bottom) ve 11-tasarimsal.css:500-504 group selector (backdrop-filter blur 8) tarafından eziliyordu — full dead. ────────────────────────────────────────────────────────────── */ .fb-baslik { font-size: 12px; /* #9 küçültüldü */ font-weight: 700; } .fb-alt { font-family: 'Space Mono', monospace; font-size: 10px; /* #9 küçültüldü */ font-variant-numeric: tabular-nums; color: var(--muted); margin-top: 3px; } .fb-prog-fill { background: linear-gradient(90deg, var(--kirmizi), var(--sari)); transition: width 2s linear; } /* body padding floating bar için */ body { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Floating bar açıkken JS inline style yerine class kullan */ body.has-floating-bar { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } /* ────────────────────────────────────────────────────────────── 9. BOŞLUK VE TİPOGRAFİ KISAYOLLARI ────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────── 10. KOYU MOD ARKAPLAN TONU — 14 May Aşama 3 ile silindi. [data-tema="koyu"] .mk-bos/.mk-dolu/.mk-bitti dark tonları (6%/5%/7%) 11-tasarimsal:839-842 dark tonları (7%/6%/8% + .mk-bakim) tarafından ezildi → DEAD. v179 normal mod ayrıca 11-tasarimsal:1387-1395 ile surface'a düşer. @supports color-mix fallback 10-yonetim:1006-1008'de ayrı (hex !important — eski tarayıcı). ────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────── 11. M3 MODAL PROGRESS — DAHA NET ────────────────────────────────────────────────────────────── */ .m3-progress-blok { background: color-mix(in srgb, var(--kirmizi) 6%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--kirmizi) 20%, var(--border)); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .m3-yuzde { font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; color: var(--kirmizi); } .m3-kalan { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; color: var(--kirmizi); } .m3-kalan.az { color: var(--sari); animation: countdownPulse .7s infinite alternate; } .m3-bar-fill { background: linear-gradient(90deg, var(--kirmizi), color-mix(in srgb, var(--kirmizi) 55%, var(--sari))); } /* ────────────────────────────────────────────────────────────── 12. YOĞUNLUK BAROSMETRESİ — RENKLER NET ────────────────────────────────────────────────────────────── */ .yogunluk-serit { border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; transition: background .4s, border-color .4s; } .yogunluk-serit.sakin { background: color-mix(in srgb, var(--yesil) 8%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--yesil) 30%, transparent); } .yogunluk-serit.orta { background: color-mix(in srgb, var(--sari) 8%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--sari) 30%, transparent); } .yogunluk-serit.yogun { background: color-mix(in srgb, var(--kirmizi) 7%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--kirmizi) 28%, transparent); } .yogunluk-serit.cok-yogun{ background: color-mix(in srgb, var(--kirmizi) 12%, var(--surface)); border: 1.5px solid var(--kirmizi); } /* ================================================================ v1.8 ÖNERI IMPLEMENTASYONLARI ================================================================ */ /* ─── A. COMPACT GRID VIEW ─────────────────────────────────────── */ /* Varsayılan: normal kart. .kompakt-mod ile küçük kare görünüm */ .goruntuleme-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); transition: all .15s; } .goruntuleme-btn.aktif, .goruntuleme-btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); } /* v214 (3 May): kompakt buton — Material Blue 500, üst satır sağ ucunda */ .goruntuleme-icon-btn { padding: 6px 8px; min-width: 32px; border-radius: 9px; background: var(--surface); color: #2196F3; border-color: rgba(33,150,243,.35); opacity: 1; } .goruntuleme-icon-btn:hover { background: rgba(33,150,243,.10); color: #1976D2; border-color: rgba(33,150,243,.55); } .goruntuleme-icon-btn.aktif { background: #2196F3; color: #fff; border-color: #2196F3; } .goruntuleme-icon-btn.aktif:hover { background: #1976D2; color: #fff; border-color: #1976D2; } /* Üst filtre satırı: filtre-bar (5 buton, scroll) + sağda kompakt buton */ .filtre-durum-row { display: flex; align-items: center; gap: 8px; } .filtre-durum-row > .filtre-bar { flex: 1 1 0; min-width: 0; } .filtre-durum-row > .goruntuleme-btn { flex-shrink: 0; } body.kompakt-mod .makine-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } @media (max-width: 480px) { body.kompakt-mod .makine-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } } @media (max-width: 360px) { body.kompakt-mod .makine-grid { grid-template-columns: repeat(3, 1fr); } } body.kompakt-mod .makine-kart { padding: 8px 6px 6px; border-radius: 12px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 72px; cursor: pointer; } /* Kompakt modda admin alt bilgi gizli */ body.kompakt-mod .kart-admin-alt { display: none; } /* body.kompakt-mod .kart-ust DEAD — .kart-ust DOM'da render edilmiyor. 14 May Aşama 3 #15 silindi. */ /* Kompakt kart ::before — 14 May Aşama 3: eski round-dot structural block silindi. 11-tasarimsal:863 body.kompakt-mod .makine-kart::before { width:100%; height:3px; position:absolute; top/left/right:0; box-shadow:none; } eski 10x10 nokta tasarımının structural overlay'ini full-width strip yapmıştı (yeni v179 tasarımı .kart-ust::before üzerinden ayrı bir renkli nokta sunuyor). Sadece renk+animasyon satırları kalır. */ body.kompakt-mod .mk-bos::before { background: var(--yesil); } body.kompakt-mod .mk-dolu::before { background: var(--kirmizi); animation: dotP 1.5s infinite; } body.kompakt-mod .mk-bitti::before { background: var(--sari); animation: dotP 1.2s infinite; } body.kompakt-mod .mk-bakim::before { background: var(--bakim); } body.kompakt-mod .mk-koptu::before { background: var(--koptu); opacity:.5; } /* ─── B. FILTRE ÇUBUĞU GLASSMORPHISM (background+blur+padding 2554'te eziliyor — sildim, margin top/bottom kaldı) ── */ .filtre-bar-wrap { margin: -4px -20px 8px; } /* 4 May 1F: Aura/glow bloğu silindi (.mk-bos/.mk-dolu/.mk-bitti box-shadow + aurkirmizi keyframe). 10-yonetim.css:607-619 daha sonra geliyor ve aynı property'leri override eder (shadow-card + activeGlow/waitGlow). 09'daki tanımlar tamamen dead idi. */ /* ─── D. BOTTOM SHEET MODAL (MOBİL) ───────────────────────────── */ @media (max-width: 640px) { .modal-overlay { align-items: flex-end; padding: 0; } .modal { border-radius: 22px 22px 0 0; max-width: 100%; max-height: 90vh; width: 100%; transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .modal-overlay.acik .modal { transform: translateY(0); } /* Sürükleme tutamacı */ .modal::before { content: ''; display: block; width: 40px; height: 5px; background: var(--border2); border-radius: 3px; margin: 0 auto 18px; } } /* ─── E. DİNAMİK İKON RENGİ ──────────────────────────────────── */ /* Boş ve koptu: ikonlar soluk */ /* ================================================================ v1.8 MOCKUP IMPLEMENTASYONU Öneri 1 görsel dili + Öneri 2 UX kararları ================================================================ */ /* .mk-* surface override silindi (20 Nis refactor) — 2159'daki linear-gradient zaten bunu eziyordu. */ /* ─── HEADER KOMPAKT (Öneri 2) ─── */ /* Mobilde logo + başlık daha sıkı */ @media (max-width: 640px) { .site-logo { width: 40px; height: 40px; } .logo-text h1 { font-size: 16px; } .logo-text .proje-isim { font-size: 12px; } .logo-text .alt { display: none; } header { padding: 10px 0 12px; } /* Hub chip ve butonları daha küçük */ .hub-chip { padding: 5px 10px; font-size: 11px; } .mod-btn { padding: 4px 9px; font-size: 11px; } } /* ─── SIRA BADGE güncelle (ring ile hizalı) ─── */ .sira-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-left: 4px; } /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 10 — EKSİK CSS + YÖNETİM MERKEZİ (TARİHSEL — DEV BLOK ~1700 satır) ──────────────────────────────────────────────────────────────────────────── index_final.html ile uyum eksik sınıflar + YÖNETİM MERKEZİ EKSİK CSS TAMAMLAMASI (1358-3093 arası). Bu blok zaman içinde "eksik bir şey varsa buraya at" katmanı haline gelmiş — admin teknik sekmesi, kullanıcı yönetimi, energy panel, heatmap, analiz tabloları, timeline burada. speed.css merge'i de (~v174) bu bloğa karışmış — performans tier'ları. NOT: Aşama 2'de bu büyük miş-maş 4-5 dosyaya yayılacak (admin, skeleton, yogunluk, animations, base). Aşama 1'de iç organizasyon yorum bloğu eklemek mümkün ama agresif silme YOK. Aşama 2 hedef: 04-admin.css + 06-yogunluk.css + 05-skeleton.css + 08-animations.css'e yayılır ══════════════════════════════════════════════════════════════════════════ */ /* ================================================================ EKSİK CSS SINIFLARI — index_final.html ile uyum ================================================================ */ /* ── Yoğunluk barometresi yeni yapısı ── */ .yogunluk-sol { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .yogunluk-ikon-wrap { font-size: 18px; line-height: 1; } .yogunluk-orta { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .yogunluk-progress-bg { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; } .yogunluk-progress-fill { height: 100%; border-radius: 4px; transition: width .6s ease; background: linear-gradient(90deg, var(--yesil), var(--sari)); } .yogunluk-serit.cok-yogun .yogunluk-progress-fill { background: linear-gradient(90deg, var(--sari), var(--kirmizi)); } .yogunluk-serit.yogun .yogunluk-progress-fill { background: linear-gradient(90deg, var(--sari), #dd6b20); } .yogunluk-serit.orta .yogunluk-progress-fill { background: linear-gradient(90deg, var(--yesil), var(--sari)); } .yogunluk-serit.sakin .yogunluk-progress-fill { background: var(--yesil); } /* ── Stats kartı yeni yapısı ── */ .stats-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .stats-wrap .stats { flex: 1; } .stat-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .stat-ikon { font-size: 16px; line-height: 1; } .si-bos { color: var(--yesil); } .si-dolu { color: var(--kirmizi); } .si-bitti { color: var(--sari); } .si-koptu { color: var(--bakim); } /* ── Boş bildirim butonları ── */ .bos-bildirim-camasir { background: var(--yesil); color: #fff; } .bos-bildirim-kurutma { background: #3182ce; color: #fff; } .filtre-durum { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filtre-durum::-webkit-scrollbar { display: none; } /* Aşama 1.E (3 May): .olay-filtreler bloğu silindi — Operasyon→Olaylar alt sekmesi v210'da kaldırıldı (Canlı'da olay akışı zaten var, redundant'tı). */ .olay-timeline { display: flex; flex-direction: column; gap: 0; max-height: 500px; overflow-y: auto; } .timeline-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); } .timeline-time { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--dimmed); white-space: nowrap; flex-shrink: 0; padding-top: 2px; } .timeline-badge { font-size: 16px; flex-shrink: 0; } .timeline-desc { font-size: 12px; color: var(--text); line-height: 1.5; } /* ── Admin teknik/ayarlar kısa class'lar ── */ /* .k ve .v class'ları admin kartlarda kullanılıyor */ .admin-card .k, .ayarlar-kart .k, .teknik-summary-card .k { display: block; font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; } .admin-card .v, .teknik-summary-card .v { font-family: 'Space Mono', monospace; font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; } .admin-card .s, .ayarlar-kart .s { font-size: 10px; color: var(--dimmed); margin-top: 4px; } /* ── Admin özet mini grid ── */ .admin-ozet-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; } /* Bağımsız .k .v .s — admin/teknik kartlarda kullanılan kısa isimler */ .k { font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; display:block; } .v { font-family:'Space Mono',monospace; font-size:22px; font-weight:700; color:var(--text); line-height:1; display:block; } .s { font-size:10px; color:var(--dimmed); margin-top:4px; display:block; } /* ================================================================ YÖNETİM MERKEZİ — EKSİK CSS TAMAMLAMASI ================================================================ */ /* Admin topbar tam düzen */ .admin-topbar { padding: 20px 24px 0; } .admin-topbar-left { flex: 1; min-width: 0; } .admin-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .admin-sub { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 3px; } /* Admin tabs tam satır kaplar */ .admin-tabs { width: 100%; margin: 12px 0 0; flex-basis: 100%; } .admin-tabs::-webkit-scrollbar { height: 3px; } .admin-tabs::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } /* Admin tab btn renkleri (aktif durumlara göre) */ .admin-tab-btn.aktif[data-admin-tab="kullanicilar"]{ background:#b45309; color:#fff; } /* admin-pane ilk açılışta görünür olsun (JS ile ekleniyor ama fallback) */ /* admin-pane-canli başlangıç görünümü JS ile yönetiliyor (switchAdminTab) */ /* Admin içerik alan genişliği */ .admin-content { padding: 20px 24px 24px; } /* Aşama 1 (3 May): .akilli-ozet-* duplicate tanımlar üst bloğa (line ~571) konsolide edildi. */ /* Özet mini kartlar grid */ .admin-ozet-mini-kart { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .15s; } .admin-ozet-mini-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .aom-val { font-family: 'Space Mono', monospace; font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 4px; } .aom-lbl { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; } /* Admin split alanı (satır 352'de tanımlı) */ /* Olay mini liste */ .admin-olay-mini { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; position: sticky; top: 12px; } .admin-olay-mini-baslik { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; background: var(--surface2); } .admin-olay-mini-liste { max-height: 480px; overflow-y: auto; } .admin-olay-mini-liste .olay-item { padding: 8px 12px; } /* Eşik uyarı kartı */ .esik-uyari-kart { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--adm-accent2); border-radius: 14px; padding: 14px 16px; margin-top: 16px; } .esik-uyari-baslik { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 8px; } .esik-uyari-zaman { font-size: 10px; color: var(--muted); font-weight: 700; } .esik-uyari-aciklama { font-size: 11px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; } .esik-uyari-ok { font-size: 11px; color: var(--yesil); font-weight: 700; } /* ── Eksik CSS sınıfları (derin analiz düzeltmesi) ── */ /* logo-text — header'da logo yanındaki metin grubu (satır 59-61'de tanımlı) */ /* pwa-text — PWA install banner metin alanı */ .pwa-text { display: flex; flex-direction: column; gap: 2px; } .pwa-text strong { font-size: 13px; font-weight: 700; color: var(--text); display: block; } .pwa-text p { font-size: 11px; color: var(--muted); margin: 0; } /* teknik-table — teknik analiz modalındaki tablo */ .teknik-table { width: 100%; border-collapse: collapse; font-size: 12px; } .teknik-table td, .teknik-table th { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } .teknik-table thead th { background: var(--surface3); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } /* akilli-ozet-baslik — renderStats'ın oluşturduğu özet başlığı */ .akilli-ozet-baslik { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .akilli-ozet-ikon { font-size: 18px; } /* ════════════════════════════════════════════════════════════════ PREMIUM GÖRSEL GÜNCELLEME — Akıllı Çamaşırhane v2.0 Yön: Refined Industrial — sert tipoloji, derin gölgeler, hassas mikro-animasyonlar, akıllı renk hiyerarşisi ════════════════════════════════════════════════════════════════ */ /* ── TEMEL TASARIM SİSTEMİ ──────────────────────────────────── */ /* Aşama 1 (3 May): :root + [data-tema="koyu"] üst :root bloğuna konsolide. */ /* ── 1. STAT KARTI — RENKLİ FON + BÜYÜK İKON ─────────────── */ /* .stats clamp responsive grid DEAD — 10-yonetim:938 "tüm önceki tanımları ezer" yorumlu blok ile aynı dosyada override. 14 May Aşama 3 #5. */ .stat-card { box-shadow: var(--shadow-card); border: none; overflow: hidden; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); position: relative; } .stat-card::before { display: none; } /* Eski üst şerit kaldır */ .stat-card::after { content: ''; position: absolute; inset: 0; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); pointer-events: none; } .stat-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-card-hover); } /* Durum renginde hover glow */ .stat-card.s-bos:hover { box-shadow: var(--shadow-md), 0 0 18px color-mix(in srgb, var(--yesil) 22%, transparent); } .stat-card.s-dolu:hover { box-shadow: var(--shadow-md), 0 0 18px color-mix(in srgb, var(--kirmizi) 22%, transparent); } .stat-card.s-bitti:hover { box-shadow: var(--shadow-md), 0 0 18px color-mix(in srgb, var(--sari) 25%, transparent); } .stat-card.s-sorun:hover { box-shadow: var(--shadow-md), 0 0 18px color-mix(in srgb, var(--kirmizi) 22%, transparent); } /* .s-* renk kategorileri — 14 May Aşama 3 #18 ile sertleştirildi: Pastel/dark gradient background'lar 11-tasarimsal:1143-1146 (light 5% tint) + :1148-1151 (dark 4% tint) "premium sakin" tasarımıyla eziliyordu → DEAD silindi. Text color'lar + .stat-val color'lar LIVE (11-tasarimsal'da override yok). */ .s-bos { color: #166534; } [data-tema="koyu"] .s-bos { color: #6ee7b7; } .s-bos .stat-val { color: #059669; } [data-tema="koyu"] .s-bos .stat-val { color: #34d399; } .s-dolu { color: #991b1b; } [data-tema="koyu"] .s-dolu { color: #fca5a5; } .s-dolu .stat-val { color: #dc2626; } [data-tema="koyu"] .s-dolu .stat-val { color: #f87171; } .s-bitti { color: #92400e; } [data-tema="koyu"] .s-bitti { color: #fcd34d; } .s-bitti .stat-val { color: #b45309; } [data-tema="koyu"] .s-bitti .stat-val { color: #fbbf24; } .s-sorun { color: #991b1b; } [data-tema="koyu"] .s-sorun { color: #fca5a5; } .s-sorun .stat-val { color: var(--kirmizi); } [data-tema="koyu"] .s-sorun .stat-val { color: var(--kirmizi); } /* Stat kart iç düzen */ .stat-ust { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; } .stat-val { font-family: 'Space Mono', monospace; font-weight: 700; /* font-size + line-height + letter-spacing silindi — 3873/3874/2999 eziyor */ } .stat-ikon { font-size: 22px; line-height: 1; opacity: .8; } .stat-label { font-weight: 700 ; text-transform: uppercase; /* font-size + letter-spacing silindi — 3877/3878 !important eziyor */ opacity: .7; margin-top: 2px; } /* ── 2. MAKİNE KARTLARI — PREMIUM (!important kaldırıldı — base !important'sız) ── */ .makine-kart { border-radius: 20px; padding: 14px 14px 12px; box-shadow: var(--shadow-card); border: 1px solid rgba(0,0,0,.06); gap: 6px; /* transition silindi — 3768 zaten override ediyor */ } [data-tema="koyu"] .makine-kart { border-color: rgba(255,255,255,.06); } .makine-kart:hover { /* transform silindi — 3773 zaten override ediyor */ box-shadow: var(--shadow-card-hover); } /* .makine-kart::after display:none + .makine-kart::before top strip burada idi. 11-tasarimsal:803 (display:none) ve :806 (top strip 4px + z-index + pointer-events) tam ezer (last-wins). DEAD. */ /* Durum arka planları — 14 May Aşama 3: 4-5% gradient'ler 11-tasarimsal:832-834 7-10% gradient ile eziliyordu → DEAD silindi. */ /* ── 4. DURUM RING — SVG ÇEMBERLER (kural body'leri 2843+'da) ── */ /* ── 5. FLOATING BAR — CIRCULAR PROGRESS RING (background+blur+border 2588'de eziliyor — sildim) ── */ .sira-kartim-wrap { box-shadow: var(--shadow-float); border-radius: 22px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .fb-ikon { position: relative; width: 38px; height: 38px; /* #9: 52→38px küçültüldü */ flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .fb-ikon svg.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .fb-ikon svg.ring-svg circle { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 2s linear; } .fb-ikon svg.ring-svg circle.track { stroke: var(--border); } .fb-ikon svg.ring-svg circle.fill { stroke: var(--kirmizi); } .fb-ikon .emoji { font-size: 18px; position: relative; z-index: 1; } /* #9 */ /* ── 6. FİLTRE COUNT BADGE — RENKLİ (!important kaldırıldı — specificity yeterli) ── */ .filtre-btn .f-count { font-weight: 700; opacity: 1; } .filtre-btn[data-f="bos"] .f-count { color: var(--yesil-vivid); } .filtre-btn[data-f="dolu"] .f-count { color: var(--kirmizi-vivid); } .filtre-btn[data-f="bitti"] .f-count { color: var(--sari-vivid); } .filtre-btn[data-f="bakim"] .f-count { color: var(--bakim-vivid); } /* .filtre-bar-wrap silindi — 2554'teki "en güncel tanım" tüm property'leri eziyordu */ /* .filtre-btn !important kaldırıldı — base 125 zaten !important'sız */ .filtre-btn { padding: 6px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; transition: all .15s var(--ease-out); white-space: nowrap; } .filtre-btn.aktif { background: var(--text); color: var(--bg); box-shadow: 0 3px 10px rgba(0,0,0,.22); transform: scale(1.03); border-bottom: 2px solid var(--red); } .filtre-btn:not(.aktif):hover { background: var(--surface2); border-color: var(--border2); } /* ── 7. YOĞUNLUK BAROMETRESİ — ISIL RENK (!important kaldırıldı — base'ler !important'sız) ── */ .yogunluk-serit { border-radius: 16px; padding: 12px 18px; transition: background .6s var(--ease-out), border-color .6s var(--ease-out); box-shadow: var(--shadow-card); border: 1px solid transparent; } .yogunluk-serit.sakin { background: linear-gradient(135deg, color-mix(in srgb,#10b981 8%,var(--surface)), var(--surface)); border-color: color-mix(in srgb,#10b981 25%,transparent); border-left: 4px solid #10b981; } .yogunluk-serit.orta { background: linear-gradient(135deg, color-mix(in srgb,#f59e0b 8%,var(--surface)), var(--surface)); border-color: color-mix(in srgb,#f59e0b 25%,transparent); border-left: 4px solid #f59e0b; } .yogunluk-serit.yogun { background: linear-gradient(135deg, color-mix(in srgb,#ef4444 8%,var(--surface)), var(--surface)); border-color: color-mix(in srgb,#ef4444 25%,transparent); border-left: 4px solid #ef4444; } .yogunluk-serit.cok-yogun { background: linear-gradient(135deg, color-mix(in srgb,#dc2626 12%,var(--surface)), var(--surface)); border-color: color-mix(in srgb,#dc2626 40%,transparent); border-left: 4px solid #dc2626; animation: urgentPulse 2s ease-in-out infinite; } @keyframes urgentPulse { 0%,100% { box-shadow: var(--shadow-card); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb,#dc2626 15%,transparent), var(--shadow-card); } } /* Progress fill renkleri */ .yogunluk-serit.sakin .yogunluk-progress-fill { background: #10b981; } .yogunluk-serit.orta .yogunluk-progress-fill { background: linear-gradient(90deg,#10b981,#f59e0b); } .yogunluk-serit.yogun .yogunluk-progress-fill { background: linear-gradient(90deg,#f59e0b,#ef4444); } .yogunluk-serit.cok-yogun .yogunluk-progress-fill { background: linear-gradient(90deg,#ef4444,#dc2626); } /* ── 8. HEADER KOMPAKT (!important kaldırıldı — base'ler !important'sız) ── */ header { padding: 14px 0 16px; gap: 10px; } .site-logo { width: 52px; height: 52px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.22)); } .logo-text h1 { font-size: 20px; font-weight: 700; } .hub-chip { padding: 6px 12px; font-size: 11px; font-weight: 700; border-radius: 999px; } @media (max-width: 640px) { .site-logo { width: 38px; height: 38px; } .logo-text h1 { font-size: 15px; } .logo-text .proje-isim { font-size: 11px; } .logo-text .alt { display: none; } header { padding: 10px 0 12px; gap: 8px; } .hub-chip { padding: 5px 10px; font-size: 10px; } .mod-btn { padding: 4px 8px; font-size: 10px; } .ayarlar-btn { font-size: 11px; padding: 5px 10px; } /* Aşama 1.E (3 May): mobile .rapor-dropdown silindi — selector ölü. */ .ayarlar-btn[id="ayarlar-btn"] { display: none; } } /* ── 9. SKELETON — KART ŞEMASINI YANSITAN (!important kaldırıldı) ── */ .skeleton-kart { border-radius: 20px; height: 148px; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); } .skeleton-kart::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border2); border-radius: 20px 20px 0 0; } .skeleton-kart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--border) 60%, transparent) 40%, transparent 80% ); background-size: 200% 100%; /* v200 (29 Nis): animation ve @keyframes tanımı aşağıdaki "SHIMMER HIZLANDIRMA" bloğuna taşındı (1.6s → 1s override aynı). Buradaki duplicate kaldırıldı. */ } /* ── 10. TOAST — SAĞ ALTTA (Aşama 1: base tanım line ~345'e konsolide edildi) ── */ @media (max-width: 640px) { .toast-wrap { /* Admin alt nav ~70px + safe area */ bottom: calc(74px + env(safe-area-inset-bottom, 0px)); right: 12px; left: 12px; align-items: center; } } /* Admin modda değilse normal alt boşluk */ body:not(.admin-mod) .toast-wrap { bottom: 24px; } .toast { border-radius: 14px; padding: 11px 18px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1); /* backdrop-filter 11-tasarimsal:505 .toast { blur(8) } ile ezildi (eski blur(6) dead) */ animation: toastSlideIn .4s var(--ease-spring) both; } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(24px) scale(.9); } to { opacity: 1; transform: translateX(0) scale(1); } } [data-tema="koyu"] .hub-dot.aktif { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); } /* ── 12. ADMIN TABS — PILL AKTİF (!important kaldırıldı, base 389 zaten !important'sız) ── */ .admin-tab-btn { border-radius: 10px; padding: 7px 14px; font-size: 11px; font-weight: 700; transition: all .15s var(--ease-out); } .admin-tab-btn.aktif { border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.2); transform: scale(1.02); } .admin-tab-btn:not(.aktif):hover { background: color-mix(in srgb, var(--text) 8%, transparent); } /* ── 13. BOŞ BANNER — PREMIUM (!important kaldırıldı — base'ler !important'sız) ── */ .bos-banner { border-radius: 18px; padding: 16px 20px; background: linear-gradient(135deg, color-mix(in srgb,#10b981 8%,var(--surface)), color-mix(in srgb,#10b981 4%,var(--surface))); border: 1.5px solid color-mix(in srgb,#10b981 30%,transparent); box-shadow: 0 4px 16px color-mix(in srgb,#10b981 12%,transparent); } .bos-id-chip { border-radius: 10px; padding: 4px 12px; font-size: 12px; font-weight: 700; background: #10b981; transition: transform .15s var(--ease-spring), box-shadow .15s; } .bos-id-chip:hover { transform: scale(1.08) translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,.4); } /* ── 15. MODAL — Mobil bottom-sheet override (base ~313'de; transform 40px buradan) ──── */ @media (max-width: 640px) { .modal { border-radius: 28px 28px 0 0; transform: translateY(40px); } .modal::before { background: color-mix(in srgb, var(--text) 20%, transparent); width: 44px; height: 5px; border-radius: 999px; } } /* ── 16. AURA / GLOW — 14 May Aşama 3 ile sertleştirildi. .mk-bos + .mk-bitti box-shadow: 11-tasarimsal:918-934 inset glass eziyor → DEAD. .mk-bitti animation: waitGlow: 11-tasarimsal:337 kartGlowBitti eziyor → DEAD. @keyframes waitGlow: no live reference → DEAD silindi. Kalan LIVE: .mk-dolu animation:activeGlow (11-tasarimsal'da override yok). */ .mk-dolu { animation: activeGlow 3s ease-in-out infinite; } @keyframes activeGlow { 0%,100% { box-shadow: var(--shadow-card), 0 0 20px color-mix(in srgb,#ef4444 12%,transparent); } 50% { box-shadow: var(--shadow-card), 0 0 36px color-mix(in srgb,#ef4444 22%,transparent); } } /* Kompakt modda glow kapalı (!important kaldırıldı — body.kompakt-mod .makine-kart specificity yeterli) */ body.kompakt-mod .makine-kart { box-shadow: var(--shadow-card); animation: none; } /* ── 17. BOŞ BANNER AKSIYONLAR (!important kaldırıldı — base'ler !important'sız) ── */ .bos-bildirim-btn { border-radius: 10px; font-size: 11px; font-weight: 700; padding: 7px 14px; transition: all .15s var(--ease-out); } .bos-bildirim-camasir { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 3px 10px rgba(16,185,129,.3); } .bos-bildirim-kurutma { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 3px 10px rgba(59,130,246,.3); } .bos-bildirim-btn:hover { transform: translateY(-1px); filter: brightness(1.08); } /* ── 18. SAYFA GİRİŞ ANİMASYONU — 14 May Aşama 3 #16 ile silindi. @keyframes cardReveal + .makine-kart animation + 9 satır nth-child stagger tamamı DEAD: 11-tasarimsal:1020 .makine-kart{animation:fadeInSoft} cardReveal'i eziyor, 11-tasarimsal:1030-1038 stagger'i .02-.18s'den 0s'e zorluyor, 11-tasarimsal:1024 body[data-fleet=large] animation:none !important. @keyframes cardReveal hiçbir yerde referans yok → unused. */ /* ── Stat ikonları — sembolik karakterler ── */ .stat-ikon { font-size: 20px; font-weight: 700; line-height: 1; font-style: normal; opacity: .75; } .si-bos { color: #059669; } .si-dolu { color: #dc2626; font-size: 22px; } .si-bitti { color: #d97706; } .si-koptu { color: #7c3aed; } /* ════════════════════════════════════════════════════════════ GLASSMORPHISM SİSTEMİ ════════════════════════════════════════════════════════════ */ /* ── Filtre çubuğu — en güncel tanım (!important kaldırıldı — base 123 + 1492 hepsi !important'sız; dark mode bg 2561'e bırakıldı) ── */ .filtre-bar-wrap { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 72%, transparent); /* backdrop-filter 11-tasarimsal:480-486 light blur(10) saturate(150) + dark blur(8) saturate(140) eziyor — eski blur(9) saturate(170) DEAD */ border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); padding: 8px 20px 10px; margin-left: -20px; margin-right: -20px; box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 30%, transparent), 0 4px 12px rgba(0,0,0,.03); } /* ── Admin panel top bar — glass (!important kaldırıldı — base !important'sız) ── */ .admin-topbar { background: color-mix(in srgb, var(--surface) 85%, transparent); /* backdrop-filter 11-tasarimsal:492-494 blur(8) saturate(140) eziyor — eski saturate(160) DEAD */ border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } /* ── Admin tabs — glass pill ── */ .admin-tabs { background: color-mix(in srgb, var(--surface3) 80%, transparent); /* backdrop-filter 11-tasarimsal:496-498 blur(6) eziyor (identik değer — redundant) */ border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } /* Mobil .modal animasyonu yukarıdaki "MODAL Mobil bottom-sheet" bloğuna taşındı (refactor 20 Nis). .modal-overlay.acik .modal transform translateY(0) base 330'da zaten var (scale(1) farkı görsel sıfır). */ /* ── Koyu modda glass daha parlak (!important kaldırıldı — [data-tema="koyu"] specificity yeterli) ── */ [data-tema="koyu"] .modal { background: color-mix(in srgb, var(--surface) 82%, transparent); border-color: color-mix(in srgb, var(--border2) 50%, transparent); border-top-color: color-mix(in srgb, #fff 8%, transparent); } [data-tema="koyu"] header { background: color-mix(in srgb, var(--bg) 70%, transparent); } [data-tema="koyu"] .filtre-bar-wrap { background: color-mix(in srgb, var(--bg) 65%, transparent); } /* ── Floating bar — en iyi glass (!important kaldırıldı; backdrop-filter 11-tasarimsal:500-504 group ile blur(8)'e ezildi — eski blur(14) saturate(200) brightness(1.05) DEAD) ── */ .sira-kartim-wrap { background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid color-mix(in srgb, var(--border2) 55%, transparent); border-top: 1px solid color-mix(in srgb, #fff 15%, transparent); } [data-tema="koyu"] .sira-kartim-wrap { border-top-color: color-mix(in srgb, #fff 8%, transparent); } /* ── Toast / Hub chip / Kbd panel glass — backdrop-filter rules 11-tasarimsal:500-508 group selector (blur 8) ile ezildi. Eski .toast blur(8) redundant; .hub-chip blur(6) ve .kbd-panel blur(10) saturate(160) DEAD. Sadece background+border'lar live. ── */ .toast { background: color-mix(in srgb, var(--text) 92%, transparent); } .hub-chip { background: color-mix(in srgb, var(--surface) 80%, transparent); border-color: color-mix(in srgb, var(--border) 60%, transparent); } .kbd-panel { background: color-mix(in srgb, var(--surface) 85%, transparent); border-color: color-mix(in srgb, var(--border) 60%, transparent); } /* Aşama 1.E (3 May): .rapor-dropdown-menu glass override silindi — selector ölü. */ /* ── PWA banner — glass (backdrop-filter 11-tasarimsal:500-504 group blur(8) eziyor — eski blur(10) saturate(160) DEAD) ── */ .pwa-banner { background: color-mix(in srgb, var(--surface) 88%, transparent); border-color: color-mix(in srgb, var(--border2) 60%, transparent); box-shadow: 0 12px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1); } /* ════════════════════════════════════════════════════════════ SVG İKON SİSTEMİ + MİKRO ANİMASYONLAR ════════════════════════════════════════════════════════════ */ /* Stat kartı SVG ikonlar */ .stat-ikon { display: flex; align-items: center; justify-content: center; } .stat-ikon svg { width: 22px; height: 22px; } .si-bos svg { stroke: #059669; } .si-dolu svg { stroke: #dc2626; } .si-bitti svg { stroke: #d97706; } .si-koptu svg { stroke: #7c3aed; } /* Buton içi SVG ikon */ .btn-ikon { display: inline-flex; align-items: center; width: 15px; height: 15px; margin-right: 5px; vertical-align: middle; flex-shrink: 0; } .btn-ikon svg { width: 100%; height: 100%; } /* Filtre dot SVG */ .filtre-svg-dot { width: 7px; height: 7px; flex-shrink: 0; } /* ── MİKRO ANİMASYON 1: ÇALIŞAN MAKİNE — SU DALGASI ── */ .mk-dolu::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; /* üst şerit — zaten var */ } /* ── MİKRO ANİMASYON 4: BİTTİ KARTI ARKA PLAN ── */ .mk-bitti { position: relative; } .mk-bitti::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle at 50% 100%, color-mix(in srgb, var(--sari) 12%, transparent) 0%, transparent 65% ); animation: bittiParlama 2.4s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes bittiParlama { 0%,100% { opacity: .6; } 50% { opacity: 1; } } /* ── BOŞLUK: dalga elementi için kart overflow hidden olmalı ── */ .makine-kart { overflow: hidden; } body.kompakt-mod .mk-bitti::after { display: none; } /* ── v174: Kompakt modda kalan süre + teslim al görünür (kritik bilgi) Progress bar, program chip, durum metni gizli kalır — sadeleştirme ── */ body.kompakt-mod .makine-kart { min-height: 92px; gap: 2px; padding: 8px 6px 7px; } /* v200 OMAR (29 Nis): KRİTİK BUG FIX — kazara bitişik yazılmış `body.kompakt-mod { font-size: 10px; padding: 3px 7px; margin-top: 3px; }` kuralı kaldırıldı. Kompakt mod açıkken TÜM SAYFA font'unu 10px'e düşürüyordu (yazılar okunmuyordu). Yorum (üstte) sadece "kart sadeleştirme" diyor — body geneli için bilinçli tasarım değildi, parse hatası. */ /* 4 May 1D: !important kaldırıldı — body.kompakt-mod .sira-badge specificity (0,0,2,0) zaten .sira-badge (0,0,1,0) override eder + source order 09→10. Redundant. */ body.kompakt-mod .sira-badge { font-size: 10px; padding: 1px 4px; }/* ════════════════════════════════════════════════════════════ EMPTY STATE v2 — İLLÜSTRASYON SİSTEMİ ════════════════════════════════════════════════════════════ */ .empty-state-v2 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 24px 28px; text-align: center; gap: 8px; } .es-illus { width: 180px; height: 130px; margin-bottom: 8px; opacity: .9; transition: opacity .3s; } .es-illus svg { width: 100%; height: 100%; } .empty-state-v2:hover .es-illus { opacity: 1; } .es-baslik { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.01em; } .es-alt { font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.5; max-width: 220px; } /* ════════════════════════════════════════════════════════════ CHART.JS FİNTECH TEMA ════════════════════════════════════════════════════════════ */ /* Chart konteyner yumuşak arka plan */ .dongu-chart-canvas-wrap, .teknik-chart-wrap { border-radius: 14px; overflow: hidden; position: relative; } .dongu-chart-canvas-wrap canvas, .teknik-chart-wrap canvas { display: block; } /* Döngü chart başlık badge güncelleme */ .dongu-chart-baslik { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; margin-bottom: 10px; font-size: 11px; font-weight: 700; color: var(--text); } #dongu-chart-avg { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); background: var(--surface3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; } /* Enerji pane içi grafik wrapper */ #op-pane-enerji .admin-card { overflow: hidden; } /* ── ÖZET STRIP MOBIL KOMPAKT ── */ @media (max-width: 640px) { .ozet-strip { flex-wrap: nowrap; /* Yatay tut, kaydır */ overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; margin-bottom: 12px; scrollbar-width: none; padding-bottom: 2px; /* scroll bar için */ } .ozet-kart { min-width: 110px; /* Kaydırınca görünür genişlik */ flex-shrink: 0; padding: 9px 10px; } .ozet-kart .lbl { font-size: 7px; letter-spacing: .06em; margin-bottom: 3px; } .ozet-kart .val { font-size: 18px; } .ozet-kart .sub { font-size: 10px; margin-top: 2px; } /* Feature kartlar mobilde 2'li grid — 3 kart var, 4'lü grid kartları çok küçük yapıyordu */ .features-section .features-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .features-section .feature-card { padding: 12px; } .features-section .feature-icon { font-size: 18px; margin-bottom: 3px; } .features-section .feature-title { font-size: 10px; } .features-section .feature-desc { font-size: 10px; } } /* "STAT KART KÜÇÜK VERSİYON" + mobil silindi (refactor 20 Nis) — sonraki "TEK SATIRDA 4 KUTU" bloğu (~3015) zaten tam ezici override yapıyordu. */ /* ════ STAT KART — TEK SATIRDA 4 KUTU ════ Bu kural tüm önceki tanımları ezer. Hesap: 360px ekran, 4 kart, 5 gap@4px = 340px / 4 = 85px/kart Dolgu dahil en küçük anlamlı görünüm. */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; } .stat-card { border-radius: 10px; min-width: 0; /* grid overflow önle */ overflow: hidden; } .stat-ust { margin-bottom: 2px; flex-wrap: nowrap; } .stat-val { letter-spacing: -.04em; white-space: nowrap; } .stat-label { overflow: hidden; text-overflow: ellipsis; display: block; } .stat-ikon svg { width: 12px; height: 12px; flex-shrink: 0; } /* 480px altı .stat-label font — base değerler (.stats grid + .stat-val + .stat-card padding) sonraki @media 480 bloğunda eziliyor */ @media (max-width: 480px) { .stat-label { font-size: 5.5px; } } /* ── v1.8 BUGFIX #2: filtre-bos-mesaj stili ────────────────────── JS display toggle yaptığında ham HTML görünmesini önler */ #filtre-bos-mesaj { grid-column: 1 / -1; /* grid içinde tam genişlik */ padding: 8px 0; } #filtre-bos-mesaj .empty-state-v2 { padding: 40px 24px; } .sikayet-btn { width: 100%; padding: 6px 10px; font-size: 11px; font-weight: 700; color: var(--muted); background: transparent; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; text-align: center; } .sikayet-btn:hover { color: var(--kirmizi); border-color: var(--kirmizi); background: var(--kirmizi-bg, #fff5f5); } /* ── #20 color-mix FALLBACK — iOS Safari <15.4 ve eski tarayıcılar ── color-mix desteklenmediğinde kritik UI elementleri için sabit renkler. box-shadow/filter gibi dekoratif kullanımlar intentionally atlandı — layout bozulmuyor, sadece gölge efektleri kaybolur. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { /* Kart durum arka planları */ .mk-bos { background: #f0fff4 !important; } .mk-dolu { background: #fff5f5 !important; } .mk-bitti { background: #fffff0 !important; } [data-tema="koyu"] .mk-bos { background: #1a2e22 !important; } [data-tema="koyu"] .mk-dolu { background: #2d1a1a !important; } [data-tema="koyu"] .mk-bitti { background: #2d2a1a !important; } /* Yoğunluk barometresi */ .yogunluk-serit.sakin { background: #f0fff4 !important; border-color: #68d391 !important; } .yogunluk-serit.orta { background: #fffff0 !important; border-color: #ecc94b !important; } .yogunluk-serit.yogun { background: #fff5f5 !important; border-color: #fc8181 !important; } .yogunluk-serit.cok-yogun { background: #fff5f5 !important; border-color: #e53e3e !important; } /* Isı haritası hücreleri */ .hc-1 { background: #e0f7fa !important; } .hc-2 { background: #b2ebf2 !important; } .hc-3 { background: #4dd0e1 !important; } .hc-4 { background: #00acc1 !important; } .hc-5 { background: #0097a7 !important; } .hc-6 { background: #006064 !important; } .hc-7 { background: #01579b !important; } /* Modal cam efekti */ .modal { background: white !important; } [data-tema="koyu"] .modal { background: #1e2130 !important; } } /* ── wear-rozet (Az Yorulmuş rozeti) ── */ .wear-rozet { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: #d1fae5; color: #065f46; margin-top: 3px; text-align: center; display: inline-block; } [data-tema="koyu"] .wear-rozet { background: #166534; color: #4ade80; } /* ── prefers-reduced-motion — vestibüler bozukluk erişilebilirlik ── 15 May v2.73v: animation-duration/iteration-count + transition-duration 3 property DEAD (11-tasarimsal:696-702 later source aynı !important eziyor). scroll-behavior sadece burada tanımlı → LIVE kalan tek property. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } } /* (kapasite-detay gizleme silindi — class artık CSS'te de yok, FAZ 1.5) */ body:not(.admin-mod) .stats-wrap { flex-direction: column; align-items: stretch; } /* bos-banner: öğrenci modunda daha küçük, inline ──────────────── */ body:not(.admin-mod) .bos-banner { padding: 8px 14px; border-radius: 10px; font-size: 12px; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; } body:not(.admin-mod) .bos-banner-ikon { font-size: 16px; } body:not(.admin-mod) .bos-banner-text strong { font-size: 12px; } /* ── YENİ ADMIN PANEL: CANLI SEKMESİ ─────────────────────────────────────── */ /* Gelişmiş dropdown kaldırıldı — yerini op-tabs aldı */ /* Hızlı aksiyon bar */ .canli-aksiyonlar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .canli-aksiyon-btn { padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; } .canli-aksiyon-btn:hover { background: var(--surface2); } .canli-aksiyon-btn.aktif { background: var(--text); color: var(--bg); } .canli-aksiyon-btn.aksiyon-bosalt { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border-color: #059669; } .canli-aksiyon-btn.aksiyon-bosalt:hover { background: linear-gradient(135deg, #059669, #047857); } .canli-aksiyon-btn.aksiyon-filtre { border-color: var(--kirmizi-b); color: var(--kirmizi); } /* Admin makine kart ızgarası */ .admin-makine-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; } @media (min-width: 900px) { .admin-makine-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .admin-makine-grid { grid-template-columns: 1fr; gap: 12px; } .adm-kart-no { font-size: 18px; } .adm-kart-tip { font-size: 13px; } .adm-kart-durum { font-size: 14px; } .adm-kart-akim { font-size: 15px; } } /* Admin kart */ .adm-kart { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .2s, border-color .2s; } .adm-kart-ust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .adm-kart-no { font-family: 'Space Mono', monospace; font-size: 15px; font-weight: 700; color: var(--text); } .adm-kart-tip { font-size: 11px; color: var(--muted); font-weight: 700; flex: 1; } .adm-kart-durum { font-size: 11px; font-weight: 700; } .adm-kart-akim { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--muted); font-weight: 700; } /* Admin kart butonları */ .adm-kart-butonlar { display: flex; gap: 6px; flex-wrap: wrap; } .adm-btn { flex: 1; min-width: 64px; padding: 8px 4px; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; font-family: 'Nunito', sans-serif; } .adm-btn-ok { background: var(--yesil); color: #fff; } .adm-btn-ok:hover { background: #2f855a; } .adm-btn-warn { background: var(--surface2); color: var(--sari); border: 1px solid var(--sari-b); } .adm-btn-warn:hover { background: color-mix(in srgb, var(--sari) 15%, var(--surface)); } .adm-btn:active { transform: scale(0.96); } /* Olay mini satırları */ .olay-mini-satir { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .olay-mini-satir:last-child { border-bottom: none; } .olay-mini-text { color: var(--muted); line-height: 1.3; } /* Kontrol sekmesi ayarlar */ .ayarlar-wa-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } /* ── SAĞ DETAY ÇEKMECESİ ────────────────────────────────────────────────── */ .sag-cekmece-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: var(--z-modal-deeper); } .sag-cekmece-overlay.acik { display: block; } .sag-cekmece { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: var(--surface); border-left: 1px solid var(--border); z-index: calc(var(--z-modal-deeper) + 1); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow: hidden; } .sag-cekmece.acik { transform: translateX(0); } .sag-cekmece-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sag-cekmece-baslik { font-size: 15px; font-weight: 700; color: var(--text); } .sag-cekmece-alt { font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 700; } .sag-cekmece-kapat { background: none; border: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; } .sag-cekmece-kapat:hover { background: var(--surface2); } .sag-cekmece-icerik { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; } .cek-blok { background: var(--surface2); border-radius: 12px; padding: 12px 14px; } .cek-alt-baslik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; } .cek-satir { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .cek-satir:last-child { border-bottom: none; } .cek-lbl { color: var(--muted); font-weight: 700; } .cek-val { font-weight: 700; color: var(--text); } .cek-aksiyonlar { display: flex; flex-direction: column; gap: 8px; } .cek-btn { width: 100%; padding: 12px; border: none; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .15s; } .cek-btn-ok { background: var(--yesil); color: #fff; } .cek-btn-ok:hover { background: #2f855a; } .cek-btn-warn { background: var(--surface2); color: var(--sari); border: 1.5px solid var(--sari-b); } .cek-btn-warn:hover { background: color-mix(in srgb, var(--sari) 12%, var(--surface)); } .cek-btn-detay { background: var(--surface2); color: var(--text); border: 1px solid var(--border); } .cek-btn-detay:hover { background: var(--surface3); } .cek-btn:active { transform: scale(0.97); } .cek-dongu-satir { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); gap: 8px; } .cek-dongu-satir:last-child { border-bottom: none; } /* ── ÖNCELİK MOTORU ─────────────────────────────────────────────────────── */ .oncelik-grup { border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .oncelik-kritik { background: color-mix(in srgb, var(--kirmizi) 8%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--kirmizi) 25%, var(--border)); } .oncelik-dikkat { background: color-mix(in srgb, var(--sari) 8%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--sari) 25%, var(--border)); } .oncelik-baslik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; } .oncelik-satir { /* v200 (29 Nis): tek transition tanımı — eskiden iki ayrı satır vardı, ikincisi birinciyi eziyordu → padding-left animasyonu (hover sola kayma) kaybediyordu. */ transition: padding-left .15s ease, background .12s ease; display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 6px; font-size: 13px; } .oncelik-satir:last-child { border-bottom: none; } .oncelik-satir:hover { background: var(--surface2); padding-left: 6px; } .oncelik-icon { font-size: 15px; flex-shrink: 0; } .oncelik-text { flex: 1; font-weight: 700; color: var(--text); } .oncelik-ok { color: var(--muted); font-size: 16px; } /* ── MOBİL ADMİN ALT NAVİGASYON ─────────────────────────────────────────── */ .admin-bottom-nav { display: none; /* masaüstünde gizli */ position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); z-index: var(--z-modal-deep); padding: 0 4px env(safe-area-inset-bottom, 0px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; } .admin-bottom-nav::-webkit-scrollbar { display: none; } @media (max-width: 768px) { body.admin-mod .admin-bottom-nav { display: flex; } body.admin-mod .admin-tabs { display: none; } /* üstteki tab bar gizle */ body.admin-mod .admin-panel { padding-bottom: 70px; } /* alt nav için boşluk */ } .abn-btn { flex: 1; flex-shrink: 0; /* v169: kaydırma için küçülme engeli */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px 6px; background: none; border: none; cursor: pointer; transition: all .15s; border-radius: 0; } .abn-btn.aktif .abn-icon { transform: scale(1.15); } .abn-btn.aktif .abn-label { color: var(--red); font-weight: 700; } /* v163: mobil bottom nav rol bazlı görünürlük — desktop .admin-tab-btn ile paralel */ .abn-btn.teknik-only { display: none; } .abn-btn.memur-only { display: none; } body.rol-teknik .abn-btn.teknik-only { display: flex; } body.rol-memur .abn-btn.memur-only { display: flex; } body.rol-super .abn-btn.teknik-only { display: flex; } body.rol-super .abn-btn.memur-only { display: flex; } .abn-icon { font-size: 20px; line-height: 1; } .abn-label { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; } /* ── OPERASYon ALT SEKMELER ─────────────────────────────────────────────── */ .op-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 2px solid var(--border); padding-bottom: 0; } .op-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .15s; border-radius: 8px 8px 0 0; } .op-tab-btn:hover { color: var(--text); background: var(--surface2); } .op-tab-btn.aktif { color: var(--red); border-bottom-color: var(--red); } .op-pane { display: none; } .op-pane.aktif { display: block; } /* ── #1 Mobil admin kart butonları + #2 sağ çekmece tam ekran (!important kaldırıldı) ──── */ @media (max-width: 640px) { .adm-btn { padding: 12px 6px; font-size: 14px; min-height: 44px; } .adm-kart-butonlar { gap: 10px; } .adm-kart { padding: 14px; } .sag-cekmece { width: 100vw; overflow-x: hidden; } .sag-cekmece-icerik { padding: 20px 16px; } } /* ── #5 Toggle switch (wa-toggle, Kontrol sekmesi) ──────────────────────── */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-knob { position: absolute; cursor: pointer; inset: 0; background: var(--border2, #cbd5e0); border-radius: 26px; transition: background .25s; } .toggle-knob::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .25s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } input:checked + .toggle-knob { background: var(--yesil); } input:checked + .toggle-knob::before { transform: translateX(22px); } /* ── #6 btn-primary ─────────────────────────────────────────────────────── */ .btn-primary { background: var(--yesil); color: #fff; border: none; border-radius: 12px; padding: 12px 18px; font-weight: 700; font-size: 13px; font-family: 'Nunito', sans-serif; cursor: pointer; transition: all .15s; width: 100%; } .btn-primary:hover { background: #2f855a; transform: translateY(-1px); } .btn-primary:active { transform: scale(0.97); } /* ── Mobilde ağır animasyonları yavaşlat (!important kaldırıldı — source order yeterli) ─── */ @media (max-width: 768px) { body::before { animation: none; } /* v200 OMAR (29 Nis): body::after animation-duration 8s kaldırıldı — aşağıdaki speed patch bloğunda (line ~3725) `10s !important` zaten override ediyordu. Dead duplicate. */ } /* ── stats-tek-satir: halka kaldırıldı, 4 chip tek satır ───── */ .stats.stats-tek-satir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 0; } .stats.stats-tek-satir .stat-card { padding: 10px 12px; } .stats.stats-tek-satir .stat-val { font-size: 26px; } .stats.stats-tek-satir .stat-label { font-size: 8px; } /* v200 (29 Nis): Mobilde 4 kart tek satırda + tam ekran genişliği. .wrap parent'ı 20px yan padding uyguluyor (line 50). stats-wrap'a -20px negatif margin ile bu kenar boşluğu telafi edilir → kartlar tam ekran genişliğinde dağılır. Padding/gap minimal, ikonlar küçük → her kart sığacak. */ @media (max-width: 640px) { .stats-wrap { margin-left: -20px; margin-right: -20px; padding: 0 4px; } .stats.stats-tek-satir { gap: 4px; } .stats.stats-tek-satir .stat-card { padding: 10px 4px; min-width: 0; border-radius: 10px; } .stats.stats-tek-satir .stat-val { font-size: 22px; } .stats.stats-tek-satir .stat-label { font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; } /* SVG ikonlar dar ekranda yer kaplar — küçült */ .stats.stats-tek-satir .stat-ikon { width: 14px; height: 14px; } .stats.stats-tek-satir .stat-ikon svg { width: 14px; height: 14px; } .stats.stats-tek-satir .stat-ust { gap: 4px; } } @media (max-width: 400px) { .stats-wrap { padding: 0 2px; } .stats.stats-tek-satir { gap: 3px; } .stats.stats-tek-satir .stat-val { font-size: 19px; } .stats.stats-tek-satir .stat-label { font-size: 8px; } .stats.stats-tek-satir .stat-card { padding: 8px 3px; } } /* ── Olay akışı "Daha Fazla" butonu ─────────────────────────── */ .olay-daha-btn { display: block; width: 100%; margin-top: 8px; padding: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 700; font-family: 'Nunito', sans-serif; cursor: pointer; transition: background .15s, color .15s; text-align: center; } .olay-daha-btn:hover { background: var(--surface3); color: var(--text); } /* ── #1 Öncelik motoru baskın görünüm ───────────────────────── */ #oncelik-motoru:not(:empty) { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .oncelik-kritik { border-left: 3px solid var(--kirmizi); padding-left: 10px; margin-bottom: 8px; } .oncelik-dikkat { border-left: 3px solid var(--sari, #f59e0b); padding-left: 10px; } .oncelik-baslik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; } .oncelik-satir { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background .12s; margin-bottom: 2px; } .oncelik-satir:hover { background: var(--surface2); } .oncelik-icon { font-size: 14px; flex-shrink: 0; } .oncelik-text { flex: 1; font-size: 12px; font-weight: 700; color: var(--text); } .oncelik-ok { color: var(--muted); font-size: 16px; } /* ── #4 Kirli alan vurgusu ───────────────────────────────────── */ .admin-config-input.kirli { border-color: var(--sari, #f59e0b); box-shadow: 0 0 0 2px rgba(245,158,11,.15); } .admin-config-input.kaydedildi { border-color: var(--yesil); box-shadow: 0 0 0 2px rgba(16,185,129,.15); animation: inputKaydet .6s ease; } @keyframes inputKaydet { 0%,100% { border-color: var(--yesil); } 50% { box-shadow: 0 0 0 4px rgba(16,185,129,.25); } } /* ── #7 Kompakt mod legend ───────────────────────────────────── */ .kompakt-legend { display: none; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 10px; font-weight: 700; } body.kompakt-mod .kompakt-legend { display: flex; } .kl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .kl-item { display: flex; align-items: center; gap: 4px; color: var(--muted); } /* ── 320px dar ekranda stat etiketleri ──────────────────────── */ @media (max-width: 360px) { .stat-label { font-size: 6px; letter-spacing: 0 ; } .stat-val { font-size: 20px; } } /* #4: Admin modda PWA banner alt nav üstünde görünsün */ body.admin-mod .pwa-banner { bottom: 76px; } /* #1: Glassmorphism koyu modda daha opak — okunabilirlik (!important kaldırıldı) backdrop-filter blur(7) DEAD: 11-tasarimsal:476-478 [data-tema=koyu] header blur(8) eziyor. background da 11-tasarimsal:1353-1355 [data-tema=koyu] header { bg(--bg) 88% } eziyor → DEAD. */ [data-tema="koyu"] .admin-bottom-nav { background: color-mix(in srgb, var(--surface) 96%, transparent); } /* #4: Scrollbar stilleri — Firefox, Edge */ * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Gizli scrollbar'lar korunuyor (!important kaldırıldı — class specificity * üzerinde) */ .filtre-bar, .ozet-strip, .filtre-durum, .op-tabs { scrollbar-width: none; } /* ════════════════════════════════════════════════════════════ GÖRSEL İYİLEŞTİRMELER — f61 ════════════════════════════════════════════════════════════ */ /* ── 1. Empty state animasyonu ───────────────────────────── */ @keyframes esFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: .75; } 33% { transform: translateY(-6px) rotate(-3deg); opacity: 1; } 66% { transform: translateY(-3px) rotate(2deg); opacity: .9; } } @keyframes esPulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .es-illus { animation: esFloat 4s ease-in-out infinite; } .es-illus svg { filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--text) 8%, transparent)); } /* Filtre boş → soru işareti pulse */ .empty-state-v2[data-tip="filtre"] .es-illus { animation: esPulse 2.2s ease-in-out infinite; } /* ── 2. Öncelik motoru titreşen ünlem ────────────────────── */ @keyframes unlemSallan { 0%, 100% { transform: rotate(0deg) scale(1); } 15% { transform: rotate(-12deg) scale(1.2); } 30% { transform: rotate(10deg) scale(1.1); } 45% { transform: rotate(-8deg) scale(1.15); } 60% { transform: rotate(6deg) scale(1.05); } 75% { transform: rotate(-4deg) scale(1); } } .oncelik-satir.kritik-satir .oncelik-icon { display: inline-block; animation: unlemSallan 1.8s cubic-bezier(.36,.07,.19,.97) infinite; transform-origin: center bottom; } /* ── 3. Yoğunluk barometresi — gradient ibre ────────────── */ .yogunluk-progress-bg { position: relative; height: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--yesil) 20%, var(--border)), color-mix(in srgb, var(--sari) 20%, var(--border)), color-mix(in srgb, var(--kirmizi) 20%, var(--border)) ); border-radius: 6px; } .yogunluk-progress-fill { background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444); transition: width .8s cubic-bezier(.4, 0, .2, 1); height: 100%; border-radius: 6px; position: relative; } /* İbre — dolum ucundaki küçük top */ .yogunluk-progress-fill::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: white; box-shadow: 0 0 0 2px #64748b, 0 2px 4px rgba(0,0,0,.3); transition: right .8s cubic-bezier(.4,0,.2,1); } [data-tema="koyu"] .yogunluk-progress-fill::after { background: var(--surface3); box-shadow: 0 0 0 2px var(--muted), 0 2px 4px rgba(0,0,0,.5); } /* .makine-kart overflow:hidden duplicate silindi — 2828 zaten tanımlamıştı. .stat-card overflow:hidden de duplicate silindi — base'de zaten var (~satır 2044) */ /* 4 May 1F: .makine-kart transition + hover bloğu silindi — 11-tasarimsal:1015 transition'ı (0.18s, daha hızlı) ve :1020 hover'ı (translateY(-3px)) override eder. 0.35s + scale(1.012) tasarımı dead. */ /* ── 6. Floating bar glassmorphism — 14 May Aşama 3 ile temizlendi. .sag-cekmece (blur 20 saturate 160) + .sira-kartim-wrap (blur 18 saturate 160) backdrop-filter rules buradaydı; 11-tasarimsal.css:500-504 group selector .hub-chip+.kbd-panel+.pwa-banner+.sira-kartim-wrap+.sag-cekmece { blur 8px } ikisini de eziyordu — full dead. */ /* ── 7. Koyu mod yıldız arka plan ───────────────────────── */ @keyframes yildizKayan { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-30px) translateX(15px); } } [data-tema="koyu"] .wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.18) 0%, transparent 100%), radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,.12) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 55% 10%, rgba(255,255,255,.15) 0%, transparent 100%), radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.1) 0%, transparent 100%), radial-gradient(1px 1px at 85% 40%, rgba(255,255,255,.14) 0%, transparent 100%), radial-gradient(1px 1px at 20% 90%, rgba(255,255,255,.08) 0%, transparent 100%), radial-gradient(2px 2px at 90% 15%, rgba(255,255,255,.1) 0%, transparent 100%), radial-gradient(1px 1px at 45% 55%, rgba(255,255,255,.12) 0%, transparent 100%); animation: yildizKayan 25s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { [data-tema="koyu"] .wrap::before { animation: none; } } @media (max-width: 768px) { [data-tema="koyu"] .wrap::before { opacity: .6; } } /* v200 (29 Nis): KÜÇÜK #5 boş .sira-kartim-wrap kuralı kaldırıldı — sira-kartim-wrap normal flow'da, floating bar değil; bu blok hiç çalışmıyordu. */ /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 11 — TASARIMSAL İYİLEŞTİRMELER (8 Düzenleme) ──────────────────────────────────────────────────────────────────────────── ① Hızlandırılmış değişkenler (line ~3561 :root duplicate), ② Backdrop-filter hafifletme (header/filtre 20px → 10px blur), ③ Glassmorphism merkezi (alt header'lar tek surface), ④ Type scale (--t-xs/sm/md/lg/xl + line ~4099 :root duplicate), ⑤ Progress ribbon (kart üst şerit yenileme), ⑥ Radius/spacing tutarlılık (--r-xs/sm/md/lg, --s-1...5), ⑦ Hub-chip mikro mıknatıs efekti, ⑧ Focus ring premium (--red brand, .25 opacity). Aşama 1'de :root konsolidasyonu burayı etkiler. Aşama 2 hedef: 01-base.css (değişkenler) + 02-kartlar.css (uygulama) ══════════════════════════════════════════════════════════════════════════ */ /* ================================================================ TASARIMSAL İYİLEŞTİRMELER — 8 Düzenleme ================================================================ */ /* ── 1. STAT KARTLARI — Daha okunabilir hiyerarşi ── */ /* TASARIMSAL stat-* + .hub-dot: !important kaldırıldı — base'ler !important'sız, source order yeterli */ .stat-val { font-size: 38px; line-height: 1; } .stat-label { font-size: 10px; letter-spacing: .08em; } /* .stat-card padding:16px 14px 13px DEAD — 11-tasarimsal:987 var(--s-3) var(--s-4) ile aynı dosyada eziliyor (sonraki source). 14 May Aşama 3 #17 silindi. */ @media (max-width: 480px) { .stat-val { font-size: 30px; } .stat-card { padding: 12px 10px 10px; } } /* ── 2. HUB ÇEVRİMİÇİ NOKTASI — Daha büyük ve belirgin pulse ── */ .hub-dot { width: 10px; height: 10px; } .hub-dot.aktif { box-shadow: 0 0 0 3px color-mix(in srgb,var(--yesil) 30%,transparent); animation: hubDotPulse 1.8s ease-in-out infinite; } @keyframes hubDotPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--yesil) 60%,transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb,var(--yesil) 0%,transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--yesil) 0%,transparent); } } [data-tema="koyu"] .hub-dot.aktif { animation: hubDotPulse 1.8s ease-in-out infinite; } /* ── 4. YOĞUNLUK BAROMETRESİ — Daha kalın ve görünür (!important kaldırıldı) ── */ .yogunluk-serit { padding: 11px 18px; border-radius: 14px; font-size: 13px; border-left-width: 5px; } .yogunluk-serit .yogunluk-ikon { font-size: 20px; } .yogunluk-serit .yogunluk-durum { font-size: 13px; font-weight: 700; } /* 4 May 1F: glowBittiV2 keyframe + .mk-bitti override silindi — L337 tek nokta olarak kartGlowBitti animasyonunu (will-change ile birlikte) tutuyor. */ /* ── 7. TOAST — Alt nav çakışma koruması (!important kaldırıldı) ── */ body:not(.admin-mod) .toast-wrap { bottom: 20px; right: 16px; } @media (max-width: 480px) { body:not(.admin-mod) .toast-wrap { bottom: 16px; left: 12px; right: 12px; align-items: center; } } /* ── 8. DARK MODE ARKA PLAN GRADYANLARI — Daha belirgin ── */ [data-tema="koyu"] body::before { background: radial-gradient(ellipse at 15% 50%, #4ade8018 0%, transparent 55%), radial-gradient(ellipse at 85% 20%, #f8717118 0%, transparent 55%), radial-gradient(ellipse at 55% 85%, #c084fc18 0%, transparent 55%), radial-gradient(ellipse at 70% 55%, #22d3ee0e 0%, transparent 45%); /* 08 → 18 opacity — karanlık temada da hissedilir */ } /* ── SSS (Sık Sorulan Sorular) ── */ .sss-section{background:var(--surface);border:1px solid var(--border);border-radius:16px;margin:20px 0;overflow:hidden;box-shadow:var(--shadow-sm);} /* OMAR 10 May denetim — div→button: button default stilleri (background, border) override. width:100% layout korunur, text-align:left button default center'i nötralize eder. */ .sss-baslik{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text);user-select:none;transition:background .15s;background:transparent;border:none;font-family:inherit;text-align:left;} .sss-baslik:hover{background:var(--surface2);} /* :focus-visible global rule (line 186) `outline:!important` ezer — per-component override etkisiz, kaldırıldı */ .sss-ok{font-size:20px;font-weight:400;color:var(--muted);transition:transform .25s;line-height:1;} .sss-acik .sss-ok{transform:rotate(90deg);} .sss-govde{display:none;border-top:1px solid var(--border);} .sss-acik .sss-govde{display:block;} .sss-item{border-bottom:1px solid var(--border);} .sss-item:last-child{border-bottom:none;} .sss-soru{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 18px;font-size:12px;font-weight:700;cursor:pointer;color:var(--text);transition:background .15s;gap:8px;background:transparent;border:none;font-family:inherit;text-align:left;} .sss-soru:hover{background:var(--surface2);} /* :focus-visible global rule (line 186) `outline:!important` ezer — per-component override etkisiz, kaldırıldı */ .sss-soru-acik{color:var(--kirmizi);} .sss-plus{font-size:18px;font-weight:300;flex-shrink:0;color:var(--muted);transition:transform .2s;} .sss-soru-acik .sss-plus{transform:rotate(45deg);color:var(--kirmizi);} .sss-cevap{display:none;padding:0 18px 14px 18px;font-size:12px;color:var(--muted);line-height:1.7;border-top:1px dashed var(--border);} .sss-cevap-acik{display:block;} /* 2.68: Detaylı kılavuz linki — SSS yetersiz kalanlar için */ .sss-kilavuz-link{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--surface2);border-top:1px solid var(--border);flex-wrap:wrap;} .kilavuz-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#c0392b,#e74c3c);color:#fff;text-decoration:none;border-radius:20px;font-size:12px;font-weight:700;box-shadow:0 4px 10px rgba(192,57,43,0.25);transition:transform .15s,box-shadow .15s;flex-shrink:0;} .kilavuz-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(192,57,43,0.35);} .sss-kilavuz-aciklama{font-size:11px;color:var(--muted);line-height:1.4;} /* ================================================================ GÖRSEL DÜZELTMELER — Kapsamlı İnceleme Sonrası ================================================================ */ /* ── 2. HEADER MOBİL — Buton boyutları küçült + 3. Grid orphan (!important kaldırıldı) ─── */ @media (max-width: 480px) { /* Çıkış butonu — sadece × ikonu */ #btn-logout { font-size: 0; padding: 6px 9px; } #btn-logout::after { content: '✕'; font-size: 12px; font-weight: 700; } /* Demo butonu — emoji only */ #demo-btn-global { font-size: 0; padding: 5px 8px; } #demo-btn-global::after { content: '🎭'; font-size: 13px; } .mod-btn { font-size: 10px; padding: 4px 8px; } .hub-chip { padding: 5px 9px; font-size: 10px; } .ses-btn, .tema-btn { width: 30px; height: 30px; font-size: 14px; } /* 2 sütunda tek kalan son eleman — tam genişlik */ .makine-grid .makine-kart:nth-child(2n+1):last-child { grid-column: 1 / -1; max-width: calc(50% - 4px); justify-self: start; } } /* 3 sütunlu grid'de tek kalan → orta sütuna hizala */ @media (min-width: 481px) and (max-width: 768px) { .makine-grid .makine-kart:nth-child(3n+1):last-child { grid-column: 2 / 3; } } /* ── 4. STAT LABEL — Taşma koruma (!important kaldırıldı) ── */ .stat-label { white-space: normal; line-height: 1.2; word-break: break-word; } /* ── 5. MK-DOLU KENARLIKI — 3px (149'daki 4px artık !important'sız, source order yeterli) ── */ .mk-dolu { border-left: 3px solid var(--kirmizi); } /* ── 6. ZAMAN FORMAT — Hizalama ─────────────────────────────── surehuman() JS'de düzeltildi — CSS'de ek şey gerekmez */ /* v151: Erişilebilirlik — klavye odağı (A1) 14 May fix (P2.4): outline `!important` → `--focus-ring` CSS variable kullanır. Component bazlı override mümkün; default kırmızı, danger zone'da kırmızı kalır, admin panelde accent rengiyle daha sönük. Erişilebilirlik korunur (3px + offset). */ :focus-visible { outline: 3px solid var(--focus-ring, var(--kirmizi)); outline-offset: 2px; border-radius: 6px; } .admin-panel :focus-visible { --focus-ring: var(--adm-accent, var(--kirmizi)); } /* v151: Heatmap en yoğun hücre vurgusu (G2) */ .heatmap-cell { position: relative; } .heatmap-cell.heatmap-en-yogun { border: 2px solid var(--sari); box-shadow: 0 0 12px color-mix(in srgb, var(--sari) 40%, transparent); animation: enYogunPulse 2s ease-in-out infinite alternate; } .heatmap-cell.heatmap-en-yogun::after { content: '🔥'; position: absolute; top: -8px; right: -8px; font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } @keyframes enYogunPulse { from { box-shadow: 0 0 8px color-mix(in srgb, var(--sari) 30%, transparent); } to { box-shadow: 0 0 16px color-mix(in srgb, var(--sari) 55%, transparent); } } /* v152: Kart "Bugün X kullanım" badge (G3) */ .bugunku-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--mavi, #3b82f6) 12%, transparent); color: var(--mavi, #3b82f6); font-size: 10px; font-weight: 700; border-radius: 6px; font-family: 'Space Mono', monospace; } /* ═══════════════════════════════════════════════════════ Mobil Modal Scroll Fix — snap-back bug düzeltmesi v149 — 19 Nis 2026 ═══════════════════════════════════════════════════════ */ @media (max-width: 640px) { .modal-overlay { overflow: hidden; } .modal { overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; /* Backdrop blur scroll'u yavaşlatıyor — mobilde kapat */ backdrop-filter: none; -webkit-backdrop-filter: none; /* Background !important kalmalı — [data-tema="koyu"] .modal (0,2,1) override eder. */ background: var(--surface) !important; max-height: 85vh; height: auto; /* Alt navigasyon (bottom-nav) + güvenli alan için padding */ padding-bottom: calc(100px + env(safe-area-inset-bottom, 16px)); touch-action: pan-y; scrollbar-width: thin; } .modal::-webkit-scrollbar { width: 3px; } .modal::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 25%, transparent); border-radius: 999px; } .modal-overlay.acik .modal { will-change: auto; } } /* ═══════════════════════════════════════════════════════ Günün Pulsu — yoğunluk bar alt satırı v154 — 19 Nis gece ═══════════════════════════════════════════════════════ */ .gunluk-pulse { display: flex; flex-basis: 100%; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--text) 12%, transparent); font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.4; flex-wrap: wrap; } .gunluk-pulse strong { color: var(--text); font-weight: 800; font-family: 'Space Mono', monospace; letter-spacing: -0.02em; } .gp-ikon { font-size: 14px; flex-shrink: 0; } .gp-metin { flex: 1; min-width: 0; } @media (max-width: 480px) { .gunluk-pulse { font-size: 11px; gap: 6px; } } /* Veri yokken gizle */ .gunluk-pulse.bos { display: none; } /* ══════════════════════════════════════════════════════════════════════ v168 DEPRECATEd — animasyonlu kart sistemi geçti, yeni CSS altta ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ v168 ANİMASYONLU KART SİSTEMİ — Yenianimasyon.html'den adapte edildi Çamaşır: dönen tambur + su dalgası + köpük Kurutma: dönen fan + ısı dalgaları ══════════════════════════════════════════════════════════════════════ */ /* ── Kart temel — mevcut .makine-kart genişletmesi ── */ .makine-kart { isolation: isolate; overflow: hidden; } .mk-bitti { animation: kartGlowBitti 2s ease-in-out infinite; will-change: box-shadow, border-color; } @keyframes kartGlowBitti { 0%,100% { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--yesil) 20%, var(--border)); } 50% { box-shadow: 0 4px 20px rgba(16,185,129,.2), var(--shadow-sm); border-color: color-mix(in srgb, var(--yesil) 40%, var(--border)); } } /* ══════════════════════════════════════════════════════════════════════ KOMPAKT MOD — animasyonlar kapalı ══════════════════════════════════════════════════════════════════════ */ body.kompakt-mod .mk-bitti { animation: none !important; } /* ══════════════════════════════════════════════════════════════════════ PREFERS REDUCED MOTION ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .mk-bitti { animation: none !important; } } /* ══════════════════════════════════════════════════════════════════════ MOBİL — tambur/fan boyutları küçültülür ══════════════════════════════════════════════════════════════════════ */ /* v196: `svg svg { width: 22px; height: 22px }` kuralı kaldırıldı — DOM'da nested SVG yok (script.js render'larında her SVG tek seviye). Kural pratik olarak hiçbir element ile eşleşmiyordu, ancak Chart.js gibi kütüphaneler gelecekte nested SVG kullanırsa istenmeyen boyut zorlaması yapacaktı. */ /* ══════════════════════════════════════════════════════════════ v169 YAMALAR ══════════════════════════════════════════════════════════════ */ /* Onboarding tour */ #onboarding-overlay { animation: fadeIn .3s ease; } /* v249 (CSS FAZ 2 Aşama 3): arizaSheetCikar + arizaBackdropCikar dead keyframes silindi — v189 ariza bottom-sheet animasyonları kullanılmıyor (referans yok). Aşırı yere satır temizliği (~150 byte). */ .ariza-tip-btn:hover { background: var(--surface3) !important; border-color: var(--border2) !important; transform: translateX(2px); } .ariza-tip-btn:active { transform: scale(.98); } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } /* Boş makine bildirim grubu */ .bos-bildirim-grup { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bos-bildirim-aciklama { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; } /* Selamlama sadece öğrenci modunda */ body.admin-mod #selam-banner { display: none !important; } /* Sparkline bar */ #modal-sparkline-wrap { align-items: flex-end; gap: 3px; } /* Mobil nav: butonlar küçülmesin */ .admin-bottom-nav .abn-btn { flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════ EKSTRa ÖNERİLER — kod kalitesi iyileştirmeleri ══════════════════════════════════════════════════════════════ */ /* #8: toast tip renkleri + ikon */ .toast { display: flex; align-items: center; gap: 10px; } .toast-ikon { flex-shrink: 0; width: 16px; height: 16px; } .toast-msg { flex: 1; } .toast-basari { background: linear-gradient(135deg, #059669, var(--yesil)); color: #fff; border: none; } .toast-hata { background: linear-gradient(135deg, #b91c1c, var(--kirmizi)); color: #fff; border: none; } .toast-uyari { background: linear-gradient(135deg, #b45309, var(--sari)); color: #1a0a00; border: none; } .toast-bilgi { background: var(--surface); color: var(--text); border: 1px solid var(--border); } /* #2: onayDiyalog animasyonları */ @keyframes onayGir { from { opacity: 0 } to { opacity: 1 } } @keyframes onayScale { from { transform: scale(.9); opacity: 0 } to { transform: scale(1); opacity: 1 } } /* #3: tema butonu — textContent emoji yerine CSS ile ikon kontrolü */ .tema-btn::before { content: '🌙'; } [data-tema="koyu"] .tema-btn::before { content: '☀️'; } /* #10: Offline/Online banner — max-height animasyonlu geçiş */ .global-offline { max-height: 0; overflow: hidden; padding: 0 16px; transition: max-height .35s ease, padding .35s ease, opacity .25s ease; opacity: 0; } .global-offline.gorulur { max-height: 60px; padding: 10px 16px; opacity: 1; } .global-online { background: var(--yesil); color: #fff; max-height: 0; overflow: hidden; padding: 0 16px; text-align: center; font-size: 13px; font-weight: 700; border-radius: 0 0 10px 10px; /* v200 OMAR (29 Nis): z-index 70→110. body::after shimmer z-index:100 üstündeydi, "Çevrimiçi" yeşil banner shimmer şeridinin altında kalıyordu. 10 May normalize: --z-filtre-active variable (110, shimmer 100 üstünde). */ position: sticky; top: 0; z-index: var(--z-filtre-active); transition: max-height .3s ease, padding .3s ease, opacity .2s ease; opacity: 0; } .global-online.gorulur { max-height: 60px; padding: 10px 16px; opacity: 1; } /* ── v169-css-fix (22 Nis) ── • features-section .features-grid mobil override: repeat(4,1fr) → repeat(2,1fr) 3 kart varken 4'lü grid kartları çok küçük yapıyordu. • #selam-banner satır ~930 dead code kaldırıldı (duplicate tanım). Aktif tanım satır ~1087'de: padding/font-size/display/gap/min-height tam. */ /* ══════════════════════════════════════════════════════════════ QR PANEL kaldırıldı (v185); bozuk artıkları temizlendi (v188). Kritik bug: orphan `img` global selektörü → tüm resimler 140x140. ══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ SPEED PATCH Bu blok style.css'in sonunda durmalı. Performans için transition, blur ve will-change değerlerini override eder. ═══════════════════════════════════════════════════════ */ /* ── 1. TEMEL HIZLANDIRILMIŞ DEĞİŞKENLER ───────────────── Aşama 1 (3 May): üst :root bloğuna konsolide edildi. */ /* ── 2. BACKDROP-FILTER HAFIFLETME ─────────────────────── En büyük GPU maliyeti. Blur değerleri yarıya indirildi, görsel fark gözle neredeyse ayırt edilemez. */ header { backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); } [data-tema="koyu"] header { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .filtre-bar-wrap { backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); } [data-tema="koyu"] .filtre-bar-wrap { backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .modal { backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } .admin-topbar { backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .admin-tabs { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hub-chip, .kbd-panel, .pwa-banner, .sira-kartim-wrap, .sag-cekmece { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .toast { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ── 3. TRANSİTION SÜRELERİ ───────────────────────────── .2s+ → .12s, .3s+ → .18s, .15s → .1s */ /* 4 May 1F: .makine-kart { transition: ... } silindi — L1015'te aynı dosyada daha gelişmiş tanım var (border-color eklenmiş, var(--ease-out)). Dead. */ /* Filtre / sekme butonları — anlık */ .filtre-btn { transition: all .1s var(--ease-out); } .tip-seg-btn { transition: all .1s var(--ease-out); } .mod-btn { transition: all .1s var(--ease-out); } .admin-tab-btn { transition: all .1s var(--ease-out); } .op-tab-btn { transition: all .1s var(--ease-out); } .canli-aksiyon-btn{ transition: all .1s var(--ease-out); } .abn-btn { transition: all .1s var(--ease-out); } .mini-btn { transition: all .1s var(--ease-out); } .btn-primary { transition: all .1s var(--ease-out); } .kapat-btn { transition: all .1s var(--ease-out); } .bos-bildirim-btn { transition: all .1s var(--ease-out); } /* Admin panel pane geçişi */ .admin-pane { transition: opacity .15s ease, transform .15s ease; } /* Modal aç/kapa */ .modal-overlay { transition: opacity .15s ease; } .modal { transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), opacity .15s ease; } /* Sağ çekmece */ .sag-cekmece { transition: transform .2s cubic-bezier(.4, 0, .2, 1); } /* Kart aksiyonlar */ .adm-btn { transition: all .1s var(--ease-out); } .cek-btn { transition: all .1s var(--ease-out); } .bos-id-chip { transition: transform .12s var(--ease-spring), box-shadow .12s ease; } /* Feature / özet / ayarlar kartları */ .feature-card { transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); } .admin-card { transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); } .ayarlar-kart { transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); } .ozet-kart { transition: none; } /* statik — animasyon yok */ /* Hub dot */ .hub-dot { transition: all .25s ease; } /* Tema butonu */ .tema-btn { transition: transform .15s var(--ease-spring); } /* Yoğunluk barometresi — daha hızlı renk geçişi */ .yogunluk-serit { transition: background .3s var(--ease-out), border-color .3s var(--ease-out); } .yogunluk-progress-fill { transition: width .5s cubic-bezier(.4, 0, .2, 1); } /* ── 4. ANI TAKTİL GERİBİLDİRİM (ACTIVE STATES) ───────── Dokunmada <16ms tepki — hiçbir animasyon beklenmiyor */ .makine-kart:active { transform: scale(.97) !important; transition: transform .06s ease !important; } .filtre-btn:active { transform: scale(.93) !important; transition: transform .06s ease !important; } .tip-seg-btn:active { transform: scale(.93) !important; transition: transform .06s ease !important; } .mod-btn:active { transform: scale(.93) !important; transition: transform .06s ease !important; } .admin-tab-btn:active { transform: scale(.93) !important; transition: transform .06s ease !important; } .mini-btn:active { transform: scale(.93) !important; transition: transform .06s ease !important; } .adm-btn:active { transform: scale(.94) !important; transition: transform .06s ease !important; } .cek-btn:active { transform: scale(.96) !important; transition: transform .06s ease !important; } .bos-id-chip:active { transform: scale(.9) !important; transition: transform .06s ease !important; } .canli-aksiyon-btn:active { transform: scale(.94) !important; transition: transform .06s ease !important; } .stat-card:active { transform: scale(.96) !important; transition: transform .06s ease !important; } .abn-btn:active { transform: scale(.92) !important; transition: transform .06s ease !important; } /* ── 5. WILL-CHANGE — GPU KATMANINA AL ───────────────── Sadece gerçekten animate olan elementler dahil. .makine-kart'ta will-change KALDIRILDI — 28 kart = 28 GPU katmanı çok fazla bellek harcatıyordu. Sadece hover anında GPU'ya alınır. */ .makine-kart:hover { will-change: transform; } /* hover'da GPU'ya al */ .makine-kart:active { will-change: auto; } /* sonra bırak */ .modal { will-change: transform, opacity; } .sag-cekmece { will-change: transform; } .admin-pane { will-change: opacity, transform; } /* Animasyon bittikten sonra will-change serbest bırak */ .admin-pane.aktif { will-change: auto; } .modal-overlay:not(.acik) .modal { will-change: auto; } /* ── 6. CONTAIN — LAYOUT/STYLE İZOLASYONU ───────────── Tarayıcı bu elementlerin dışını tekrar hesaplamak zorunda kalmaz — reflow maliyeti düşer. */ .makine-kart { contain: layout style; } .stat-card { contain: layout style; } .olay-item { contain: layout style; } .admin-card { contain: layout style; } .ayarlar-kart { contain: layout style; } .skeleton-kart { contain: layout style; } /* Admin panel lazy render KALDIRILDI — content-visibility:auto ilk açılışta layout hesabını geciktiriyordu, startup yavaşlamasına neden oldu. Admin paneli her zaman render edilsin, DOM hazır kalsın. */ /* .admin-panel { content-visibility: auto; } — DEVRE DIŞI */ /* 2.63 fix: SSS section'da content-visibility:auto kaldırıldı. * `contain-intrinsic-size: 0 200px` placeholder gerçek içerik yüksekliğinden * (~1500px) çok az → scroll'la viewport'a girince büyük layout-shift oluyor, * kullanıcı "arkaplan titriyor / büyük beyaz boşluk" hissi alıyor. SSS tek seferlik * render maliyeti düşük; lazy render ROI'si negatif. */ /* .sss-section { content-visibility: auto; contain-intrinsic-size: 0 200px; } */ /* ── 7. MOBİL AĞIR ANİMASYON KAPATMA ─────────────────── Mobilde GPU kısıtlı — dalga, ring spin, arka plan kapat */ @media (max-width: 768px) { /* Arka plan animasyonu zaten style.css'te kapanıyor, sadece emin ol */ body::before { animation: none !important; } body::after { animation-duration: 10s !important; } /* Kart reveal stagger mobilde gereksiz — hepsini 0 delay yap */ .makine-grid .makine-kart { animation-delay: 0s !important; } /* Glow efektleri mobilde sadece statik shadow */ .mk-dolu { animation: none !important; box-shadow: 0 2px 8px color-mix(in srgb,#ef4444 14%,transparent); } .mk-bitti { animation: none !important; box-shadow: 0 2px 8px color-mix(in srgb,#f59e0b 18%,transparent); } /* 15 May v2.73v — Backdrop-filter mobil kapatma DEAD: 13-son.css:906-919 (later source, aynı @media, aynı !important) header/.filtre-bar-wrap/.hub-chip/ .sira-kartim-wrap/.toast TÜM 5 selector'ı eziyor. Dead block silindi. */ } /* ── 8. SKELETON SHIMMER HIZLANDIRMA ──────────────────── Daha kısa döngü = daha "canlı" yükleme hissi */ @keyframes premiumShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } .skeleton-kart::after { animation: premiumShimmer 1s ease-in-out infinite; /* 1.6s → 1s */ } .skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 18vw, 220px), 1fr)); gap: clamp(8px, 1.2vw, 14px); padding: 4px 0 20px; } /* ── 9. FİLTRE/SEKME GEÇİŞ ANİMASYONU ──────────────── Mevcut filtrele → içerik gizlenip gösterilirken fade */ .makine-kart[style*="display: none"] { pointer-events: none; } /* Filtre sayacı renk geçişi hızlı */ .f-count { transition: color .08s ease; } /* Aktif filtre butonu hızlı feedback */ .filtre-btn.aktif, .tip-seg-btn.aktif { transition: all .08s var(--ease-out); } /* ── 10. SCROLL PERFORMANSI ────────────────────────── Kaydırma sırasında paint skip */ .olay-liste, .admin-olay-mini-liste, .sag-cekmece-icerik, .teknik-table-wrap, .olay-timeline { will-change: scroll-position; transform: translateZ(0); /* kendi composite layer */ } /* ── 11. FONT RENDER OPTİMİZASYONU ───────────────── Font yüklenmeden önce sistem fontu göster */ body { font-family: 'Nunito', system-ui, -apple-system, sans-serif; } /* ── 12. REDUCED MOTION — SIFIR GECİKME ─────────── Erişilebilirlik + en hızlı deneyim seçeneği */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════ 13. PERFORMANS TİERİ — data-perf-tier ile CSS kontrolü JS (index.html inline) sayfa yüklenmeden tier'ı yazar, bu CSS kuralları CSS yüklenir yüklenmez etkinleşir. ══════════════════════════════════════════════════════ */ /* ── LOW TİER (≤2GB RAM veya ≤2 çekirdek) ───────────── Tüm animasyon ve geçişler kapalı, sıfır GPU harcaması */ [data-perf-tier="low"] *, [data-perf-tier="low"] *::before, [data-perf-tier="low"] *::after { animation: none !important; transition: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; text-shadow: none !important; box-shadow: none !important; } /* Temel gölgeleri koru — UI okunabilirliği için */ [data-perf-tier="low"] .makine-kart { box-shadow: 0 1px 4px rgba(0,0,0,.1) !important; } [data-perf-tier="low"] .modal { box-shadow: 0 4px 16px rgba(0,0,0,.2) !important; } /* Dokunma geri bildirimi — animasyon yok, opacity ile */ [data-perf-tier="low"] .makine-kart:active, [data-perf-tier="low"] .filtre-btn:active, [data-perf-tier="low"] .mod-btn:active, [data-perf-tier="low"] .abn-btn:active { opacity: 0.65 !important; transform: none !important; transition: none !important; } /* Arka plan gradient efekti kapat */ [data-perf-tier="low"] body::before, [data-perf-tier="low"] body::after { display: none !important; } /* Kart animasyonları kapat */ [data-perf-tier="low"] .mk-dolu, [data-perf-tier="low"] .mk-bitti { animation: none !important; } [data-perf-tier="low"] .site-logo { animation: none !important; } [data-perf-tier="low"] .hub-dot.aktif { animation: none !important; } [data-perf-tier="low"] .bos-banner-ikon { animation: none !important; } /* ── MID TİER (≤4GB RAM veya ≤4 çekirdek) ───────────── Ağır efektler kapalı, hafif geçişler açık */ [data-perf-tier="mid"] body::before { display: none !important; } [data-perf-tier="mid"] body::after { animation-duration: 20s !important; } /* v200 (29 Nis): boş `[data-perf-tier="mid"]` selector'u kaldırıldı — yorum bloğu araya girince CSS parser invalid sayıyordu. Backdrop-filter aşağıda. */ /* Backdrop-filter hafiflet */ [data-perf-tier="mid"] header, [data-perf-tier="mid"] .filtre-bar-wrap { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } [data-perf-tier="mid"] .hub-chip, [data-perf-tier="mid"] .sira-kartim-wrap, [data-perf-tier="mid"] .sag-cekmece { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Kart will-change zaten hover-bazlı, admin-pane kapat */ [data-perf-tier="mid"] .admin-pane { will-change: auto; } /* Transition süreleri yüksek tier ile aynı ama kart animasyonsuz */ [data-perf-tier="mid"] .mk-dolu, [data-perf-tier="mid"] .mk-bitti { animation: none !important; box-shadow: var(--shadow-sm) !important; } /* ── YAVAŞ AĞ (2G/3G veya saveData) ─────────────────── Görsel yük minimuma indirilir */ [data-slow-net="1"] .skeleton-kart::after { animation: none !important; } [data-slow-net="1"] body::before { display: none !important; } [data-slow-net="1"] .site-logo { animation: none !important; } /* Skeleton yerine solid renk — daha az repaint */ [data-save-data="1"] .skeleton-kart { background: var(--surface2) !important; } [data-save-data="1"] .skeleton-kart::after, [data-save-data="1"] .skeleton-kart::before { display: none !important; } /* ── 14. DEVICE-MEMORY MEDIA QUERY (CSS-only fallback) ─ JS çalışmazsa bile düşük bellekli cihazları yakalar */ @media (max-device-memory: 2gb) { body::before { display: none !important; } .makine-kart { animation: none !important; will-change: auto !important; } header, .filtre-bar-wrap { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } } @media (prefers-reduced-data: reduce) { .skeleton-kart::after { animation: none !important; } body::before { display: none !important; } .site-logo { animation: none !important; } } /* ════════════════════════════════════════════════════════════ v174: DURUM RENKLERİ — KARTLAR GERİ BELİRGİN Önceki build'de ::before şerit tanımlıydı ama rengi yoktu (::after gizli + ::before renksiz = kart renksiz görünüyordu). Bu blok cascade'in EN SONUNDA — diğer override'ları ezer. ════════════════════════════════════════════════════════════ */ /* Eski ::after şeridi: 1066'da `display: block !important` glass overlay olarak yeniden etkin. Önceki `display:none` satırı !important ezildiği için DEAD — kaldırıldı. */ /* Yeni ::before = üst renk şeridi (4px, tüm genişlik) */ .makine-kart::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 4px; border-radius: 16px 16px 0 0; z-index: 2; pointer-events: none; } .mk-bos::before { background: var(--yesil); } .mk-dolu::before { background: var(--kirmizi); } .mk-bitti::before { background: var(--sari); animation: sariPulse 1.8s ease-in-out infinite; } .mk-bakim::before { background: var(--bakim); } .mk-koptu::before { background: var(--koptu); opacity: .55; } /* Light mode arka plan tint (%7-10, hafif ama görünür) */ .mk-bos { background: linear-gradient(160deg, color-mix(in srgb, #10b981 8%, var(--surface)), var(--surface) 70%); } .mk-dolu { background: linear-gradient(160deg, color-mix(in srgb, #ef4444 7%, var(--surface)), var(--surface) 70%); } .mk-bitti{ background: linear-gradient(160deg, color-mix(in srgb, #f59e0b 10%, var(--surface)), var(--surface) 70%); } .mk-bakim{ background: linear-gradient(160deg, color-mix(in srgb, #8b5cf6 7%, var(--surface)), var(--surface) 70%); } .mk-koptu{ background: linear-gradient(160deg, color-mix(in srgb, #6b7280 6%, var(--surface)), var(--surface) 70%); } /* Dark mode: DÜŞÜK doygun tint (%5-7), SOLID (gradient yok) — kalan süre chip'i ile karışmasın */ [data-tema="koyu"] .mk-bos { background: color-mix(in srgb, var(--yesil) 7%, var(--surface)); } [data-tema="koyu"] .mk-dolu { background: color-mix(in srgb, var(--kirmizi) 6%, var(--surface)); } [data-tema="koyu"] .mk-bitti { background: color-mix(in srgb, var(--sari) 8%, var(--surface)); } [data-tema="koyu"] .mk-bakim { background: color-mix(in srgb, var(--bakim) 7%, var(--surface)); } [data-tema="koyu"] .mk-koptu { background: color-mix(in srgb, var(--koptu) 5%, var(--surface)); } /* 4 May 1F: 5 durum border-left tanımı silindi — 04-kart.css:17-21 zaten aynı değerlerle tanımlıyor (source order: 04 önce → bu blok tamamen dead duplicate). */ /* Tüm kenarlar için durum rengi — border-left zaten 04-kart'ta tanımlı, burası sadece üst/sağ/alt. */ .mk-bitti { border-color: color-mix(in srgb, var(--sari) 30%, var(--border)); } .mk-dolu { border-color: color-mix(in srgb, var(--kirmizi) 25%, var(--border)); } .mk-bos { border-color: color-mix(in srgb, var(--yesil) 25%, var(--border)); } .mk-bakim { border-color: color-mix(in srgb, var(--bakim) 25%, var(--border)); } /* Dark'ta sariPulse çok parlak — amplitude düşür */ [data-tema="koyu"] .mk-bitti::before { animation: sariPulseKoyu 2.2s ease-in-out infinite; } @keyframes sariPulseKoyu { 0%,100% { opacity: .85; } 50% { opacity: .55; } } /* KOMPAKT MODDA da renk — ::before üst nokta yerine yan şerit olsun (1340. satırdaki kural ::before'u merkez noktaya çeviriyordu; onu override edip tekrar üst şerit yapıyoruz, çünkü kompakt kartta da renk kimliği şart) */ body.kompakt-mod .makine-kart::before { content: ''; width: 100%; height: 3px; position: absolute; top: 0; left: 0; right: 0; margin: 0; border-radius: 12px 12px 0 0; display: block; box-shadow: none; } /* Kompakt mod .makine-kart position:relative — 04-kart:17 base'de zaten relative, defansif duplicate silindi (14 May Aşama 3 #15). */ /* .kart-ust::before nokta + .mk-* renkler + .kart-ust flex reorder — 14 May Aşama 3 #15 ile silindi. .kart-ust DOM'da render edilmiyor (kart-render.js v179 mk-sol-panel + mk-sag-panel kullanıyor). Tüm bu kompakt kurallar DEAD idi. */ /* v174: Admin header actions wrapper — inline display:flex kaldırıldı (admin-only'yi eziyordu). Admin modunda flex davranışı bu kuralla geri geliyor. */ body.admin-mod .admin-header-actions { display: flex; } /* ════════════════════════════════════════════════════════════ v175 PREMIUM DOKUNUŞLAR ════════════════════════════════════════════════════════════ */ /* ── ① TABULAR NUMBERS + FONT RENDERING ── Rakamlar aynı genişlikte — sayaç değişiminde zıplamaz. antialiased: Nunito macOS/iOS'ta daha keskin görünür. */ body { font-feature-settings: 'tnum' 1, 'kern' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── ② COLORED SHADOW + KATMAN 1 FAKE GLASS (v176) ── Her kart: outer colored glow + inset üst highlight (cam kenarı ışığı) + (dark'ta) inset alt shadow (derinlik). Gerçek backdrop-filter YOK → perf bedava. Etkisi en net dark modda: kart camdan kesilmiş gibi görünür. */ .mk-bos { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.04), 0 8px 20px -12px color-mix(in srgb, var(--yesil) 22%, transparent); } .mk-dolu { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.04), 0 10px 28px -10px color-mix(in srgb, var(--kirmizi) 24%, transparent); } .mk-bitti { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -10px color-mix(in srgb, var(--sari) 30%, transparent); } .mk-bakim { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.04), 0 8px 20px -12px color-mix(in srgb, var(--bakim) 20%, transparent); } .mk-koptu { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.04), 0 4px 12px -8px rgba(0,0,0,.08); } /* Hover'da highlight biraz parlasın + shadow derinleşsin */ .mk-bos:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.05), 0 14px 32px -10px color-mix(in srgb, var(--yesil) 30%, transparent); } .mk-dolu:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.05), 0 16px 40px -8px color-mix(in srgb, var(--kirmizi) 32%, transparent); } .mk-bitti:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.75),0 2px 4px rgba(0,0,0,.05), 0 18px 44px -8px color-mix(in srgb, var(--sari) 38%, transparent); } .mk-bakim:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.05), 0 14px 32px -10px color-mix(in srgb, var(--bakim) 28%, transparent); } /* Dark mode: üst highlight sessiz (rgba beyaz .06-.10) + alt siyah inset derinlik + dış shadow daha koyu */ [data-tema="koyu"] .mk-bos { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.35), 0 12px 28px -12px color-mix(in srgb, var(--yesil) 28%, transparent); } [data-tema="koyu"] .mk-dolu { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.35), 0 14px 34px -10px color-mix(in srgb, var(--kirmizi) 30%, transparent); } [data-tema="koyu"] .mk-bitti { box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.35), 0 16px 38px -10px color-mix(in srgb, var(--sari) 36%, transparent); } [data-tema="koyu"] .mk-bakim { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.35), 0 12px 28px -12px color-mix(in srgb, var(--bakim) 26%, transparent); } [data-tema="koyu"] .mk-koptu { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.35), 0 6px 16px -8px rgba(0,0,0,.2); } [data-tema="koyu"] .mk-bos:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.4), 0 18px 40px -8px color-mix(in srgb, var(--yesil) 36%, transparent); } [data-tema="koyu"] .mk-dolu:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.4), 0 20px 48px -6px color-mix(in srgb, var(--kirmizi) 38%, transparent); } [data-tema="koyu"] .mk-bitti:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.4), 0 22px 52px -6px color-mix(in srgb, var(--sari) 46%, transparent); } [data-tema="koyu"] .mk-bakim:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.4), 0 18px 40px -8px color-mix(in srgb, var(--bakim) 34%, transparent); } /* ── ④⑥ TYPE SCALE + RADIUS/SPACING TUTARLILIK ── Aşama 1 (3 May): üst :root bloğuna konsolide edildi. 14 May Aşama 3 #3: .makine-kart { border-radius+padding } silindi — v179 normal mod (line 1366) padding:0+radius:var(--r-md) ve kompakt mod (line 1702) padding:0+radius:12px ikisi de buradaki değerleri eziyordu. DEAD. */ /* Stat kartları */ .stat-card { border-radius: var(--r-md); padding: var(--s-3) var(--s-4); } .stat-val { letter-spacing: -.03em; } /* premium: daha sıkışık — font-size base'de (satır ~112) */ .stat-label { font-size: var(--t-xs); letter-spacing: .05em; } /* Pill'ler tutarlı radius */ .bos-bildirim-btn { border-radius: var(--r-sm); } /* ── ⑤ MİKROANİMASYON SADELEŞME ── Eskiden: her renderMachinesFull'da 8+ kart stagger ile zıplıyordu, update'ler de aynı animasyonu tetikliyordu — çok gürültülü. Yeni: hafif fade-in, stagger yok, sadece ilk yüklemede. */ @keyframes fadeInSoft { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } .makine-kart { animation: fadeInSoft .22s var(--ease-out) both; } /* 11 May v2.72p — R1: 12+ makine senaryosunda kart fade animation kapanır (40 makine paint thrash önleme). data-fleet attribute kart-render.js'te set edilir. */ body[data-fleet="large"] .makine-kart { animation: none !important; } /* R2: kompakt-mod .mk-bitti dotP (box-shadow animasyonu) → opacity-only sariPulse'a geçirildi. dotP layout-paint thrash riski, sariPulse GPU compositor-friendly. */ body.kompakt-mod[data-fleet="large"] .mk-bitti::before { animation: sariPulse 1.8s ease-in-out infinite !important; } /* Hover micro-interaction — yumuşak lift */ .makine-kart { transition: transform .18s cubic-bezier(.2, .9, .4, 1.08), box-shadow .18s var(--ease-out), border-color .18s ease; } .makine-kart:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--border) 40%, color-mix(in srgb, currentColor 20%, transparent)); } /* Active tap feedback — hızlı geri tepme */ .makine-kart:active { transform: translateY(0) scale(.985); transition: transform .08s ease; } /* ── ③ INLINE SVG İKONLARI — platform-agnostic, emoji değil ── */ .ic-inline { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; flex-shrink: 0; opacity: .85; } .ic-inline svg { width: 100%; height: 100%; } /* v175: cache bust markeri — son değişiklik tabular + shadow + svg + scale */ /* ── KATMAN 1 FAKE GLASS — background overlay ── Durum arka plan tint'inin ÜSTÜNE hafif beyaz gradient ekle. Üstten başlar, ortaya doğru sönümlenir → cam yüzeyinden yukarıdan gelen ışık yansıması gibi görünür. Light'ta %5-6, dark'ta %3. */ .makine-kart { position: relative; } .makine-kart::after { /* ::after glass overlay structural — display:block !important 09-v18 cascade ezme + position/top/right/height/radius/z-index/pointer-events. Background gradient için: light → :1140 (lighter 0.05/0.02), dark → :1130 ([data-tema=koyu], 0.025/0.01). Buradaki eski 0.08/0.04 gradient her iki modda override ediliyordu — 14 May Aşama 3 #4 ile silindi. */ content: ''; display: block !important; position: absolute; top: 0; left: 0; right: 0; height: 50%; border-radius: var(--r-md, 14px) var(--r-md, 14px) 0 0; pointer-events: none; z-index: 0; } /* Kompakt modda overlay daha kısa (kart alçak) */ body.kompakt-mod .makine-kart::after { height: 40%; border-radius: 12px 12px 0 0; } /* Düşük tier cihazlarda fake glass devre dışı — sade kalır */ [data-perf-tier="low"] .makine-kart::after { display: none !important; } /* ═════════════════════════════════════════════════════════════ v176: KARANLIK MOD KAPSAMLI DÜZELTMELER Screenshot'tan tespit edilen 5 sorun: 1. Skeleton arka planı light-gri kalıyordu (JS fix ile birlikte) 2. ::after glass overlay fazla parlak — beyaz sis oluşuyordu 3. Stat kartlar fazla doygun (kırmızı/yeşil/sarı/mor toy görünüm) 4. Yoğunluk barometresi çoklu border — "orta" class karmaşık 5. Admin feature-card başlık metinleri görünmüyordu ═════════════════════════════════════════════════════════════ */ /* ── 1. Yukleniyor skeleton dark uyum + veri gelince tam gizle ── */ [data-tema="koyu"] #yukleniyor { background: transparent; } [data-tema="koyu"] .skeleton-kart { background: var(--surface); border: 1px solid var(--border); } /* ── 2. ::after glass overlay dark için çok daha sessiz (% 5 → %2.5) ── */ [data-tema="koyu"] .makine-kart::after { background: linear-gradient( 180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 25%, transparent 60% ); height: 35%; } /* Light modda da biraz daha sessiz olsun — admin kartlar aşırı parlak görünüyordu */ .makine-kart::after { background: linear-gradient( 180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 30%, transparent 70% ); } /* ── 3. Stat kartların doygunluğu düşürüldü — premium sakin his ── Önceden kart zemini saturate renk + üst şerit vardı. Şimdi: - Zemin daha koyu/nötr (surface2) - Renk sadece üst şeritte - Sayı zaten renkli, ikisi yeter */ [data-tema="koyu"] .stat-card { background: var(--surface); border: 1px solid var(--border); } [data-tema="koyu"] .stat-card.s-bos, [data-tema="koyu"] .stat-card.s-dolu, [data-tema="koyu"] .stat-card.s-bitti, [data-tema="koyu"] .stat-card.s-sorun { background: var(--surface); } /* Light modda da aşırı doygun değil — delikat renk tinti */ .stat-card { background: var(--surface); } .s-bos { background: color-mix(in srgb, var(--yesil) 5%, var(--surface)); } .s-dolu { background: color-mix(in srgb, var(--kirmizi) 5%, var(--surface)); } .s-bitti { background: color-mix(in srgb, var(--sari) 6%, var(--surface)); } .s-sorun { background: color-mix(in srgb, var(--bakim) 5%, var(--surface)); } [data-tema="koyu"] .s-bos { background: color-mix(in srgb, var(--yesil) 4%, var(--surface)); } [data-tema="koyu"] .s-dolu { background: color-mix(in srgb, var(--kirmizi) 4%, var(--surface)); } [data-tema="koyu"] .s-bitti { background: color-mix(in srgb, var(--sari) 5%, var(--surface)); } [data-tema="koyu"] .s-sorun { background: color-mix(in srgb, var(--bakim) 4%, var(--surface)); } /* Stat kart inset highlight'ı da sakinleştir */ [data-tema="koyu"] .stat-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.2); } /* ── 4. Yoğunluk barometresi — tek kenarda border, aura yok ── */ [data-tema="koyu"] .yogunluk-serit { background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; } [data-tema="koyu"] .yogunluk-serit.sakin { border-left-color: var(--yesil); } [data-tema="koyu"] .yogunluk-serit.orta { border-left-color: var(--sari); } [data-tema="koyu"] .yogunluk-serit.yogun { border-left-color: var(--kirmizi); } [data-tema="koyu"] .yogunluk-serit.cok-yogun { border-left-color: #a855f7; } /* Light modda da aynı sadelik — yoğunluk şeridi tek border-left */ .yogunluk-serit { background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; } .yogunluk-serit.sakin { border-left-color: var(--yesil); } .yogunluk-serit.orta { border-left-color: var(--sari); } .yogunluk-serit.yogun { border-left-color: var(--kirmizi); } .yogunluk-serit.cok-yogun { border-left-color: #7c3aed; } /* ── 5. Admin feature-card başlık metni dark'ta parlak ── */ [data-tema="koyu"] .feature-card { background: var(--surface); border: 1px solid var(--border); } [data-tema="koyu"] .feature-title { color: var(--text); } [data-tema="koyu"] .feature-desc { color: var(--muted); } [data-tema="koyu"] .feature-desc strong { color: var(--text); } /* Admin ozet strip (En Yoğun Saat) kartı da dark uyum */ [data-tema="koyu"] .ozet-strip .ozet-kart { background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--bakim); } [data-tema="koyu"] .ozet-kart .val { color: var(--bakim); } /* ── 6. Kart üst şerit (::before) dark'ta biraz opak olsun — yumuşama ── */ [data-tema="koyu"] .mk-bos::before { background: color-mix(in srgb, var(--yesil) 85%, transparent); } [data-tema="koyu"] .mk-dolu::before { background: color-mix(in srgb, var(--kirmizi) 85%, transparent); } [data-tema="koyu"] .mk-bitti::before { background: color-mix(in srgb, var(--sari) 88%, transparent); } [data-tema="koyu"] .mk-bakim::before { background: color-mix(in srgb, var(--bakim) 85%, transparent); } /* ═════════════════════════════════════════════════════════════ v177: DARK MODE EKRAN GÖRÜNTÜSÜ SORUNLARI - Sayfa ortası açık gri → body + wrap + main-layout solid dark - "En Yoğun Saat" paneli admin modda bile çok büyük → küçült - Filtre bar glass dark'ta çalışmıyorsa solid fallback - Feature card kontrast pekişkinlik (v176 kuralları üstünde) ═════════════════════════════════════════════════════════════ */ /* ── 1. Sayfa zemini dark'a sabitlenmiş (cascade ezici) ── */ [data-tema="koyu"] html, [data-tema="koyu"] body { background: #0d1117; } [data-tema="koyu"] .wrap { background: transparent; } [data-tema="koyu"] .main-layout { background: transparent; } /* ── 2. "En Yoğun Saat" ozet-strip — admin için kompakt pill ── Önceden tam genişlik bir panel gibi duruyordu, şimdi mini chip */ body.admin-mod .ozet-strip { margin-bottom: var(--s-3, 12px); } body.admin-mod .ozet-strip .ozet-kart { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); } body.admin-mod .ozet-strip .ozet-kart .lbl { font-size: var(--t-xs, 11px); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; } body.admin-mod .ozet-strip .ozet-kart .val { font-family: 'Space Mono', monospace; font-size: var(--t-sm, 13px); font-weight: 700; color: var(--bakim); margin: 0; } body.admin-mod .ozet-strip .ozet-kart .sub { font-size: 10px; color: var(--dimmed); margin: 0; } [data-tema="koyu"] body.admin-mod .ozet-strip .ozet-kart { background: var(--surface2); border-color: var(--border2); } /* ── 3. Filtre-bar-wrap solid fallback dark'ta — blur çalışmasa bile okunabilir ── */ [data-tema="koyu"] .filtre-bar-wrap { background: color-mix(in srgb, var(--bg) 92%, var(--surface)); border-bottom: 1px solid var(--border); } /* Mobil ve low-perf tier'da zaten blur kapalı — o zaman tam solid olsun */ @media (max-width: 768px) { [data-tema="koyu"] .filtre-bar-wrap { background: var(--bg); } } [data-perf-tier="low"] [data-tema="koyu"] .filtre-bar-wrap, [data-perf-tier="mid"] [data-tema="koyu"] .filtre-bar-wrap { background: var(--bg) !important; backdrop-filter: none !important; } /* ── 4. Feature card kontrast pekişkinliği (v176 üstüne) ── */ [data-tema="koyu"] .feature-card { background: var(--surface); border: 1px solid var(--border); } [data-tema="koyu"] .feature-title { color: var(--text) !important; font-size: var(--t-sm, 13px); font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--s-1, 4px); display: block; } [data-tema="koyu"] .feature-icon { opacity: .9; } /* ── 5. Yoğunluk barometresi "orta" durumunda turuncu aura kaldır ── Screenshot'ta "Orta" turuncu kart gibi görünüyordu — aura çok güçlüydü. Şimdi sadece sol border 3px + arka plan hafif tint. */ .yogunluk-serit.orta { box-shadow: none; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--sari); } [data-tema="koyu"] .yogunluk-serit.orta { background: color-mix(in srgb, var(--sari) 5%, var(--surface)); border-left-color: var(--sari); } /* Aynı sakinlik diğer durumlar için */ .yogunluk-serit.sakin { box-shadow: none; border: 1px solid var(--border); border-left: 3px solid var(--yesil); } .yogunluk-serit.yogun { box-shadow: none; border: 1px solid var(--border); border-left: 3px solid var(--kirmizi); } .yogunluk-serit.cok-yogun{ box-shadow: none; border: 1px solid var(--border); border-left: 3px solid var(--bakim); } [data-tema="koyu"] .yogunluk-serit.sakin { background: color-mix(in srgb, var(--yesil) 5%, var(--surface)); } [data-tema="koyu"] .yogunluk-serit.yogun { background: color-mix(in srgb, var(--kirmizi) 5%, var(--surface)); } [data-tema="koyu"] .yogunluk-serit.cok-yogun { background: color-mix(in srgb, var(--bakim) 5%, var(--surface)); } /* ── 6. Header dark'ta solid fallback — sticky sırasında açık kalmasın ── */ [data-tema="koyu"] header { background: color-mix(in srgb, var(--bg) 88%, transparent); } @media (max-width: 768px) { [data-tema="koyu"] header { background: var(--bg); } } /* ═════════════════════════════════════════════════════════════ v179: YENİ KART TASARIMI — SOL RENKLİ PANEL + SAĞ İÇERİK Mockup uygulaması. Kompakt mod etkilenmez (daha spesifik). ═════════════════════════════════════════════════════════════ */ /* ── Normal mod kart: grid layout, iç padding yok (panel'ler kendi padding'lerini yönetir) ── */ body:not(.kompakt-mod) .makine-kart { display: grid; grid-template-columns: 88px 1fr; padding: 0; overflow: hidden; min-height: 160px; border-radius: var(--r-md, 14px); border: 1px solid var(--border); /* Eski background tint'lerini ez — sağ panel kendi dark bg'ye sahip */ background: var(--surface); } /* Eski dekorasyonları (top şerit, border-left tint background) ez. ::before LIVE — :813 strip background-color ezildi (kompakt-mod'da tekrar görünür). ::after EFFECTIVELY DEAD — :1062 `display: block !important` cascade'i kazanır (yüksek specificity ama !important yok burada). Glass overlay structural; kasıtlı korundu — gelecekte kompakt-mod fallback için işaret bırakıyor. Bilinçli dokunma: 14 May ASAMA 3 H maddesi. */ body:not(.kompakt-mod) .makine-kart::before { display: none; } body:not(.kompakt-mod) .makine-kart::after { display: none; } body:not(.kompakt-mod) .mk-bos, body:not(.kompakt-mod) .mk-dolu, body:not(.kompakt-mod) .mk-bitti, body:not(.kompakt-mod) .mk-bakim, body:not(.kompakt-mod) .mk-koptu { border-left: 1px solid var(--border); background: var(--surface); } [data-tema="koyu"] body:not(.kompakt-mod) .makine-kart, [data-tema="koyu"] body:not(.kompakt-mod) .mk-bos, [data-tema="koyu"] body:not(.kompakt-mod) .mk-dolu, [data-tema="koyu"] body:not(.kompakt-mod) .mk-bitti, [data-tema="koyu"] body:not(.kompakt-mod) .mk-bakim, [data-tema="koyu"] body:not(.kompakt-mod) .mk-koptu { background: var(--surface); border-color: var(--border); } /* ── SOL PANEL: büyük rakam + dikey tip etiketi ── */ .mk-sol-panel { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 8px 14px; color: #fff; position: relative; overflow: hidden; } /* Aşama 1 (3 May): tipografi turunda 64px değerleri buraya birleştirildi (line ~4997 + ~4998 @media → bu blok). Kart numarası kartın görsel anchor'ı. */ .mk-buyuk-no { font-family: 'Space Mono', ui-monospace, monospace; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.15); font-variant-numeric: tabular-nums; margin-top: 4px; } @media (max-width: 480px) { .mk-buyuk-no { font-size: 48px; margin-top: 4px; } } /* v188: Inline SVG çamaşır/kurutma logosu + dönen tambur */ .mk-tip-svg-sol { width: 32px; height: 32px; margin-bottom: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); opacity: .95; overflow: visible; } /* Tambur element'i SVG'nin merkezinde — sadece o döner, kasa sabit. 15 May v2.73w: aynı blok içi `transform-origin: 16px 18px` DEAD silindi (line altı `transform-origin: center` aynı property'i eziyor; transform-box fill-box ile center). .mk-dolu/.mk-bitti içindeki spesifik `transform-origin: 16px 18px` (line 1419/1423) farklı selector — onlar LIVE. */ .mk-tip-svg-sol .mk-tambur { transform-box: fill-box; transform-origin: center; } /* Çalışan makinede tambur döner (CSS-only, GPU compositor, sıfır CPU) */ .mk-dolu .mk-tip-svg-sol .mk-tambur { animation: tamburDon 3.5s linear infinite; transform-origin: 16px 18px; } .mk-bitti .mk-tip-svg-sol .mk-tambur { animation: tamburDon 8s linear infinite; transform-origin: 16px 18px; } @keyframes tamburDon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Kompakt mod + erişilebilirlik: animasyon kapalı */ body.kompakt-mod .mk-tip-svg-sol .mk-tambur { animation: none !important; } @media (prefers-reduced-motion: reduce) { .mk-tip-svg-sol .mk-tambur { animation: none !important; } } /* Sol panel renkleri — durum bazlı, doygun ton */ .mk-bos .mk-sol-panel { background: linear-gradient(180deg, #16a34a 0%, #10b981 55%, #059669 100%); } .mk-dolu .mk-sol-panel { background: linear-gradient(180deg, #dc2626 0%, #ef4444 55%, #b91c1c 100%); } .mk-bitti .mk-sol-panel { background: linear-gradient(180deg, #b45309 0%, #d97706 55%, #92400e 100%); } .mk-bakim .mk-sol-panel { background: linear-gradient(180deg, #7c3aed 0%, #a78bfa 55%, #6d28d9 100%); } .mk-koptu .mk-sol-panel { background: linear-gradient(180deg, #4b5563 0%, #6b7280 55%, #374151 100%); } /* Sol panel üstten ışık parlaması */ .mk-sol-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent); pointer-events: none; } /* Dark modda gradient biraz daha derin */ [data-tema="koyu"] .mk-bos .mk-sol-panel { background: linear-gradient(180deg, #15803d 0%, #16a34a 55%, #14532d 100%); } [data-tema="koyu"] .mk-dolu .mk-sol-panel { background: linear-gradient(180deg, #b91c1c 0%, #dc2626 55%, #991b1b 100%); } [data-tema="koyu"] .mk-bitti .mk-sol-panel { background: linear-gradient(180deg, #92400e 0%, #b45309 55%, #78350f 100%); } [data-tema="koyu"] .mk-bakim .mk-sol-panel { background: linear-gradient(180deg, #6d28d9 0%, #8b5cf6 55%, #5b21b6 100%); } [data-tema="koyu"] .mk-koptu .mk-sol-panel { background: linear-gradient(180deg, #374151 0%, #4b5563 55%, #1f2937 100%); } /* ── SAĞ PANEL: durum band + içerik + opsiyonel teslim butonu ── */ .mk-sag-panel { display: flex; flex-direction: column; min-width: 0; background: var(--surface); position: relative; } /* Durum band — pastel ton, sol kenarda renkli dot */ .mk-durum-band { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; font-size: 12px; font-weight: 700; letter-spacing: -.01em; border-bottom: 1px solid var(--border); } .mk-durum-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* Pastel band arka planları — light mode */ .mk-bos .mk-durum-band { background: #ecfdf5; color: #047857; } .mk-dolu .mk-durum-band { background: #fef2f2; color: #b91c1c; } .mk-bitti .mk-durum-band { background: #fffbeb; color: #92400e; } .mk-bakim .mk-durum-band { background: #f5f3ff; color: #6d28d9; } .mk-koptu .mk-durum-band { background: #f3f4f6; color: #4b5563; } .mk-bos .mk-durum-dot { background: #10b981; } .mk-dolu .mk-durum-dot { background: #ef4444; animation: dotP 1.5s infinite; } .mk-bitti .mk-durum-dot { background: #f59e0b; animation: dotP 1.2s infinite; } .mk-bakim .mk-durum-dot { background: #a78bfa; } .mk-koptu .mk-durum-dot { background: #9ca3af; } /* Dark mode band — daha sessiz + var(--surface2) üstü */ [data-tema="koyu"] .mk-bos .mk-durum-band { background: color-mix(in srgb, var(--yesil) 14%, var(--surface2)); color: var(--yesil); } [data-tema="koyu"] .mk-dolu .mk-durum-band { background: color-mix(in srgb, var(--kirmizi) 12%, var(--surface2)); color: var(--kirmizi); } [data-tema="koyu"] .mk-bitti .mk-durum-band { background: color-mix(in srgb, var(--sari) 14%, var(--surface2)); color: var(--sari); } [data-tema="koyu"] .mk-bakim .mk-durum-band { background: color-mix(in srgb, var(--bakim) 12%, var(--surface2)); color: var(--bakim); } [data-tema="koyu"] .mk-koptu .mk-durum-band { background: var(--surface2); color: var(--muted); } /* ── İçerik alanı: tip satırı + ana bilgi + progress ── */ .mk-icerik { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } /* Aşama 1 (3 May): tipografi turundaki uppercase eyebrow değerleri (line ~5018) buraya birleştirildi. */ .mk-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; } .mk-tip-lbl { display: inline-flex; align-items: center; gap: 5px; color: var(--text); min-width: 0; } .mk-tip-logo { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; } .mk-tip-svg { width: 14px; height: 14px; } .mk-tip-svg svg { width: 100%; height: 100%; } /* Admin akım chip */ .mk-akim { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); } [data-tema="koyu"] .mk-akim { background: var(--surface3); border-color: var(--border2); } /* Ana bilgi (süre / durum metni) — kartın ikinci görsel anchor'ı, tabular-nums sabit hizalama */ /* Aşama 1 (3 May): tipografi turundaki 22px değerleri (line ~5069) buraya birleştirildi. */ .mk-ana-bilgi { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.015em; line-height: 1.15; margin-top: auto; font-variant-numeric: tabular-nums; } @media (max-width: 768px) { .mk-ana-bilgi { font-size: 18px; } } @media (max-width: 480px) { .mk-ana-bilgi { font-size: 16px; } } .mk-ana-bilgi.mk-acil { color: var(--kirmizi); } .mk-ana-bilgi.mk-uzadi { color: var(--kirmizi); animation: urgentTick 0.6s ease-in-out infinite alternate; } .mk-alt-bilgi { font-size: 10px; color: var(--muted); line-height: 1.3; font-weight: 500; margin-top: 1px; } /* Progress bar — ince (3px), kart-içi */ .mk-progress-bg { height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; margin-top: 8px; } .mk-progress-fill { height: 100%; border-radius: 999px; background: var(--kirmizi); transition: width 2s linear; position: relative; overflow: hidden; } /* Akan ışık shimmer efekti */ .mk-progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); background-size: 200% 100%; animation: mkProgShim 2s linear infinite; } @keyframes mkProgShim { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } .mk-kurutma .mk-progress-fill { background: linear-gradient(90deg, #f97316, #ef4444); } .mk-camasir .mk-progress-fill { background: linear-gradient(90deg, #3b82f6, #06b6d4); } /* ── Teslim Al butonu — bitti kartında, sağ-alt mini pill ── */ .mk-teslim-btn { margin: 0 12px 12px auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; background: var(--sari); color: #78350f; border: none; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px color-mix(in srgb, var(--sari) 30%, transparent); transition: transform .1s, box-shadow .15s; align-self: flex-end; } .mk-teslim-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--sari) 40%, transparent); } .mk-teslim-btn:active { transform: scale(.96); } [data-tema="koyu"] .mk-teslim-btn { background: var(--sari); color: #1a1200; box-shadow: 0 2px 8px color-mix(in srgb, var(--sari) 40%, transparent); } /* ── Admin alt satırı — sağ panel tabanında ── */ body:not(.kompakt-mod) .makine-kart .kart-admin-alt { padding: 6px 12px 8px; border-top: 1px dashed var(--border); font-size: 10px; color: var(--muted); display: flex; gap: 8px; align-items: center; background: var(--surface); } /* ── Kart hover: sol panel biraz parlar, sağ panel açılır ── */ body:not(.kompakt-mod) .makine-kart:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--border) 50%, var(--text)); } body:not(.kompakt-mod) .makine-kart:hover .mk-sol-panel { filter: brightness(1.08); } /* Durum renginde hover glow */ body:not(.kompakt-mod) .makine-kart.mk-bos:hover { box-shadow: var(--shadow-md), 0 0 20px color-mix(in srgb, var(--yesil) 22%, transparent); border-color: color-mix(in srgb, var(--yesil) 30%, var(--border)); } body:not(.kompakt-mod) .makine-kart.mk-dolu:hover { box-shadow: var(--shadow-md), 0 0 20px color-mix(in srgb, var(--kirmizi) 20%, transparent); border-color: color-mix(in srgb, var(--kirmizi) 30%, var(--border)); } body:not(.kompakt-mod) .makine-kart.mk-bitti:hover { box-shadow: var(--shadow-md), 0 0 22px color-mix(in srgb, var(--sari) 25%, transparent); border-color: color-mix(in srgb, var(--sari) 30%, var(--border)); } body:not(.kompakt-mod) .makine-kart.mk-bakim:hover { box-shadow: var(--shadow-md), 0 0 20px color-mix(in srgb, var(--bakim) 20%, transparent); border-color: color-mix(in srgb, var(--bakim) 30%, var(--border)); } body:not(.kompakt-mod) .makine-kart.mk-koptu:hover { box-shadow: var(--shadow-md); } /* ── Grid responsive — mobil: sol panel biraz daralır ── */ @media (max-width: 480px) { body:not(.kompakt-mod) .makine-kart { grid-template-columns: 72px 1fr; min-height: 140px; } .mk-buyuk-no { font-size: 36px; } .mk-tip-svg-sol { width: 24px; height: 24px; } .mk-icerik { padding: 8px 10px 10px; } .mk-ana-bilgi { font-size: 14px; } .mk-teslim-btn { margin: 0 10px 10px auto; font-size: 10px; padding: 4px 9px; } } @media (min-width: 481px) and (max-width: 768px) { body:not(.kompakt-mod) .makine-kart { grid-template-columns: 78px 1fr; } } /* ── Kompakt mod — yeni DOM yapısına uyumlu, minimum kart ── */ body.kompakt-mod .makine-kart { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-height: 92px; border-radius: 12px; } /* Sol panel: yatay üst şerit olarak dönüş */ body.kompakt-mod .mk-sol-panel { width: 100%; flex-direction: row; justify-content: center; gap: 8px; padding: 6px 8px; align-items: baseline; } body.kompakt-mod .mk-buyuk-no { font-size: 20px; margin-top: 0; } /* Sağ panel: kompakt içerik */ body.kompakt-mod .mk-sag-panel { flex: 1; background: var(--surface); } body.kompakt-mod .mk-durum-band, body.kompakt-mod .mk-tip-row, body.kompakt-mod .mk-alt-bilgi, body.kompakt-mod .kart-admin-alt { display: none; } body.kompakt-mod .mk-icerik { padding: 4px 6px 6px; gap: 2px; align-items: center; } body.kompakt-mod .mk-ana-bilgi { font-size: 11px; text-align: center; font-weight: 700; margin-top: 0; } body.kompakt-mod .mk-progress-bg { width: 100%; margin-top: 4px; height: 2px; } body.kompakt-mod .mk-teslim-btn { font-size: 10px; padding: 2px 7px; margin: 3px auto 4px; box-shadow: none; } /* ── v180: Sol panelin sağ kenarı yuvarlatıldı — "D harfi" şekli Sağ panele geçiş keskin dikey line yerine yumuşak iç kavis. İsteğe göre içe shadow ile sağ panelde derinlik hissi. */ body:not(.kompakt-mod) .mk-sol-panel { border-top-right-radius: 16px; border-bottom-right-radius: 16px; position: relative; z-index: 1; } body:not(.kompakt-mod) .mk-sag-panel { box-shadow: inset 5px 0 14px -8px rgba(0,0,0,.12); } [data-tema="koyu"] body:not(.kompakt-mod) .mk-sag-panel { box-shadow: inset 5px 0 14px -8px rgba(0,0,0,.4); } /* Durum band'in sol köşesi de sol panelin yuvarlaklığıyla uyumlu kavis alsın */ body:not(.kompakt-mod) .mk-durum-band { border-top-left-radius: 4px; } /* Mobilde sol panel biraz daha dar, kavis de ona uyumlu */ @media (max-width: 480px) { body:not(.kompakt-mod) .mk-sol-panel { border-top-right-radius: 14px; border-bottom-right-radius: 14px; } } /* ═════════════════════════════════════════════════════════════ v181: KART RAFİNE — sol daralt, numara küçült, akım chip yok, yazı okunaklı ═════════════════════════════════════════════════════════════ */ /* Sol panel ince — 88 → 70px */ body:not(.kompakt-mod) .makine-kart { grid-template-columns: 70px 1fr; } @media (min-width: 481px) and (max-width: 768px) { body:not(.kompakt-mod) .makine-kart { grid-template-columns: 66px 1fr; } } @media (max-width: 480px) { body:not(.kompakt-mod) .makine-kart { grid-template-columns: 60px 1fr; } } /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 12 — TİPOGRAFİ HİYERARŞİSİ (v207–v208 turu) ──────────────────────────────────────────────────────────────────────────── .mk-buyuk-no 64px (mobile 48px), .mk-ana-bilgi 22px (mobile 16-18px), .mk-tip-row 11px uppercase eyebrow, .mk-akim mono çip-değil-metin, .mk-alt-bilgi okunaklı muted. NOT: Üç selector için DUPLICATE tanımlar var (eski + yeni kuralları birlikte) — line 4515 vs 4896, 4643 vs 4917, 4681 vs 4944. Aşama 1'de eski tanımlar silinecek (cascade override ile çalışıyor ama dead duplicate'ler). Aşama 2 hedef: 02-kartlar.css ══════════════════════════════════════════════════════════════════════════ */ /* Tipografi hiyerarşisi (Aşama 1: .mk-buyuk-no eski tanım line ~4604'e birleştirildi). */ /* Sol panel padding optimize */ .mk-sol-panel { padding: 12px 6px 10px; } @media (max-width: 480px) { .mk-sol-panel { padding: 10px 4px 8px; } } /* Yumuşak kavis yeni genişliğe uyumlu */ body:not(.kompakt-mod) .mk-sol-panel { border-top-right-radius: 14px; border-bottom-right-radius: 14px; } @media (max-width: 480px) { body:not(.kompakt-mod) .mk-sol-panel { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } } /* Tip etiketi (Aşama 1: ana .mk-tip-row tanımı line ~4732'ye birleştirildi). */ .mk-tip-row .mk-tip-lbl { color: var(--text); font-weight: 700; } /* Akım artık çip değil, satır sonunda düz mono metin */ .mk-akim { background: transparent !important; border: none !important; padding: 0 !important; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 600; color: var(--muted); } .mk-akim::before { content: '· '; opacity: .5; } /* v210 (3 May OMAR): Masaüstünde tip etiketi (Çamaşır/Kurutma) + akım değeri biraz küçültülür. Mobil/tablet (≤768px) 11px'de okunaklı kalsın, masaüstü ekran genişliğinde 11px gereğinden büyük duruyor → 10px'e indir. Ek: Akım metni dar masaüstü kartlarda alt satıra taşıyordu — flex-wrap:nowrap + tip-lbl ellipsis + akım flex-shrink:0 ile satırda kalması garantilendi. */ @media (min-width: 769px) { .mk-tip-row { font-size: 10px; flex-wrap: nowrap; align-items: center; } .mk-tip-row .mk-tip-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; } .mk-akim { font-size: 10px; flex: 0 0 auto; white-space: nowrap; } /* v211 fix (3 May OMAR localhost test): admin modunda dar kartlarda uppercase + letter-spacing tip etiketini akım metnine taşırıyordu. Admin için uppercase kaldırıldı + font-weight 600, "Çamaşır/Kurutma" normal kelime hali %20-25 az yer kaplar + ellipsis için flex 1 1 0. */ body.admin-mod .mk-tip-row { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; } body.admin-mod .mk-tip-row .mk-tip-lbl { font-weight: 600; } body.admin-mod .mk-akim { font-size: 11px; } } /* Kalan dakika (Aşama 1: ana .mk-ana-bilgi tanımı line ~4770'e birleştirildi). */ /* Alt bilgi — okunaklı, daha yüksek kontrast */ .mk-alt-bilgi { font-size: 12px; color: var(--muted); line-height: 1.35; font-weight: 500; margin-top: 3px; } @media (max-width: 480px) { .mk-alt-bilgi { font-size: 11px; } } /* Dark modda alt bilgi biraz daha parlak — kontrast için */ [data-tema="koyu"] .mk-alt-bilgi { color: color-mix(in srgb, var(--muted) 80%, var(--text)); } /* İçerik padding — tip satırı ile ana bilgi arasında daha hava */ .mk-icerik { padding: 11px 13px 12px; gap: 3px; } @media (max-width: 480px) { .mk-icerik { padding: 10px 11px 11px; } } /* Durum band biraz daha okunaklı — 12 → 13px */ .mk-durum-band { font-size: 13px; padding: 8px 13px; } @media (max-width: 480px) { .mk-durum-band { font-size: 12px; padding: 7px 11px; } } .mk-progress-bg { margin-top: 10px; } /* Admin alt — font büyüt */ body:not(.kompakt-mod) .makine-kart .kart-admin-alt { font-size: 11px; padding: 7px 13px 9px; } /* Kompakt modda da yeni boyut hiyerarşisi */ body.kompakt-mod .mk-buyuk-no { font-size: 18px; } body.kompakt-mod .mk-ana-bilgi { font-size: 12px; } /* ═════════════════════════════════════════════════════════════ v182: Mobilde sabit 2 sütun — öğrenci + admin fark etmez (Eski kural 481-768 admin için 3 sütun yapıyordu, sıkışıktı) Kompakt mod dokunulmaz — 4 sütun mini kartlar olarak kalır. ═════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body:not(.kompakt-mod) .makine-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } /* Çok dar ekran (320px altı) — tek sütun, kart nefes alabilsin */ @media (max-width: 340px) { body:not(.kompakt-mod) .makine-grid { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════════════════════════════ v195 Sprint 2 #4+#9 — Hub HALT/RESUME widget + öğrenci sarı banner /_hub/durum DB path 'aktif'|'halt'. Firmware v52'ye kadar buton disabled. ══════════════════════════════════════════════════════════════════════ */ .hub-durum-kart { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hub-durum-icerik { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; } .hub-durum-baslik { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .08em; } .hub-durum-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface3); color: var(--muted); border: 1px solid var(--border); width: fit-content; } .hub-durum-nokta { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .hub-durum-badge.hub-durum-aktif { background: var(--yesil-bg); color: var(--yesil); border-color: var(--yesil-b); } .hub-durum-badge.hub-durum-halt { background: var(--sari-bg); color: var(--sari); border-color: var(--sari-b); animation: hubHaltPulse 2s ease-in-out infinite; } @keyframes hubHaltPulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } } .hub-durum-aciklama { font-size: 11px; color: var(--dimmed); flex-basis: 100%; } .hub-durum-buton-yer { display: flex; align-items: center; } .hub-durum-buton-yer .mini-btn:disabled { opacity: .5; cursor: not-allowed; } /* Öğrenci sarı bilgi banner — HALT modunda görünür */ .hub-halt-banner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: var(--z-tooltip); background: var(--sari-bg); color: var(--sari); border: 1px solid var(--sari-b); border-radius: 12px; padding: 10px 18px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-md); max-width: calc(100vw - 24px); text-align: center; animation: hubHaltBannerIn .25s ease-out; } @keyframes hubHaltBannerIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } [data-tema="koyu"] .hub-halt-banner { background: color-mix(in srgb, var(--sari) 18%, var(--surface2)); color: var(--sari); } /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM 13 — SON FEATURE'LAR: HUB DURUM, SAĞLIK ÖZET, ANA EKRAN FİX ──────────────────────────────────────────────────────────────────────────── Hub durum kartı + .hub-halt-banner (v195 Sprint 2, firmware v52 desteği), .admin-saglik-grid + .admin-saglik-kart (v195 Sprint 4 #14), @keyframes hubHaltPulse + hubHaltBannerIn, ANA EKRAN 4 KART TAM GENİŞLİK DÜZELTMESİ (final fix). Aşama 2 hedef: 04-admin.css (admin-saglik) + 07-floating.css (hub-halt-banner) ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ v195 Sprint 4 #14 — Makine Sağlık Özeti (admin operasyon/özet sekmesi) ══════════════════════════════════════════════════════════════════════ */ .admin-saglik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 12px; } .saglik-kart { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--yesil); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .saglik-kart-baslik { display: flex; align-items: center; justify-content: space-between; } .saglik-mid { font-size: 13px; font-weight: 800; color: var(--text); } .saglik-rozetler { display: flex; flex-wrap: wrap; gap: 5px; } .saglik-rozet { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--surface3); color: var(--muted); border: 1px solid var(--border); } .saglik-rozet.yesil { background: var(--yesil-bg); color: var(--yesil); border-color: var(--yesil-b); } .saglik-rozet.sari { background: var(--sari-bg); color: var(--sari); border-color: var(--sari-b); } .saglik-rozet.kirmizi { background: var(--kirmizi-bg); color: var(--kirmizi); border-color: var(--kirmizi-b); } .saglik-son-koptu { font-size: 10px; color: var(--dimmed); font-style: italic; } /* --- ANA EKRAN 4 KART (BOŞ/ÇALIŞIYOR/TESLİM/BAKIM) TAM GENİŞLİK DÜZELTMESİ --- */ .stats-wrap { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; } /* 14 May fix (P0.3): Global .stats yerine spesifik sınıflara scope. Eski global kural `.stats` kullanan HER yer 4-kolon !important'a kilitliyordu. .stats-tek-satir explicit opt-in olarak korundu; ana ekran .stats grid için mevcut Yönetim ortak grid kuralları yeterli (10-yonetim.css). */ .stats.stats-tek-satir, .admin-ozet-mini-grid { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 768px) { /* v210 (3 May OMAR): Hem .stats (Boş/Çalışıyor/Teslim/Bakım) hem .admin-ozet-mini-grid (Operasyon→Özet: Boş/Çalışıyor/Bitti/Bugünkü Döngü) mobilde de 4 sütun tek satır. Padding/font önceki @media bloklarında zaten optimize. .admin-ozet-mini-grid için mobilde gap+padding küçültme. */ .admin-ozet-mini-grid { gap: 6px !important; } .admin-ozet-mini-grid > * { padding: 10px 6px !important; min-width: 0; } } /* ════════════════════════════════════════════════════════════════════════════ v242 (6 May — Claude Web teşhisi): v216-2 + v217-2 CSS rule'ları SİLİNDİ. Sebep: v240 JS yapısını değiştirdi (prog-row block, p-ad ayrı satırda). Eski 'display: flex !important + flex-wrap: nowrap' rule'u v240 ile çelişip p-ad input'u 0 genişliğe çekiyordu (devtools display:'none' raporu). v240 inline style'lar tek otorite — CSS rule artık gereksiz + zararlı. Tarihçe için memory/audit'lerde tutulacak. ══════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ v210 Paket W (3 May): Öğrenci Öneri / Geri Bildirim kart + modal SSS altında konumlanır, masaüstü+mobil uyumlu, .sss-section paterniyle uyumlu. ══════════════════════════════════════════════════════════════════════════ */ .oneri-section { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin: 20px 0; overflow: hidden; box-shadow: var(--shadow-sm); } .oneri-baslik { padding: 14px 18px 4px 18px; font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; } .oneri-govde { padding: 4px 18px 16px 18px; } .oneri-aciklama { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 12px 0; } .oneri-btn-ana { width: 100%; padding: 12px 16px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; transition: background .15s, transform .12s; } .oneri-btn-ana:hover { background: var(--surface3); transform: translateY(-1px); } .oneri-btn-ana:active { transform: translateY(0); } /* Yönetici modunda öneri bölümü gizlensin (sadece öğrenci için) */ body.admin-mod #oneri-section { display: none; } /* v217-2 CSS rule (.prog-row > input.p-ad flex 1 1 200px) v242'de SİLİNDİ. Yukarıdaki yorum bloğu detayını içeriyor. */ /* ════════════════════════════════════════════════════════════════════════════ v210 (3 May): Raporlar sekmesi kart layout — üst banner dropdown'undan Yönetim Merkezi → Raporlar tab'ına taşındığında 3 buton büyük kart olarak. ══════════════════════════════════════════════════════════════════════════ */ .rapor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 4px; } .rapor-kart { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: transform .12s var(--ease-out), border-color .12s ease, box-shadow .12s ease; } .rapor-kart:hover { border-color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-card-hover, 0 6px 16px rgba(0,0,0,.08)); } .rapor-kart:active { transform: translateY(0); } .rapor-kart-ikon { font-size: 28px; line-height: 1; flex-shrink: 0; } .rapor-kart-body { flex: 1; min-width: 0; } .rapor-kart-baslik { font-size: 14px; font-weight: 800; margin-bottom: 4px; color: var(--text); } .rapor-kart-aciklama { font-size: 11px; color: var(--muted); line-height: 1.4; } /* v210 (3 May): Mobilde rapor kartları "kocaman buton gibi" duruyordu. Padding/font/ikon küçültülerek kompakt liste görünümü. Tek sütun korunur. */ @media (max-width: 640px) { .rapor-grid { grid-template-columns: 1fr; gap: 8px; } .rapor-kart { padding: 12px; gap: 10px; } .rapor-kart-ikon { font-size: 22px; } .rapor-kart-baslik { font-size: 13px; margin-bottom: 2px; } .rapor-kart-aciklama { font-size: 10px; line-height: 1.3; } } /* v248 ADMIN_OMURGA FAZ 6 — Mobil polish (dar ekran 540px altı): Sistem tab grid kartlarında label/değer iki kolon dar ekranda sıkışabilir, stack et. Bakım Takvim Yapıldı butonu satır içinde flex-wrap zaten ama 480px altında buton açıklamadan ayrı satıra düşsün (dokunma hedefi >=44px). */ @media (max-width: 540px) { #admin-pane-sistem .admin-card > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 4px 0 !important; } } @media (max-width: 480px) { #admin-omurga-bakim-takvim .akilli-ozet-satir { gap: 6px; } #admin-omurga-bakim-takvim .bakim-yapildi-btn { margin-left: 0 !important; width: 100%; padding: 8px !important; margin-top: 4px; } /* Sabah Raporu kartı pre tag overflow guard */ #admin-sabah-raporu-kart pre { font-size: 12px; } } /* ════════════════════════════════════════════════════════════════════════════ * 8 May 2026: PROFIL SAYFASI v2 — Hero + 4-stat + Heat grid + Timeline + Compare * Tasarım kaynağı: claude.ai design preview (Profil mockup, Pazar=koyu). * Header avatar tıklayınca #profil hash → açılır. Backend: kullaniciDurumu. * ════════════════════════════════════════════════════════════════════════════ */ /* Header avatar (link wrapper — tıklanabilir) */ .profil-link { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; border-radius: 50%; transition: transform .12s ease, box-shadow .12s ease; } .profil-link:hover { transform: scale(1.06); box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-accent, #3182ce) 25%, transparent); } /* :focus-visible global rule (11-tasarimsal:186) `outline:!important` ezer — per-component override etkisiz, kaldırıldı */ /* Sayfa overlay — full screen */ .profil-sayfasi { position: fixed; inset: 0; z-index: var(--z-floating-misc); background: var(--bg, #f4f5f7); color: var(--text); flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.profil-acik { overflow: hidden; } /* Üst başlık bar */ .profil-baslik-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 1; } .profil-geri-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s; } .profil-geri-btn:hover { background: color-mix(in srgb, var(--mavi, #3182ce) 10%, var(--surface2)); } .profil-h1 { flex: 1; text-align: center; margin: 0; font-size: 18px; font-weight: 800; color: var(--text); } .profil-baslik-spacer { width: 100px; } .profil-icerik { padding: 20px; } .profil-yukleniyor, .profil-hata { text-align: center; padding: 60px 16px; color: var(--muted); font-size: 14px; } .profil-hata { color: var(--kirmizi, #e53e3e); } .profil-hata-emoji { font-size: 32px; margin-bottom: 8px; } .profil-hata-msg { margin-top: 8px; font-size: 12px; opacity: .8; } .profil-yenile-btn { margin-top: 14px; padding: 8px 18px; background: var(--mavi, #3182ce); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; } .profil-yenile-btn:hover { background: color-mix(in srgb, var(--mavi, #3182ce) 90%, #000); } /* ── Shell wrap (içerik genişlik sınırı, mockup'tan) ─────────────────────── */ .prf-shell { max-width: 1080px; margin: 0 auto; padding: 8px 8px 64px; } .prf-shell > * + * { margin-top: 24px; } /* ── HERO ────────────────────────────────────────────────────────────────── */ .prf-hero { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 24px 28px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; } .prf-avatar { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; letter-spacing: -.02em; flex-shrink: 0; position: relative; } .prf-avatar::after { content: ''; position: absolute; bottom: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--yesil, #10b981); border: 3px solid var(--surface); } .prf-who-h { font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 6px; color: var(--text); } .prf-who-sub { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .prf-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .5; display: inline-block; } .prf-hero-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .prf-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 9px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); } .prf-tag-gold { background: #fef3c7; border-color: #fde68a; color: #854d0e; } .prf-tag-green { background: #d1fae5; border-color: #a7f3d0; color: #065f46; } [data-tema="koyu"] .prf-tag-gold { background: rgba(251, 191, 36, .15); border-color: rgba(251, 191, 36, .35); color: #fbbf24; } [data-tema="koyu"] .prf-tag-green { background: rgba(16, 185, 129, .15); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; } /* ── STATS ───────────────────────────────────────────────────────────────── */ .prf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .prf-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; position: relative; overflow: hidden; } .prf-stat-lab { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; } .prf-stat-num { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; } .prf-stat-num small { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 4px; } .prf-stat-num.prf-stat-text { font-size: 18px; font-weight: 800; line-height: 1.2; } .prf-stat-num .prf-bos { color: var(--muted); opacity: .5; font-weight: 600; } .prf-stat-meta { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--muted); } .prf-stat-meta b { color: var(--yesil, #10b981); font-weight: 800; } .prf-stat-accent { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); color: #fff; border: none; } .prf-stat-accent .prf-stat-lab { color: #94a3b8; } .prf-stat-accent .prf-stat-num { color: #fff; } .prf-stat-accent .prf-stat-meta { color: #cbd5e1; } .prf-stat-accent .prf-stat-meta b { color: #fbbf24; } /* ── Bölüm başlığı ────────────────────────────────────────────────────────── */ .prf-sec { display: block; } .prf-sec-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .prf-sec-h h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin: 0; } .prf-sec-meta { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* ── HEAT GRID ────────────────────────────────────────────────────────────── */ .prf-heat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; } .prf-heat-grid { display: grid; grid-template-columns: 36px repeat(12, 1fr); gap: 4px; } .prf-heat-day-lab { font-size: 10px; font-weight: 700; color: var(--muted); text-align: right; padding-right: 6px; line-height: 18px; letter-spacing: .04em; } .prf-heat-cell { aspect-ratio: 1; background: var(--border); border-radius: 3px; cursor: default; transition: transform .12s; min-height: 14px; } .prf-heat-cell:hover { transform: scale(1.3); } .prf-heat-cell.l1 { background: #bfdbfe; } .prf-heat-cell.l2 { background: #60a5fa; } .prf-heat-cell.l3 { background: var(--mavi, #3b82f6); } .prf-heat-cell.l4 { background: #1e3a8a; } [data-tema="koyu"] .prf-heat-cell { background: rgba(255, 255, 255, .06); } [data-tema="koyu"] .prf-heat-cell.l1 { background: rgba(96, 165, 250, .35); } [data-tema="koyu"] .prf-heat-cell.l2 { background: rgba(96, 165, 250, .65); } [data-tema="koyu"] .prf-heat-cell.l3 { background: var(--mavi, #3b82f6); } [data-tema="koyu"] .prf-heat-cell.l4 { background: #93c5fd; } .prf-heat-legend { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; flex-wrap: wrap; } .prf-heat-scale { display: flex; gap: 3px; } .prf-heat-scale i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; background: var(--border); } .prf-heat-scale i.l1 { background: #bfdbfe; } .prf-heat-scale i.l2 { background: #60a5fa; } .prf-heat-scale i.l3 { background: var(--mavi, #3b82f6); } .prf-heat-scale i.l4 { background: #1e3a8a; } .prf-heat-toplam { margin-left: auto; } /* ── TIMELINE ─────────────────────────────────────────────────────────────── */ .prf-timeline { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .prf-day { border-bottom: 1px solid var(--border); } .prf-day:last-child { border-bottom: none; } .prf-day-h { padding: 12px 22px; background: var(--surface2); display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--border); } .prf-day-h b { color: var(--text); font-weight: 800; } .prf-day-meta { font-weight: 600; opacity: .7; } .prf-cyc { display: grid; grid-template-columns: 44px 1.2fr auto 1fr auto; gap: 16px; align-items: center; padding: 14px 22px; border-bottom: 1px dashed var(--border); transition: background .12s; } .prf-cyc:last-child { border-bottom: none; } .prf-cyc:hover { background: var(--surface2); } .prf-cyc-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .04em; } .prf-cyc-cmr { background: #dbeafe; color: #1e40af; } .prf-cyc-krt { background: #fef3c7; color: #854d0e; } [data-tema="koyu"] .prf-cyc-cmr { background: rgba(96, 165, 250, .2); color: #93c5fd; } [data-tema="koyu"] .prf-cyc-krt { background: rgba(251, 191, 36, .2); color: #fbbf24; } .prf-cyc-info { min-width: 0; } .prf-cyc-mod { font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prf-cyc-meta { margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .prf-cyc-id { color: var(--text); font-weight: 700; } .prf-cyc-sep { opacity: .5; } .prf-cyc-time { text-align: right; white-space: nowrap; } .prf-cyc-saat { font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; } .prf-cyc-fark { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 600; } .prf-cyc-bar { position: relative; height: 6px; background: var(--border); border-radius: 3px; overflow: visible; } .prf-cyc-bar > i { display: block; height: 100%; background: var(--mavi, #3b82f6); border-radius: 3px; } .prf-cyc-bar > b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: var(--text); letter-spacing: .02em; white-space: nowrap; } .prf-cyc-status { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; border-radius: 99px; white-space: nowrap; } .prf-cyc-ok { background: #d1fae5; color: #065f46; } .prf-cyc-gec { background: #fef3c7; color: #854d0e; } .prf-cyc-iptal { background: #fee2e2; color: #991b1b; } [data-tema="koyu"] .prf-cyc-ok { background: rgba(16, 185, 129, .2); color: #6ee7b7; } [data-tema="koyu"] .prf-cyc-gec { background: rgba(251, 191, 36, .2); color: #fbbf24; } [data-tema="koyu"] .prf-cyc-iptal { background: rgba(229, 62, 62, .2); color: #fca5a5; } .prf-timeline-bos { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 48px 24px; text-align: center; color: var(--muted); } .prf-bos-emoji { font-size: 36px; margin-bottom: 10px; } .prf-bos-alt { margin-top: 6px; font-size: 12px; opacity: .65; } /* ── COMPARE PANEL ───────────────────────────────────────────────────────── */ .prf-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .prf-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 22px; } .prf-panel h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 14px; } .prf-compare-fark { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 8px; } .prf-compare-alt { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 16px; line-height: 1.5; } .prf-favori-kart { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 14%, transparent), transparent); border: 1px solid color-mix(in srgb, #fbbf24 35%, var(--border)); border-radius: 12px; margin-top: auto; } .prf-favori-emoji { font-size: 28px; } .prf-favori-baslik { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .prf-favori-deger { font-size: 16px; font-weight: 800; color: var(--text); margin-top: 2px; } .prf-favori-alt { font-size: 11px; color: var(--muted); margin-top: 2px; } .prf-mod-bar { height: 14px; border-radius: 7px; overflow: hidden; display: flex; margin-bottom: 14px; background: var(--border); } .prf-mod-bar i { height: 100%; display: block; } .prf-mod-list { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; } .prf-mod-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--text); } .prf-mod-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .prf-mod-name { font-weight: 700; } .prf-mod-val { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; } .prf-bos { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; } .prf-altbilgi { font-size: 11px; color: var(--muted); text-align: center; padding-top: 16px; border-top: 1px dashed var(--border); line-height: 1.5; } /* Mobil uyum */ @media (max-width: 760px) { .prf-stats { grid-template-columns: repeat(2, 1fr); } .prf-compare { grid-template-columns: 1fr; } } @media (max-width: 540px) { .prf-hero { grid-template-columns: 1fr; text-align: center; padding: 22px; } .prf-who-h, .prf-who-sub, .prf-hero-tags { text-align: center; justify-content: center; } .prf-who-sub { justify-content: center; } .prf-hero-tags { justify-content: center; } .prf-cyc { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 12px 16px; } .prf-cyc-time, .prf-cyc-bar { display: none; } .prf-stat-num { font-size: 24px; } .profil-baslik-bar { padding: 12px 14px; } .profil-h1 { font-size: 16px; } .profil-baslik-spacer { width: 60px; } .profil-geri-btn { padding: 6px 10px; font-size: 12px; } .profil-icerik { padding: 14px; } .prf-shell { padding: 0 0 32px; } .prf-shell > * + * { margin-top: 18px; } .prf-day-h { padding: 10px 16px; font-size: 10px; } .prf-heat-grid { grid-template-columns: 28px repeat(12, 1fr); gap: 3px; } .prf-heat-day-lab { font-size: 8px; padding-right: 4px; } } /* ════════════════════════════════════════════════════════════════════════════ * 8 May 2026: YURT DUYURUSU — Hibrit (banner + ilk açılış toast 5sn) * Banner header altı sticky şerit; admin yazımı, herkes okur. * Backend: duyuruEkle / duyuruSil callable. Listener: duyurular.js. * ════════════════════════════════════════════════════════════════════════════ */ .duyuru-banner { position: relative; z-index: var(--z-sticky); background: linear-gradient(135deg, color-mix(in srgb, var(--mavi, #3182ce) 14%, var(--surface)), color-mix(in srgb, var(--mavi, #3182ce) 6%, var(--surface))); border-bottom: 1px solid color-mix(in srgb, var(--mavi, #3182ce) 30%, var(--border)); padding: 0; overflow: hidden; } .duyuru-iclist { display: flex; flex-direction: column; gap: 2px; max-height: 120px; overflow-y: auto; padding: 6px 12px; } .duyuru-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; font-size: 13px; line-height: 1.45; color: var(--text); border-radius: 6px; transition: background .12s; } .duyuru-item:hover { background: color-mix(in srgb, var(--mavi, #3182ce) 8%, transparent); } .duyuru-ikon { flex-shrink: 0; font-size: 16px; line-height: 1.2; } .duyuru-metin { flex: 1; min-width: 0; word-wrap: break-word; } [data-tema="koyu"] .duyuru-banner { background: linear-gradient(135deg, color-mix(in srgb, var(--mavi, #3182ce) 22%, var(--surface)), color-mix(in srgb, var(--mavi, #3182ce) 10%, var(--surface))); } @media (max-width: 480px) { .duyuru-iclist { padding: 4px 8px; max-height: 100px; } .duyuru-item { font-size: 12px; padding: 4px 6px; } } /* ════════════════════════════════════════════════════════════════════════════ * 8 May 2026 (2.67): ŞİKAYETLERİM — profil sayfasında öğrencinin kendi açık+ * çözülmüş arıza bildirimleri + admin cevap balonu. * ════════════════════════════════════════════════════════════════════════════ */ .prf-sik-liste { display: flex; flex-direction: column; gap: 10px; } .prf-sik { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .prf-sik.acik { border-color: var(--kirmizi-b, var(--border)); background: color-mix(in srgb, var(--kirmizi, #e53e3e) 6%, var(--surface)); } .prf-sik.cozuldu { background: var(--surface2); opacity: .92; } .prf-sik-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .prf-sik-mid { font-weight: 800; font-size: 13px; color: var(--text); letter-spacing: .02em; } .prf-sik-rozet { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; } .prf-sik-rozet.acik { background: color-mix(in srgb, var(--kirmizi, #e53e3e) 18%, transparent); color: var(--kirmizi, #c53030); } .prf-sik-rozet.ok { background: color-mix(in srgb, var(--yesil, #38a169) 18%, transparent); color: var(--yesil, #2f855a); } .prf-sik-tarih { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); } .prf-sik-mesaj { font-size: 13px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; } .prf-sik-meta { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--muted); } .prf-sik-cevap { margin-top: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--yesil, #38a169) 8%, var(--surface)); border-left: 3px solid var(--yesil, #38a169); border-radius: 8px; } .prf-sik-cevap-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--yesil, #2f855a); margin-bottom: 4px; } .prf-sik-cevap-text { font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; } [data-tema="koyu"] .prf-sik.acik { background: color-mix(in srgb, var(--kirmizi, #e53e3e) 14%, var(--surface)); } [data-tema="koyu"] .prf-sik-cevap { background: color-mix(in srgb, var(--yesil, #38a169) 18%, var(--surface)); } /* ════════════════════════════════════════════════════════════════════════ PRINT STYLESHEET (11 May 2026 v2.72l) — KK derin audit R3 fix. Önceden HİÇ print kuralı yoktu → admin/öğrenci rapor yazdırırken dark gradient + glow + glassmorphism kağıda render edilirdi (okunmaz). Kritik kapsam: arkaplan beyaz, metin siyah, gölge/animasyon kapalı, navigasyon + interaktif elementler gizli. ════════════════════════════════════════════════════════════════════════ */ @media print { * { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body { background: #fff !important; font-family: Arial, sans-serif !important; } /* Gizlenen UI elementleri — kağıtta yer kaplamasın. 14 May fix (P0.4): gerçek class/id'ler eklendi (.pwa-banner, #onboarding-overlay, .admin-panel — HTML'de bunlar kullanılıyor). 16 May: hiçbir elemana uymayan ölü eski selektörler (.pwa-install-banner / .onboarding-overlay / .admin-paneller) listeden çıkarıldı. */ header, .filtre-bar-wrap, .pwa-banner, .sira-kartim-wrap, .bos-banner, #demo-btn-global, .modal-overlay, .toast-wrap, #onboarding-overlay, .sag-cekmece-overlay, .sag-cekmece, .admin-panel, .admin-bottom-nav, .admin-tabs, .kbd-panel { display: none !important; } /* Kartlar daha derli toplu */ .makine-grid { display: block !important; } .makine-kart { border: 1px solid #999 !important; border-radius: 4px !important; margin-bottom: 8px !important; page-break-inside: avoid; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555 !important; } } /* ────────────────────────────────────────────────────────────────────────── 14 May 2026 — Mobile scroll perf: backdrop-filter blur orta segment mobil GPU'larda pahalı (compositor layer drop → grileşme/beyazlaşma + scroll jank). <=768px ekranlarda tüm glass katmanları solid bg fallback'a düşer. Görsel ödün: glassmorphism kaybolur; kazanç: 60fps scroll, paint pressure -%70. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .modal, .modal-overlay, .sira-kartim-wrap, .toast, .hub-chip, .kbd-panel, .pwa-banner, .admin-topbar, .admin-tabs, .filtre-bar-wrap, header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 14 May 2026 (2.73g) — WCAG 2.5.5 touch target sertleştirme. Önceki boyutlar AAA (44×44) altındaydı: .kapat-btn 28×28, .fb-kapat 28×28, .ses-btn/.tema-btn 30×30 mobile. Mobil'de min 44×44, visual hâli korumak için icon font-size aynı; padding/box-sizing ile alan genişler. Box-shadow / dot yerleşimi etkilenmesin diye position:relative + içerik flex-center. */ .kapat-btn, .fb-kapat, .ses-btn, .tema-btn { min-width: 44px; min-height: 44px; width: 44px !important; /* 02-header :47/49 override */ height: 44px !important; } /* mini-btn satır içi grid'lerde min-height 36 (AA için yeterli + densite korunur) */ .mini-btn { min-height: 36px; } } /* 14 May 2026 (2.73g) — Üst safe-area-inset (iPhone Dynamic Island/notch). Header position:sticky top:0 — env(safe-area-inset-top) padding olmadan notch içeriği header üzerine taşıyordu. */ header { padding-top: max(env(safe-area-inset-top, 0px), 0px); } /* 14 May 2026 (2.73g) — iOS 100vh sorunu: Safari URL bar değişiminde 100vh sabit, 100dvh ise dinamik viewport. Eski body{min-height:100vh} + kart max-height:calc(100vh-200px) URL bar açıldığında scroll kopuyor. Yeni: dvh fallback için modern Safari, eski tarayıcılarda 100vh kullanılır. */ @supports (height: 100dvh) { body { min-height: 100dvh; } } /* ════════════════════════════════════════════════════════════════════════════ BÖLÜM SON+ — PREMIUM GÖRSEL KATMAN (2.74ap, 5 Haz 2026) ──────────────────────────────────────────────────────────────────────────── "Sıcak Editöryel Lüks" yönü. Tamamen EKLEMELİ + token-sürücülü: mevcut 6163 satıra DOKUNULMADAN sona eklendi → cascade sırası ile güvenli override. Disiplin: • Durum renklerini KORUR — yüzey gradyanları `background-image` overlay ile (background-color sabit kalır, mk-bos/dolu/bitti renkleri ezilmez). • Tema-duyarlı: gölge/parıltı tokenları :root + [data-tema="koyu"] ikilisiyle (özgüllük eşit → kaynak sırası belirler, dark için son override şart). • prefers-reduced-motion: tüm yeni animasyonlar kapanır. • Başlık fontu Fraunces (index.html'e display=swap ile ayrı link) — gövde Nunito + sayılar Space Mono dokunulmadı (FOUT stratejisi korunur). Geri alma: bu blok + index.html Fraunces link + ?v bump silinir. ══════════════════════════════════════════════════════════════════════════ */ /* ── Premium token yükseltme (light) ── */ :root { /* Daha yumuşak, geniş, çok katmanlı + ince sıcak (brand) tonlu yükselti */ --shadow-card: 0 1px 2px rgba(28,25,23,.05), 0 6px 16px -6px rgba(28,25,23,.10), 0 12px 36px -12px rgba(192,57,43,.06); --shadow-card-hover: 0 2px 4px rgba(28,25,23,.06), 0 12px 28px -8px rgba(28,25,23,.16), 0 28px 60px -20px rgba(192,57,43,.10); --shadow-float: 0 12px 32px -8px rgba(28,25,23,.18), 0 4px 10px -4px rgba(28,25,23,.10), inset 0 1px 0 rgba(255,255,255,.6); /* İç üst parıltı (premium cam hissi) + ince çerçeve halkası */ --premium-sheen: inset 0 1px 0 rgba(255,255,255,.7); --premium-ring: 0 0 0 1px rgba(28,25,23,.04); --premium-surface: linear-gradient(180deg, color-mix(in srgb,var(--surface) 100%,#fff) 0%, color-mix(in srgb,var(--surface) 92%,var(--surface2)) 100%); /* Yumuşak modern radii artışı */ --r-md: 16px; --r-lg: 22px; --admin-radius-lg: 16px; --font-display: 'Fraunces','Nunito',Georgia,serif; } [data-tema="koyu"] { --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 8px 20px -8px rgba(0,0,0,.55), 0 16px 40px -16px rgba(0,0,0,.45); --shadow-card-hover: 0 2px 6px rgba(0,0,0,.55), 0 16px 34px -10px rgba(0,0,0,.6), 0 32px 64px -22px rgba(0,0,0,.5); --shadow-float: 0 14px 36px -10px rgba(0,0,0,.6), 0 4px 12px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); --premium-sheen: inset 0 1px 0 rgba(255,255,255,.06); --premium-ring: 0 0 0 1px rgba(255,255,255,.04); --premium-surface: linear-gradient(180deg, color-mix(in srgb,var(--surface) 88%,#fff) 0%, var(--surface) 100%); } /* ── Başlık tipografisi: Fraunces display ── */ .logo-text h1, h2, h3, .yogunluk-durum, .feature-title, .admin-topbar h3, .modal-baslik h3, .profil-h1 { font-family: var(--font-display); letter-spacing: -.012em; } /* Marka başlığı — sıcak kırmızı gradyan clip + optik ağırlık */ .logo-text h1 { font-weight: 600; font-optical-sizing: auto; background: linear-gradient(118deg, var(--red) 0%, color-mix(in srgb,var(--red) 72%,#7a1c12) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ── Header: daha derin cam ── */ header { backdrop-filter: blur(16px) saturate(185%); -webkit-backdrop-filter: blur(16px) saturate(185%); box-shadow: 0 1px 0 color-mix(in srgb,var(--border) 50%,transparent), 0 8px 28px -12px rgba(28,25,23,.12); } /* ── Yoğunluk barometresi (kahraman) — premium yüzey + iç parıltı ── */ .yogunluk-serit { background-image: var(--premium-surface); border: 1px solid color-mix(in srgb,var(--border) 70%,transparent); border-radius: var(--r-lg); box-shadow: var(--shadow-card), var(--premium-sheen); padding: 12px 18px; } /* İlerleme dolgusu: durum rengini koru, üstüne ışıltı overlay + yumuşak köşe */ .yogunluk-progress-fill { background-image: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); position: relative; overflow: hidden; } .yogunluk-progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-120%); animation: premiumSweep 3.2s ease-in-out infinite; } /* ── Makine kartları — zarif yükseltme + canlı hover ── */ .makine-kart { background-image: var(--premium-surface); border-radius: 18px; box-shadow: var(--shadow-card), var(--premium-sheen); transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-out), padding .25s ease, min-height .25s ease, border-radius .25s ease; } .makine-kart:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--shadow-card-hover), var(--premium-sheen); } .makine-kart:active { transform: translateY(-1px) scale(.998); } /* ── İkincil yüzeyler: tutarlı premium kart dili ── */ .ozet-kart, .feature-card, .admin-card, .rapor-kart, .hub-durum-kart, .olay-panel, .stat-card { box-shadow: var(--shadow-card), var(--premium-sheen); } .ozet-kart, .feature-card, .rapor-kart, .hub-durum-kart { background-image: var(--premium-surface); border-radius: var(--r-md); } .rapor-kart, .feature-card { transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-out); } .rapor-kart:hover, .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover), var(--premium-sheen); } /* ── Hub chip + yuvarlak kontrol butonları: cam + hover ── */ .hub-chip { background-image: var(--premium-surface); box-shadow: var(--shadow-card), var(--premium-sheen); } .tema-btn, .ses-btn, .ayarlar-btn { box-shadow: var(--shadow-card), var(--premium-sheen); transition: transform .2s var(--ease-spring), box-shadow .2s, background .2s; } .ses-btn:hover, .ayarlar-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } /* ── Aktif segment/filtre + Cihaz Ekle: premium gradyan ── */ .mod-btn.aktif { background: linear-gradient(135deg, var(--text), color-mix(in srgb,var(--text) 80%,var(--admin-primary))); box-shadow: 0 4px 12px -4px rgba(28,25,23,.35), var(--premium-sheen); } .filtre-btn.aktif { box-shadow: var(--shadow-card), var(--premium-sheen); } #cihaz-ekle-btn { background: linear-gradient(135deg, var(--adm-accent), color-mix(in srgb,var(--adm-accent) 60%,var(--mavi))) !important; box-shadow: 0 6px 16px -6px color-mix(in srgb,var(--adm-accent) 60%,transparent), var(--premium-sheen); transition: transform .2s var(--ease-spring), box-shadow .2s, filter .2s; } #cihaz-ekle-btn:hover { transform: translateY(-2px); filter: brightness(1.06); } /* ── Yumuşak sıralı kart açılışı (giriş) ── */ @keyframes premiumRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes premiumSweep { 0% { transform: translateX(-120%); } 55%,100% { transform: translateX(220%); } } .makine-grid > .makine-kart { animation: premiumRise .5s var(--ease-out) both; } .makine-grid > .makine-kart:nth-child(1){animation-delay:.02s} .makine-grid > .makine-kart:nth-child(2){animation-delay:.06s} .makine-grid > .makine-kart:nth-child(3){animation-delay:.10s} .makine-grid > .makine-kart:nth-child(4){animation-delay:.14s} .makine-grid > .makine-kart:nth-child(5){animation-delay:.18s} .makine-grid > .makine-kart:nth-child(6){animation-delay:.22s} .makine-grid > .makine-kart:nth-child(7){animation-delay:.26s} .makine-grid > .makine-kart:nth-child(8){animation-delay:.30s} .makine-grid > .makine-kart:nth-child(n+9){animation-delay:.34s} @media (prefers-reduced-motion: reduce) { .makine-grid > .makine-kart { animation: none; } .yogunluk-progress-fill::after { animation: none; } } /* ════════════════════════════════════════════════════════════════════════════ PREMIUM ANİMASYON KATMANI (2.74aq, 5 Haz 2026) — "animasyon candır" ──────────────────────────────────────────────────────────────────────────── GPU-dostu (transform/opacity), jank'sız (PWA bg-jank dersi: layout-shift yok), prefers-reduced-motion korumalı. Çalışan kartlar zaten activeGlow+tamburDon+ mkProgShim ile canlı → üzerine ekleme YOK. Sticky header/filtre-bar'a sadece opacity (lingering-transform sticky'yi bozabilir). 3 sınıf: (1) giriş orkestasyonu, (2) basış geri bildirimi, (3) sekme/filtre pop. ══════════════════════════════════════════════════════════════════════════ */ @keyframes premiumFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes premiumFloatIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes premiumPopIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes premiumPop { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: none; } } @keyframes premiumIconPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } } /* ── (1) Sayfa açılış orkestasyonu — sıralı giriş ── */ header { animation: premiumFadeIn .5s var(--ease-out) both; } /* sticky → sadece opacity */ .yogunluk-serit { animation: premiumFloatIn .55s var(--ease-out) both; animation-delay: .05s; } .ozet-strip { animation: premiumFloatIn .55s var(--ease-out) both; animation-delay: .10s; } .filtre-bar-wrap { animation: premiumFadeIn .5s var(--ease-out) both; animation-delay: .14s; } /* sticky → opacity */ .stats .stat-card { animation: premiumPopIn .5s var(--ease-spring) both; } .stats .stat-card:nth-child(1){animation-delay:.06s} .stats .stat-card:nth-child(2){animation-delay:.12s} .stats .stat-card:nth-child(3){animation-delay:.18s} .stats .stat-card:nth-child(4){animation-delay:.24s} /* ── Yoğunluk ikonu (🟢/🟡/🔴) yumuşak nabız — tek eleman, ucuz ── */ .yogunluk-ikon-wrap { display: inline-block; animation: premiumIconPulse 2.6s var(--ease-out) infinite; transform-origin: center; } /* ── (2) Basış geri bildirimi — dokunsal his (mobil) ── */ .mod-btn, .filtre-btn, .tip-seg-btn, .mini-btn, .canli-aksiyon-btn, .bos-id-chip, .abn-btn, .admin-tab-btn, .op-tab-btn, .bos-bildirim-btn, .kilavuz-btn, .oneri-btn-ana, .modal-primary-btn, .goruntuleme-btn { transition: transform .18s var(--ease-spring), box-shadow .2s, background .2s, color .2s; } .mod-btn:active, .filtre-btn:active, .tip-seg-btn:active, .mini-btn:active, .canli-aksiyon-btn:active, .bos-id-chip:active, .abn-btn:active, .admin-tab-btn:active, .op-tab-btn:active, .bos-bildirim-btn:active, .kilavuz-btn:active, .oneri-btn-ana:active, .modal-primary-btn:active, .goruntuleme-btn:active, #cihaz-ekle-btn:active { transform: scale(.93); } .rapor-kart:active, .feature-card:active, .stat-card:active { transform: translateY(-1px) scale(.99); } /* Tıklanabilir özet/stat kartlarında hover yükselme */ .stat-card, .ozet-kart { transition: transform .2s var(--ease-spring), box-shadow .2s; } .stat-card:hover, .ozet-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover), var(--premium-sheen); } /* ── (3) Sekme/filtre/segment AKTİF olunca pop (sınıf eklenince çalar) ── */ .filtre-btn.aktif, .tip-seg-btn.aktif, .admin-tab-btn.aktif, .op-tab-btn.aktif, .mod-btn.aktif { animation: premiumPop .34s var(--ease-spring); } @media (prefers-reduced-motion: reduce) { header, .yogunluk-serit, .ozet-strip, .filtre-bar-wrap, .stats .stat-card, .yogunluk-ikon-wrap, .filtre-btn.aktif, .tip-seg-btn.aktif, .admin-tab-btn.aktif, .op-tab-btn.aktif, .mod-btn.aktif { animation: none; } } /* ════════════════════════════════════════════════════════════════════════════ PREMIUM DOKUNUŞLAR EK (2.74ar, 5 Haz 2026) — scroll-reveal + ripple + shimmer premium-anim.js ile birlikte. reveal-init SADECE JS ekler → no-JS'te içerik görünür kalır. Ripple currentColor + overlay (tema-duyarlı, ince). ══════════════════════════════════════════════════════════════════════════ */ /* ── (1) Scroll-reveal sınıfları ── */ .reveal-init { opacity: 0; transform: translateY(22px); } .reveal-in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .65s var(--ease-out); } /* ── (2) Ripple — dokunsal dalga (curated güvenli buton seti) ── */ .mod-btn, .filtre-btn, .canli-aksiyon-btn, .modal-primary-btn, .mini-btn, .rapor-kart { position: relative; overflow: hidden; } .premium-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .26; transform: scale(0); pointer-events: none; mix-blend-mode: overlay; animation: premiumRippleA .55s ease-out forwards; } @keyframes premiumRippleA { to { transform: scale(2.4); opacity: 0; } } /* ── (3) Marka başlığında akan sıcak gradyan parıltısı ── */ .logo-text h1 { background-size: 220% auto; animation: brandShimmer 7s linear infinite; } @keyframes brandShimmer { 0% { background-position: 0% center; } 100% { background-position: 220% center; } } @media (prefers-reduced-motion: reduce) { .reveal-init { opacity: 1; transform: none; } /* gizleme yapma */ .premium-ripple { display: none; } .logo-text h1 { animation: none; } } /* ════════════════════════════════════════════════════════════════════════════ PREMIUM DOKUNUŞLAR EK-2 (2.74as) — scroll progress + tema dairesel açılma premium-anim.js scrollProgress() + themeReveal() ile birlikte. ══════════════════════════════════════════════════════════════════════════ */ /* ── (4) Kaydırma ilerleme çubuğu — üstte ince brand gradyan ── */ #premium-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #922b21, var(--red), #e74c3c); box-shadow: 0 0 8px color-mix(in srgb, var(--red) 50%, transparent); z-index: 101; /* shimmer(100) üstü, modal(200) altı */ pointer-events: none; will-change: transform; transition: transform .08s linear; } /* ── (5) Tema geçişi dairesel açılma — içeriği gizlemeyen yayılan parıltı ── */ .premium-theme-sweep { position: fixed; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: .85; background: radial-gradient(circle, color-mix(in srgb, var(--red) 22%, transparent) 0%, transparent 68%); z-index: var(--z-confirm); pointer-events: none; will-change: transform, opacity; transition: transform .58s cubic-bezier(.22,1,.36,1), opacity .5s ease .12s; } .premium-theme-sweep.go { transform: translate(-50%, -50%) scale(1); opacity: 0; } @media (prefers-reduced-motion: reduce) { .premium-theme-sweep { display: none; } } /* ════════════════════════════════════════════════════════════════════════════ PREMIUM KART DOKUNUŞLARI (2.74at) — hover micro-etkileşim + haptik (JS) Mevcut kart animasyonlarına (tamburDon/activeGlow/mkProgShim) DOKUNMAZ. ══════════════════════════════════════════════════════════════════════════ */ .mk-tip-svg-sol, .mk-buyuk-no { transition: transform .38s var(--ease-spring); } .makine-kart:hover .mk-tip-svg-sol { transform: scale(1.14) rotate(-7deg); } .makine-kart:hover .mk-buyuk-no { transform: scale(1.06); } /* Çalışan kart ilerleme çubuğunda yumuşak kırmızı parıltı */ .mk-dolu .mk-progress-fill { box-shadow: 0 0 10px -2px color-mix(in srgb, var(--kirmizi) 55%, transparent); } @media (prefers-reduced-motion: reduce) { .makine-kart:hover .mk-tip-svg-sol, .makine-kart:hover .mk-buyuk-no { transform: none; } } /* ════════════════════════════════════════════════════════════════════════════ PREMIUM ANLAMLI MİKRO-ETKİLEŞİM (2.74au) — konfeti + sıra rozeti + duyuru Konfeti window.premiumConfetti() ile (siraSendeBildir "sıra sende" anı). ══════════════════════════════════════════════════════════════════════════ */ /* ── (6) Konfeti partikülleri ── */ .premium-confetti { position: fixed; z-index: var(--z-confirm); pointer-events: none; width: 0; height: 0; } .premium-confetti i { position: absolute; left: 0; top: 0; width: 9px; height: 6px; opacity: 1; will-change: transform, opacity; animation-name: confettiBurst; animation-timing-function: cubic-bezier(.2,.6,.3,1); animation-fill-mode: forwards; } @keyframes confettiBurst { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) rotate(var(--r)); opacity: 0; } } /* ── "Sıranız Geldi!" rozeti yumuşak nabız (kişisel sıra kartı) ── */ .sira-kartim-no.birinci { animation: premiumBirinci 1.6s var(--ease-out) infinite; will-change: transform; } @keyframes premiumBirinci { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } } /* ── Duyuru banner yumuşak giriş ── */ #duyuru-banner { animation: premiumFloatIn .5s var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .sira-kartim-no.birinci, #duyuru-banner { animation: none; } } /* ════════════════════════════════════════════════════════════════════════════ PREMIUM VERİ GÖRSELLEŞTİRME (2.74av) — barometre dolum + Pulsu + heatmap Heatmap hücre hover'ı zaten var (scale 1.3) — dokunulmadı. ══════════════════════════════════════════════════════════════════════════ */ /* ── Yoğunluk barometresi: yumuşak animasyonlu dolum (width 0→%X süzülür) ── */ .yogunluk-progress-fill { transition: width .85s var(--ease-out); } /* ── "Bugünün Pulsu" şeridi: giriş + ikon canlılığı ── */ .gunluk-pulse { animation: premiumFloatIn .5s var(--ease-out) both; } .gp-ikon { display: inline-block; animation: premiumIconPulse 3s var(--ease-out) infinite; transform-origin: center; } /* ── Heatmap konteyneri: yumuşak belirme ── */ .heatmap-container { animation: premiumFadeIn .6s var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .yogunluk-progress-fill { transition: none; } .gunluk-pulse, .gp-ikon, .heatmap-container { animation: none; } }