/* Zirkonik — derlenmiş tailwind.css'te bulunmayan yardımcı sınıflar. * tailwind.css FireVibe zamanında budanmış (purge) olduğundan sonradan * eklenen işaretlemelerin kullandığı sınıflar burada elle tanımlanır. * ipad.css gibi elle yazılmıştır; npm build tarafından ezilmez. */ .flex-wrap { flex-wrap: wrap; } .col-span-2 { grid-column: span 2 / span 2; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .last\:border-b-0:last-child { border-bottom-width: 0; } .max-h-64 { max-height: 16rem; } .max-h-\[80vh\] { max-height: 80vh; } .max-h-\[85vh\] { max-height: 85vh; } .rounded-t-2xl { border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .bg-white\/20 { background-color: rgba(255, 255, 255, .2); } .border-white\/25 { border-color: rgba(255, 255, 255, .25); } /* Yatay kayma emniyeti: overflow-y:auto tek başına yatay ekseni de * kaydırılabilir yapar (CSS spec: visible → auto'ya yükseltilir). * İçerik taşsa bile sayfa gövdesi asla yana kaymasın. */ .h-screen.w-screen.overflow-y-auto { overflow-x: hidden; } /* ============ Gösterge kartları — karanlık neon güverte ============ */ .zk-stats-deck { position: relative; margin-top: 12px; } .zk-stats-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .zk-stat { position: relative; overflow: hidden; width: 100%; text-align: left; border-radius: 14px; background: linear-gradient(160deg, rgba(91,155,255,.17), rgba(91,155,255,.04)), radial-gradient(120% 130% at 50% 0%, #22304A 0%, #171E2E 60%, #101521 100%); border: 1px solid rgba(91,155,255,.30); padding: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px -14px rgba(0,0,0,.55); } .zk-stat::after { content: ''; position: absolute; right: -26px; top: -26px; width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(91,155,255,.25); outline: 1px solid rgba(91,155,255,.12); outline-offset: 10px; pointer-events: none; } .zk-stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(91,155,255,.8), transparent); } .zk-stat-icon { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 11px; font-size: 18px; color: #5B9BFF; background: rgba(91,155,255,.12); border: 1px solid rgba(91,155,255,.45); box-shadow: 0 0 16px -3px rgba(91,155,255,.6); } .zk-stat-value { margin-top: 12px; font-family: var(--font-heading); font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 16px rgba(91,155,255,.5); } .zk-stat-value-sm { font-size: 21px; } .zk-stat-label { margin-top: 5px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); } .zk-stat-ghost { position: absolute; right: -8px; bottom: -12px; font-size: 52px; line-height: 1; opacity: .05; pointer-events: none; color: #5B9BFF; } .zk-stat-green { background: linear-gradient(160deg, rgba(62,224,180,.17), rgba(62,224,180,.04)), radial-gradient(120% 130% at 50% 0%, #22304A 0%, #171E2E 60%, #101521 100%); border-color: rgba(62,224,180,.30); } .zk-stat-green::after { border-color: rgba(62,224,180,.25); outline-color: rgba(62,224,180,.12); } .zk-stat-green::before { background: linear-gradient(90deg, transparent, rgba(62,224,180,.8), transparent); } .zk-stat-green .zk-stat-icon { color: #3EE0B4; background: rgba(62,224,180,.12); border-color: rgba(62,224,180,.45); box-shadow: 0 0 16px -3px rgba(62,224,180,.6); } .zk-stat-green .zk-stat-value { text-shadow: 0 0 16px rgba(62,224,180,.5); } .zk-stat-green .zk-stat-ghost { color: #3EE0B4; } .zk-stat-amber { background: linear-gradient(160deg, rgba(240,160,60,.19), rgba(240,160,60,.05)), radial-gradient(120% 130% at 50% 0%, #22304A 0%, #171E2E 60%, #101521 100%); border-color: rgba(240,160,60,.38); } .zk-stat-amber::after { border-color: rgba(240,160,60,.28); outline-color: rgba(240,160,60,.13); } .zk-stat-amber::before { background: linear-gradient(90deg, transparent, rgba(240,160,60,.85), transparent); } .zk-stat-amber .zk-stat-icon { color: #F0A03C; background: rgba(240,160,60,.12); border-color: rgba(240,160,60,.5); box-shadow: 0 0 16px -3px rgba(240,160,60,.6); } .zk-stat-amber .zk-stat-value { text-shadow: 0 0 16px rgba(240,160,60,.55); } .zk-stat-amber .zk-stat-ghost { color: #F0A03C; } /* ============ Arı kovanı üretim panosu — "komuta güvertesi" ============ */ .zk-hive-deck { position: relative; padding: 4px 0 6px; } .zk-hive-deck-title { position: relative; margin: 0 4px 10px; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted-foreground); } .zk-hive-deck-title .zk-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #5B9BFF; box-shadow: 0 0 8px 1px rgba(91,155,255,.8); } .zk-hive { position: relative; display: flex; flex-direction: column; align-items: center; } .zk-hive-row { display: flex; justify-content: center; gap: 7px; } .zk-hive-row + .zk-hive-row { margin-top: -24px; } .zk-hex { position: relative; width: 106px; height: 122px; border: none; padding: 0; background: rgba(120,140,180,.28); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 8px 12px rgba(0,0,0,.30)); } .zk-hex-wrap { filter: none; } .zk-hex-inner { position: absolute; inset: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 10px; background: #191E2A; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .zk-hex-name { font-size: 10px; font-weight: 700; text-align: center; line-height: 1.2; max-height: 2.4em; overflow: hidden; color: rgba(255,255,255,.6); } .zk-hex-count { font-family: var(--font-heading); font-size: 20px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.45); } .zk-hex-sub { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.45); } .zk-hex-busy { background: linear-gradient(160deg, #5B9BFF, #2C5FB8); } .zk-hex-busy .zk-hex-inner { background: linear-gradient(160deg, #1C2740, #131A2A); } .zk-hex-busy .zk-hex-name { color: rgba(255,255,255,.9); } .zk-hex-busy .zk-hex-count { color: #fff; text-shadow: 0 0 12px rgba(91,155,255,.6); } .zk-hex-busy .zk-hex-sub { color: rgba(91,155,255,.9); } .zk-hex-alert .zk-hex-sub { color: #F5B76B; } .zk-hex-selected { background: linear-gradient(160deg, #F0A03C, #A14F22); } .zk-hex-selected .zk-hex-inner { background: linear-gradient(160deg, #3A2A12, #241A0B); } .zk-hex-selected .zk-hex-name { color: rgba(255,255,255,.9); } .zk-hex-selected .zk-hex-count { color: #fff; text-shadow: 0 0 12px rgba(240,160,60,.7); } /* ============ Haftalık sütun grafik ============ */ .zk-cols { display: flex; align-items: flex-end; gap: 10px; height: 128px; padding-top: 4px; border-bottom: 1px solid var(--color-border); } .zk-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; } .zk-col-val { font-size: 11px; font-weight: 700; line-height: 1; } .zk-col-bar { width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; min-height: 3px; background: linear-gradient(180deg, #4A86E0, #2B57A8); } .zk-col-zero .zk-col-bar { background: var(--color-muted); height: 3px; border-radius: 2px; } .zk-col-today .zk-col-bar { background: linear-gradient(180deg, #F0A03C, #C0761E); box-shadow: 0 0 14px -2px rgba(240,160,60,.55); } .zk-cols-labels { display: flex; gap: 10px; margin-top: 6px; } .zk-cols-labels span { flex: 1; text-align: center; font-size: 10px; font-weight: 600; color: var(--color-muted-foreground); } .zk-cols-labels .zk-col-today-label { color: var(--color-accent); font-weight: 800; } /* ============ Çalışan iş dağılımı satırları ============ */ .zk-staff-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; } .zk-staff-avatar { flex: none; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-secondary); color: var(--color-secondary-foreground); font-weight: 800; font-size: 13px; } .zk-staff-main { flex: 1; min-width: 0; } .zk-staff-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; } .zk-staff-top .zk-staff-count { font-family: var(--font-heading); } .zk-staff-bar { margin-top: 5px; height: 8px; border-radius: 4px; background: var(--color-muted); overflow: hidden; } .zk-staff-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3D7CDC, #6FA5EF); } /* ============ Özel seçici (zk-picker.js) — listeler ve takvim ============ */ .zk-picker-overlay { position: fixed; inset: 0; z-index: 90; } .zk-picker-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); } .zk-picker-sheet { position: absolute; bottom: 0; left: 0; width: 100%; max-height: 72vh; display: flex; flex-direction: column; background: var(--color-card); border-radius: 18px 18px 0 0; padding: 8px 16px calc(env(safe-area-inset-bottom) + 18px); box-shadow: 0 -12px 40px rgba(8,30,39,.25); } .zk-picker-grab { flex: 0 0 auto; width: 40px; height: 4px; margin: 4px auto 10px; border-radius: 2px; background: var(--color-border); } /* 2026-09-12: baslik satiri artik Kapat dugmesini de tasiyor. Baslik ve tutamak flex icinde EZILMEMELI (flex-shrink:0), yoksa uzun listede govde yerine onlar kuculuyor ve liste kaydirilamiyor gibi gorunuyor. */ .zk-picker-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .zk-picker-title { margin: 0; font-family: var(--font-heading); font-size: 15px; font-weight: 800; } .zk-picker-close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 10px; background: var(--color-muted); color: var(--color-muted-foreground); font-size: 15px; font-weight: 800; line-height: 1; } /* Govde tek kaydirilan alan: acik yukseklik + kendi kaydirmasini kapsa. overscroll-behavior olmadan iOS kaydirmayi arkadaki sayfaya devrediyor ve liste yerinde cakili duruyordu. */ .zk-picker-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .zk-picker-group { margin: 12px 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); } .zk-picker-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 10px; border: none; background: none; text-align: left; font-size: 14px; font-weight: 600; color: var(--color-foreground); border-bottom: 1px solid var(--color-muted); } .zk-picker-row:last-child { border-bottom: none; } .zk-picker-row-on { color: var(--color-primary); font-weight: 800; } .zk-picker-check { color: var(--color-primary); font-weight: 800; } .zk-picker-empty { padding: 16px 0; text-align: center; font-size: 13px; color: var(--color-muted-foreground); } /* 2026-09-19: masaustunde alt-sayfa yanlis duruyordu — form 840 px'lik ortalanmis bir sutunda, liste ise ekranin tamamina yayilip sola kayiyordu. Fare + genis ekranda liste alanin ALTINDA, alanla ayni hizada aciliyor (konum zk-picker.js/alanaYerlestir'den geliyor). Dokunmatikte alt-sayfa oldugu gibi kaliyor: parmakla en rahat erisilen yer ekranin alti. */ .zk-picker-overlay.zk-picker-anchored .zk-picker-backdrop { background: transparent; } .zk-picker-overlay.zk-picker-anchored .zk-picker-sheet { border-radius: 14px; padding: 10px 14px 12px; border: 1px solid var(--color-border); box-shadow: 0 18px 44px -12px rgba(0,0,0,.55); } .zk-picker-overlay.zk-picker-anchored .zk-picker-grab { display: none; } .zk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .zk-cal-month { margin: 0; font-family: var(--font-heading); font-size: 14px; font-weight: 800; } .zk-cal-nav { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-input); font-size: 20px; color: var(--color-primary); } .zk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .zk-cal-cell { display: flex; height: 40px; align-items: center; justify-content: center; border: none; background: none; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--color-foreground); } .zk-cal-dow { height: 26px; font-size: 10px; font-weight: 800; color: var(--color-muted-foreground); } .zk-cal-today { border: 1px solid var(--color-primary); color: var(--color-primary); } .zk-cal-sel { background: var(--color-primary); color: var(--color-primary-foreground); font-weight: 800; } .zk-cal-clear { display: block; width: 100%; margin-top: 10px; padding: 12px; border: none; border-radius: 12px; background: var(--color-muted); font-size: 13px; font-weight: 700; color: var(--color-muted-foreground); } /* ============ İstasyon yük/akış göstergeleri ============ */ /* Kızıl-turuncu "ısınan" istasyon: mevcut + gelen iş eşiği aştı */ .zk-hex-hot { background: linear-gradient(160deg, #FFA45C, #C25E0C); } .zk-hex-hot .zk-hex-inner { background: linear-gradient(160deg, #3A2410, #241708); } .zk-hex-hot .zk-hex-name { color: rgba(255,255,255,.92); } .zk-hex-hot .zk-hex-count { color: #fff; text-shadow: 0 0 12px rgba(255,164,92,.75); } .zk-hex-hot .zk-hex-sub { color: #FFB08A; } @keyframes zkHotPulse { 0%, 100% { filter: drop-shadow(0 8px 12px rgba(0,0,0,.30)) drop-shadow(0 0 6px rgba(255,150,74,.35)); } 50% { filter: drop-shadow(0 8px 12px rgba(0,0,0,.30)) drop-shadow(0 0 16px rgba(255,150,74,.75)); } } .zk-hex-hot { animation: zkHotPulse 1.8s ease-in-out infinite; } /* Gelen iş rozeti: bir sonraki aşamada bu istasyona akacak iş sayısı */ .zk-hex-in { display: inline-flex; align-items: center; gap: 2px; margin-bottom: 1px; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; color: #3D1F05; background: linear-gradient(160deg, #FFC894, #F0A03C); box-shadow: 0 0 10px -2px rgba(240,160,60,.8); } /* Lejant */ .zk-hive-legend { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 12px; } .zk-hive-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--color-muted-foreground); } .zk-lg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; } .zk-lg-cyan { background: linear-gradient(160deg, #5B9BFF, #2C5FB8); } .zk-lg-amber { background: linear-gradient(160deg, #FFC894, #F0A03C); } .zk-lg-hot { background: linear-gradient(160deg, #FFA45C, #C25E0C); } /* ============ Geniş ekran (iPad) — zk bileşen ayarları ============ * ipad.css'te değil burada: yükleme sırası gereği zk sınıflarının * geniş-ekran halleri kendi tanımlarından SONRA gelmeli. */ @media (min-width: 640px) { .zk-stats-grid { grid-template-columns: repeat(4, 1fr); } .zk-hex { width: 148px; height: 170px; } .zk-hive-row { gap: 10px; } .zk-hive-row + .zk-hive-row { margin-top: -33px; } .zk-hex-name { font-size: 12px; } .zk-hex-count { font-size: 26px; } .zk-hex-sub { font-size: 11px; } .zk-hex-in { font-size: 11px; } #wf-container svg { max-width: 560px; margin-left: auto; margin-right: auto; } .zk-cols { height: 160px; } .grid.grid-cols-2 { gap: 14px; } } /* ============ Masaüstü (web) optimizasyonu ============ */ /* Mobil/tablet'te sarmalayıcı yokmuş gibi davranır. */ .zk-charts-row { display: contents; } @media (min-width: 1200px) { /* İki grafik yan yana */ .zk-charts-row { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } /* Formlar devasa genişlemesin — okunur sütunda ortalansın */ #job-form, #panel-new, #panel-list, #panel-prices, #orders-list { max-width: 840px; margin-left: auto; margin-right: auto; } /* Fiyat listeleri iki sütun (kartlar bölünmez) */ #pl-main, #prices-list { column-count: 2; column-gap: 20px; } #pl-main > section, #prices-list > section { break-inside: avoid; } } /* Fare olan cihazlarda (masaüstü) tıklanabilirlik hissi */ @media (hover: hover) and (pointer: fine) { button, select, input[type="date"], [onclick] { cursor: pointer; } .zk-stat { transition: transform .15s ease, box-shadow .15s ease; } .zk-stat:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 32px -14px rgba(0,0,0,.65); } .zk-hex { transition: filter .15s ease, transform .15s ease; } .zk-hex:hover { transform: translateY(-3px); filter: drop-shadow(0 12px 16px rgba(0,0,0,.40)); } .zk-picker-row:hover { background: var(--color-muted); } .zk-cal-day:hover { background: var(--color-secondary); } .zk-staff-row:hover .zk-staff-avatar { background: var(--color-primary); color: #fff; } } /* ============ Masaüstü: sayfa bazlı yerleşimler ============ */ @media (min-width: 1200px) { /* Ayrı-kart listeleri iki sütun (space-y marjları sıfırlanır) */ #jobs-list, #approved-list, #pending-list, #staff-list, #labs-list, [data-page="siparisler"] #orders-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } #jobs-list > *, #approved-list > *, #pending-list > *, #staff-list > *, #labs-list > *, [data-page="siparisler"] #orders-list > * { margin-top: 0 !important; } /* Üretim panosu: solda istasyon ağı, sağda seçili istasyonun işleri */ [data-page="retim"] #production-board { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; } [data-page="retim"] #production-board > * { margin-top: 0 !important; } /* İş detayı: aşama şeridi tam genişlik, alt kartlar iki sütun */ [data-page="detay"] main { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } [data-page="detay"] main > * { margin-top: 0 !important; } [data-page="detay"] main > section:first-child { grid-column: 1 / -1; } /* Finans üst istatistikleri tek sırada */ [data-page="finans"] main > section:first-child .grid.grid-cols-2 { grid-template-columns: repeat(4, 1fr); } /* Dar içerikli sayfalar ortalanmış okunur sütunda */ [data-page="profil"] main, [data-page="rol-ve-yetki-detay"] main { max-width: 760px; margin-left: auto; margin-right: auto; } } /* ============ Mobil tarayıcı: dinamik viewport yüksekliği ============ * Safari/Chrome'da 100vh, gizlenen adres çubuğunu da sayar; içerik alt * bar arkasında kalır. dvh destekleyen tarayıcılarda gerçek görünür * yükseklik kullanılır (iOS uygulaması WKWebView'de fark yaratmaz). */ @supports (height: 100dvh) { .h-screen { height: 100dvh; } } /* Çok geniş ekranlar: listeler üç kolon */ @media (min-width: 1500px) { #jobs-list, #approved-list, #pending-list, #staff-list, #labs-list, [data-page="siparisler"] #orders-list { grid-template-columns: 1fr 1fr 1fr; } #pl-main, #prices-list { column-count: 3; } } /* Diş şeması: hover + klavye odak halkası (masaüstü inceliği) */ @media (hover: hover) and (pointer: fine) { [data-tooth]:not(.zk-sel):hover [data-crown] { fill: #DCEAFB; } } [data-tooth]:focus-visible [data-crown] { stroke: var(--color-primary); stroke-width: 2.5; } /* ============ Koyu tema: derlenmiş saydamlık türevleri ============ * tailwind.css /NN türevlerini ESKİ açık paletle sabitlemiş; burada * yeni koyu paletin RGB değerleriyle eziliyor (otomatik üretildi). */ .bg-accent\/10 { background-color: rgba(240, 160, 60, 0.1) !important; } .bg-accent\/5 { background-color: rgba(240, 160, 60, 0.05) !important; } .bg-card\/95 { background-color: rgba(21, 23, 28, 0.95) !important; } .bg-destructive\/10 { background-color: rgba(239, 83, 80, 0.1) !important; } .bg-primary\/10 { background-color: rgba(61, 124, 220, 0.1) !important; } .bg-primary\/5 { background-color: rgba(61, 124, 220, 0.05) !important; } .bg-success\/10 { background-color: rgba(16, 185, 129, 0.1) !important; } .border-accent\/20 { border-color: rgba(240, 160, 60, 0.2) !important; } .border-accent\/25 { border-color: rgba(240, 160, 60, 0.25) !important; } .border-accent\/30 { border-color: rgba(240, 160, 60, 0.3) !important; } .border-accent\/35 { border-color: rgba(240, 160, 60, 0.35) !important; } .border-destructive\/25 { border-color: rgba(239, 83, 80, 0.25) !important; } .border-primary\/15 { border-color: rgba(61, 124, 220, 0.15) !important; } .border-accent\/40 { border-color: rgba(240, 160, 60, 0.4); } /* ============ Sabit marka filigranı ============ * Tüm ekranlarda ortada duran, kaydırmayla OYNAMAYAN dev silik amblem. * pointer-events:none → tıklamaları asla yakalamaz; z-index:5 → içerik * üstünde ama alt menü (z-20+) ve sheet'lerin (z-40+) altında. */ body::after { content: ''; position: fixed; inset: 0; background: url('../brand/mark.png') no-repeat center 44%; background-size: min(82vw, 560px); opacity: .04; pointer-events: none; z-index: 5; } /* --- Bildirim rozeti (zil ikonundaki kırmızı sayaç) --- */ .zk-notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #EF5350; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--color-background); } .zk-notif-badge[hidden] { display: none; } /* Bağlantı durumu şeridi (js/zk-guard.js tarafından eklenir/kaldırılır) */ #zk-offline-banner { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); background: #EF5350; color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; text-align: center; transform: translateY(-100%); transition: transform .25s ease; } #zk-offline-banner.zk-show { transform: translateY(0); } /* Yükleme çıkmazı koruması: internet yok/oturum kontrolü asılı kalırsa * tam ekran uyarı (js/zk-guard.js tarafından eklenir/kaldırılır). */ #zk-offline-overlay { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; background: var(--color-background, #0E1013); padding: 24px; } #zk-offline-overlay .zk-offline-box { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 320px; } #zk-offline-overlay .zk-offline-icon { font-size: 40px; color: var(--color-destructive, #EF5350); width: 72px; height: 72px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-destructive, #EF5350) 12%, transparent); margin-bottom: 18px; } #zk-offline-overlay .zk-offline-title { font-family: var(--font-heading, sans-serif); font-size: 18px; font-weight: 800; color: var(--color-foreground, #F2F4F7); margin: 0; } #zk-offline-overlay .zk-offline-sub { font-family: var(--font-body, sans-serif); font-size: 13px; color: var(--color-muted-foreground, #98A0AD); margin: 8px 0 22px; line-height: 1.5; } #zk-offline-overlay button { height: 48px; width: 100%; border: none; border-radius: var(--radius, 12px); background: var(--color-primary, #3D7CDC); color: #FFFFFF; font-family: var(--font-body, sans-serif); font-size: 14px; font-weight: 700; cursor: pointer; } /* ================== Akıcı geçişler (2026-09-11) ================== */ /* Sayfa açılışı: sert kesme yerine hafif bir belirme. */ /* DİKKAT: transform KULLANILMAZ — animasyon bitince "both" fill-mode son * kare stilini kalıcı bırakır; transform:translateY(0) bile olsa body'de * kalıcı kalırsa TÜM sayfadaki position:fixed elemanları (alt menü, * sheet'ler, bildirim şeridi...) artık viewport'a değil body'ye göre * konumlanır — bu da iOS'ta iç içe listelerin dokunmatik kaydırmasını * tıkadı (2026-09-11). Saf opacity ile aynı "belirme" hissi, yan etkisiz. */ body { animation: zkPageIn .2s ease both; } @keyframes zkPageIn { from { opacity: 0; } to { opacity: 1; } } /* Sayfadan sayfaya geçiş: tarayıcı destekliyorsa (Cross-Document View * Transitions) otomatik yumuşak geçiş uygulanır; desteklemiyorsa sessizce * hiçbir şey yapmaz — mevcut anlık geçiş aynen kalır, güvenli/geri uyumlu. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } /* "-sheet" ile biten TÜM alt-sayfa/modal panelleri (projede tutarlı bir * isimlendirme kuralı) su gibi akan bir açılış/kapanışla gelsin. Yalnızca bu * kalıba özel — .hidden sınıfının GENEL davranışını bozmaz (hata mesajları, * diğer basit göster/gizle'ler display:none olarak aynen kalır). */ [id$="-sheet"] { transition: opacity .15s ease; } [id$="-sheet"].hidden { display: block !important; opacity: 0; pointer-events: none; } [id$="-sheet"]:not(.hidden) { opacity: 1; } /* DİKKAT: açık haldeyken transform HİÇ uygulanmaz (yalnız .hidden'da) — * kalıcı bir transform (translateY(0) bile olsa) elemanı yeni bir * "containing block" yapıyor ve bu, iOS WKWebView'de içindeki * overflow-y:auto listelerin dokunmatik kaydırmasını TIKIYORDU (2026-09-11'de * doktor cari sheet'inde yaşandı — liste aşağı kayıyor ama yukarı dönmüyordu). * transform:none ⇄ translateY(16px) arası geçiş yine animasyonlu kalır. */ [id$="-sheet"] .rounded-t-theme { transition: transform .2s cubic-bezier(.32,.72,0,1); } [id$="-sheet"].hidden .rounded-t-theme { transform: translateY(16px); } /* Açık/kapalı anahtar (yetki listesi vb.) — evrensel switch görünümü, * X/tik ikonundan çok daha net "açık mı kapalı mı" anlatıyor. */ .zk-switch { position: relative; display: inline-flex; align-items: center; width: 48px; height: 28px; border-radius: 999px; background: var(--color-muted); border: none; padding: 0; cursor: pointer; transition: background-color .18s ease; flex-shrink: 0; } .zk-switch.zk-on { background: var(--color-success); } .zk-switch .zk-switch-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease; } .zk-switch.zk-on .zk-switch-knob { transform: translateX(20px); } /* Kart "seri seri" akış animasyonu — js/zk-guard.js'teki zkFlow.stagger() * her karta artan bir animation-delay (inline style) verir, bu sınıf * yalnız hareketi tanımlar. Bitişte transform:none'a oturur — kalıcı bir * transform ASLA bırakılmaz (translateY(0) dahil), yoksa position:fixed * alt öğeler için yeni bir containing block oluşup iOS'ta iç içe * overflow-y:auto listelerin scroll momentum'unu kilitler (2026-09-11'de * bir kez yaşandı, zk-utils.css'teki sheet animasyonunda düzeltildi). * Sadece opacity+transform kullanılıyor — ucuz Android cihazlarda da * GPU'da ucuza render edilir. */ .zk-stagger-item { opacity: 0; animation: zkCardIn .19s cubic-bezier(.16,1,.3,1) both; } @keyframes zkCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Sekme/panel geçişinde yönlü kayma (soldan/sağdan) — sekme sırasına göre * hangi yönden geldiğini gösterir. Aynı prensip: bitiş durumu her zaman * transform:none. */ .zk-panel-in-right { animation: zkPanelInRight .19s cubic-bezier(.16,1,.3,1) both; } .zk-panel-in-left { animation: zkPanelInLeft .19s cubic-bezier(.16,1,.3,1) both; } @keyframes zkPanelInRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes zkPanelInLeft { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } /* ============================================================ 2026-09-12 — Derlenmiş Tailwind'de EKSİK kalan yardımcı sınıflar css/tailwind.css 15 Ağustos'ta üretilmiş; o tarihten sonra yazılan köşeli parantezli (arbitrary value) sınıfların hiçbiri derlenmemiş. En görünür sonucu: max-h-[88vh] hiç uygulanmadığı için Doktorlar ekranında doktora basınca açılan cari sayfası yükseklik sınırı almıyor, içindeki liste kaydırılamıyor ve kullanıcı sıkışıyordu. Kurallar Tailwind'in kendi çıktısından alındı; tailwind.css'e dokunulmadı ki mevcut stiller kaybolmasın. ============================================================ */ .bottom-\[76px\] { bottom: 76px; } .h-\[72px\] { height: 72px; } .max-h-\[80vh\] { max-height: 80vh; } .max-h-\[85vh\] { max-height: 85vh; } .max-h-\[88vh\] { max-height: 88vh; } .max-w-\[260px\] { max-width: 260px; } .max-w-\[290px\] { max-width: 290px; } .min-w-\[45px\] { min-width: 45px; } .min-w-\[48px\] { min-width: 48px; } .min-w-\[50px\] { min-width: 50px; } .min-w-\[54px\] { min-width: 54px; } .min-w-\[55px\] { min-width: 55px; } .min-w-\[62px\] { min-width: 62px; } .min-w-\[68px\] { min-width: 68px; } .min-w-\[74px\] { min-width: 74px; } .text-\[10px\] { font-size: 12px; } .text-\[11px\] { font-size: 13px; } .text-\[17px\] { font-size: 17px; } .text-\[19px\] { font-size: 19px; } .text-\[21px\] { font-size: 21px; } .text-\[22px\] { font-size: 22px; } .text-\[23px\] { font-size: 23px; } .text-\[25px\] { font-size: 25px; } .text-\[9px\] { font-size: 11px; } .tracking-\[0\.14em\] { letter-spacing: 0.14em; } .tracking-\[0\.16em\] { letter-spacing: 0.16em; } .tracking-\[0\.18em\] { letter-spacing: 0.18em; } .tracking-\[0\.1em\] { letter-spacing: 0.1em; } .shadow-\[0_-8px_24px_rgba\(23\,36\,44\,0\.06\)\] { --tw-shadow: 0 -8px 24px rgba(23,36,44,0.06); box-shadow: 0 -8px 24px rgba(23,36,44,0.06); } /* iOS/WKWebView: bir alt-sayfa içindeki liste sona geldiğinde kaydırma arkadaki sayfaya devrediliyor ve liste yerinde çakılı kalmış gibi görünüyordu. Kaydırmayı kendi kutusunda tut. */ .overflow-y-auto { overscroll-behavior: contain; } /* 2026-09-12: cari paneli 88vh'de üstte gereksiz boşluk bırakıyor, listeye az yer kalıyordu. */ .max-h-\[93vh\] { max-height: 93vh; } /* Faturasız işler uyarısının kenarlığı — derlenmiş Tailwind'de yoktu. */ .border-destructive\/30 { border-color: rgb(179 38 45 / 0.3); } /* 2026-09-12: cari paneli önce "Yükleniyor" boyutunda açılıp veri gelince uzuyordu; panel alta sabitli olduğu için üst kenarı iki aşamada yukarı zıplıyor, "ortada takılıp sonra devam ediyor" gibi görünüyordu. Yükseklik sabitlendi: içerik dolunca panel büyümüyor, yalnız içindeki liste uzuyor. */ .h-\[93vh\] { height: 93vh; } /* 2026-09-12: Küçük yazılar telefonda okunmuyordu. Bunlar dün "eksik Tailwind sınıfları" düzeltilene kadar hiç uygulanmıyordu; çalışmaya başlayınca gerçekten 9-11 px oldular ve fazla küçük kaldılar. Bir tık büyütüldü: 9→11, 10→12, 11→13 px (yukarıda). Standart küçük boyut da bir adım arttı. Orta ve büyük boyutlara (text-sm ve üstü) DOKUNULMADI. */ .text-xs { font-size: 13px; line-height: 1.15rem; } /* 2026-09-12 (tasarım raporu): derlenmiş Tailwind'de olmayan iki sınıf daha. border-destructive/40 → gecikmiş hakediş kartı renksiz kalıyordu. active:opacity-70 → doktor kartında dokunma geri bildirimi çalışmıyordu. */ .border-destructive\/40 { border-color: rgb(179 38 45 / 0.4); } .active\:opacity-70:active { opacity: 0.7; } /* Fiyat satırındaki "Genel 25" etiketi tek satırda kalsın. */ .whitespace-nowrap { white-space: nowrap; } /* 2026-09-13: web sürümünden uygulamaya alınan ekranların (profil, stok, giriş, kullanım kılavuzu) kullandığı, derlenmiş Tailwind'de bulunmayan sınıflar. Renkler tailwind.css'in eski paletiyle değil, canlı tema değişkeniyle uyumlu (--color-primary: #3D7CDC). */ .accent-primary { accent-color: var(--color-primary); } .rounded { border-radius: 0.25rem; } .border-primary\/40 { border-color: rgba(61, 124, 220, 0.4); } .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); } /* ============ Aşağıya çek, güncelle (zk-ptr.js) ============ */ /* Gösterge sayfanın en üstünde, ortada; parmakla çekildikçe aşağı iner. Yalnız dokunmatik cihazlarda kurulur (bkz. zk-ptr.js). */ #zk-ptr { position: fixed; top: 0; left: 50%; z-index: 80; transform: translate(-50%, 0); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 8px; margin-top: calc(env(safe-area-inset-top) + 6px); padding: 8px 14px; border-radius: 9999px; background: var(--color-card); border: 1px solid var(--color-border); box-shadow: 0 10px 28px -10px rgba(0,0,0,.55); font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--color-muted-foreground); white-space: nowrap; } #zk-ptr.zk-ptr-hazir { color: var(--color-primary); } .zk-ptr-cark { width: 14px; height: 14px; border-radius: 9999px; flex: 0 0 auto; border: 2px solid var(--color-border); border-top-color: var(--color-primary); } #zk-ptr.zk-ptr-hazir .zk-ptr-cark { border-color: var(--color-primary); border-top-color: transparent; } #zk-ptr.zk-ptr-donuyor .zk-ptr-cark { animation: zk-ptr-don .7s linear infinite; } @keyframes zk-ptr-don { to { transform: rotate(360deg); } } /* ============ Açık tema (zk-tema.js) ============ */ /* Renkler her sayfanın kendi