/* ================================================================
global-mobile-fix.css — Hastane Yönetim Sistemi
Global Mobil Optimizasyon & UX Düzeltmeleri
v1.0.0 | Mobile-First | Core Web Vitals Ready
================================================================
KULLANIM: içinde mevcut CSS'lerden ÖNCE yükle.
BÖLÜMLER:
1. Design Token'ları (Mevcut :root ile senkronize)
2. Box Model & Temel Sıfırlama
3. Anti-Zoom & Viewport Kuralları
4. Dokunmatik Optimizasyon
5. Form Elemanları — Anti-Zoom + Touch-Friendly
6. Tablo → Kart Görünümü (Card View)
7. Tablo → Yatay Kaydırma (Scroll View — alternatif)
8. Accordion Bileşeni
9. Kompakt UI Yardımcıları
10. Performans Animasyonları
11. Z-Index Yönetim Sistemi
12. Scroll İyileştirmeleri
13. Utility Sınıfları
================================================================ */
/* ================================================================
1. DESIGN TOKEN'LARI
Mevcut :root değişkenleriyle çakışmamak için ek token'lar.
================================================================ */
:root {
/* Touch Target Minimumları (WCAG 2.5.5) */
--touch-min: 44px;
--touch-sm: 36px;
/* Z-Index Katman Sistemi */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
--z-tooltip: 600;
--z-bottom-nav: 1000;
/* Geçiş Süreleri */
--dur-fast: 150ms;
--dur-normal: 250ms;
--dur-slow: 400ms;
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Gerçek viewport yüksekliği */
--vh: 1vh;
/* Kompakt spacing ölçeği */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
}
/* ================================================================
2. BOX MODEL & TEMEL SIFIRLAMA
================================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
/* Reflow'u tetikleyecek özellikleri sıfırla */
-webkit-tap-highlight-color: transparent;
/* iOS ghost tıklama rengi */
}
html {
/* Yön değişiminde font ölçeklenmesini engelle */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* 300ms gecikmeyi kaldır — Tüm site için */
touch-action: manipulation;
/* Smooth scroll — Layout-shift yaratmadan */
scroll-behavior: smooth;
/* Overscroll bounce'u yönet */
overscroll-behavior-y: contain;
}
body {
/* iOS elastic scroll'un sayfayı patlatmasını engelle */
overscroll-behavior: contain;
/* Momentum scroll */
-webkit-overflow-scrolling: touch;
}
/* ================================================================
3. ANTI-ZOOM & VIEWPORT KURALLARI
ÖNEMLİ — HTML etiketini şu şekilde güncelle:
YANLIŞ:
DOĞRU:
user-scalable=no erişilebilirlik ihlali (WCAG 1.4.4).
Zoom'u viewport ile değil, aşağıdaki font-size kurallarıyla engelle.
================================================================ */
/* iOS zoom tetikleyicisi: font-size < 16px olan form elemanları.
Tüm form elemanlarını 16px'e sabitleriz. */
input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
font-size: max(16px, 1rem);
/* iOS zoom engelleyici */
}
/* Görsel küçüklük istiyorsak transform kullan, font-size küçültme */
.input-sm {
font-size: max(16px, 1rem) !important;
/* Override'a izin verme */
transform: scale(0.9);
transform-origin: left center;
}
/* ================================================================
4. DOKUNMATIK OPTİMİZASYON
================================================================ */
/* Tüm interaktif elemanlar için 300ms gecikmeyi kaldır */
a,
button,
label,
select,
summary,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"],
[tabindex] {
touch-action: manipulation;
cursor: pointer;
}
/* Minimum Touch Target boyutu — WCAG 2.5.5 (44x44px) */
button,
[role="button"],
[type="button"],
[type="submit"],
[type="reset"],
.btn {
min-height: var(--touch-min);
min-width: var(--touch-min);
/* Görsel boyut küçükse padding ile touch alanını genişlet */
position: relative;
}
/* Küçük icon butonları için görünmez dokunma alanı genişletici */
.btn-icon-sm {
min-height: var(--touch-min);
min-width: var(--touch-min);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Checkbox ve radio touch alanları */
input[type="checkbox"],
input[type="radio"] {
min-width: var(--touch-min);
min-height: var(--touch-min);
cursor: pointer;
}
/* Aktif durum görsel geribildirimi — Kullanıcıya "tıklandı" hissi ver */
button:active,
[role="button"]:active,
.btn:active {
transform: scale(0.97);
transition: transform var(--dur-fast) var(--ease-out);
}
/* Hover sadece gerçek pointer cihazlarda çalışsın */
@media (hover: hover) and (pointer: fine) {
button:hover,
.btn:hover {
opacity: 0.88;
transition: opacity var(--dur-fast) var(--ease-out);
}
}
/* Focus görünürlüğü — Klavye navigasyonu için */
:focus-visible {
outline: 2px solid var(--accent, #0071e3);
outline-offset: 2px;
border-radius: 4px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* ================================================================
5. FORM ELEMANLARI — KOMPAKT & TOUCH-FRIENDLY
================================================================ */
/* Form grid — 2 kolon mobilde tek kolona düşer */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-3) var(--space-4);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.form-group label {
font-size: 0.8125rem;
/* 13px */
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
}
/* Tüm input'lar için baz stil */
.form-control {
width: 100%;
min-height: var(--touch-min);
padding: var(--space-2) var(--space-3);
font-size: max(16px, 1rem);
/* Anti-zoom */
border-radius: var(--radius2, 8px);
border: 1.5px solid var(--border, #d2d2d7);
background: var(--bg2, #fff);
color: var(--text, #1d1d1f);
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
/* iOS için görünüm sıfırla */
-webkit-appearance: none;
appearance: none;
}
.form-control:focus {
border-color: var(--accent, #0071e3);
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
outline: none;
}
/* Select için ok ikonu */
.form-select-wrapper {
position: relative;
}
.form-select-wrapper::after {
content: '';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--text3, #86868b);
pointer-events: none;
}
/* Yoğun formlarda satır yüksekliğini düşür */
.form-compact .form-control {
min-height: var(--touch-sm);
padding: var(--space-1) var(--space-3);
}
.form-compact .form-group {
gap: 2px;
}
.form-compact label {
font-size: 0.75rem;
/* 12px */
}
/* ================================================================
6. TABLO → KART GÖRÜNÜMÜ (CARD VIEW)
Kullanım: veya data-mobile="card"
JS (global-mobile-ui.js) data-label attribute'larını otomatik ekler.
================================================================ */
/* Temel tablo stilleri — masaüstü */
.table-card {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.table-card thead th {
padding: var(--space-2) var(--space-3);
text-align: left;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text3, #86868b);
border-bottom: 1.5px solid var(--border, #d2d2d7);
white-space: nowrap;
}
.table-card tbody td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border2, #e5e5ea);
color: var(--text, #1d1d1f);
vertical-align: middle;
}
.table-card tbody tr:last-child td {
border-bottom: none;
}
/* Mobil — Kart Görünümüne dönüşüm (Kullanıcı İsteği Üzerine İptal Edildi) */
@media (max-width: 1px) {
.table-card thead {
/* Gizle ama screen reader'lar için bırak */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.table-card tbody,
.table-card tbody tr,
.table-card tbody td {
display: block;
}
.table-card tbody tr {
background: var(--card, #fff);
border: 1px solid var(--border2, #e5e5ea);
border-radius: var(--radius, 12px);
margin-bottom: var(--space-3);
overflow: hidden;
box-shadow: var(--shadow, 0 1px 4px rgba(0, 0, 0, .08));
/* GPU katmanına al — Scroll performansı */
will-change: transform;
contain: layout style;
}
.table-card tbody td {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border2, #e5e5ea);
line-height: 1.5;
}
.table-card tbody td:last-child {
border-bottom: none;
}
/* data-label JS tarafından eklenir */
.table-card tbody td::before {
content: attr(data-label);
flex: 0 0 38%;
font-size: 0.75rem;
font-weight: 600;
color: var(--text3, #86868b);
text-transform: uppercase;
letter-spacing: 0.03em;
padding-top: 1px;
/* Baseline hizalaması */
}
/* Etiket yoksa (action sütunu gibi) tam genişlik */
.table-card tbody td[data-label=""] {
justify-content: flex-end;
}
.table-card tbody td[data-label=""]::before {
display: none;
}
}
/* ================================================================
7. TABLO → YATAY KAYDIRMA (Alternatif — Kart görünümü istemezseniz)
Kullanım:
================================================================ */
.table-scroll-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* Kaydırma göstergesi — Kullanıcıya kaydırılabilirliği hissettir */
background:
linear-gradient(to right, var(--bg2, #fff) 30%, transparent) left center,
linear-gradient(to left, var(--bg2, #fff) 30%, transparent) right center,
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), transparent) left center,
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), transparent) right center;
background-repeat: no-repeat;
background-size: 60px 100%, 60px 100%, 16px 100%, 16px 100%;
background-attachment: local, local, scroll, scroll;
border-radius: var(--radius, 12px);
}
.table-scroll-wrapper table {
min-width: 600px;
width: 100%;
}
/* Yapışkan ilk sütun — Yatay kaydırmada ID/Ad sabit kalır */
.table-sticky-col .col-sticky {
position: sticky;
left: 0;
background: var(--bg2, #fff);
z-index: var(--z-base);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}
/* ================================================================
8. ACCORDION BİLEŞENİ
Ağır JS yok — CSS grid-template-rows tekniği ile smooth animasyon.
Kullanım: JS tarafından .is-open sınıfı toggle edilir.
================================================================ */
.accordion {
border: 1px solid var(--border2, #e5e5ea);
border-radius: var(--radius, 12px);
overflow: hidden;
contain: layout style;
}
.accordion+.accordion {
margin-top: var(--space-2);
}
/* Trigger — Açma/kapama butonu */
.accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: var(--touch-min);
padding: var(--space-3) var(--space-4);
background: var(--card2, #f2f2f7);
border: none;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text, #1d1d1f);
text-align: left;
cursor: pointer;
touch-action: manipulation;
transition: background-color var(--dur-fast) var(--ease-out);
gap: var(--space-3);
}
.accordion__trigger:active {
background: var(--border2, #e5e5ea);
}
/* Ok ikonu — CSS ile, resim yok */
.accordion__trigger::after {
content: '';
flex-shrink: 0;
width: 10px;
height: 10px;
border-right: 2px solid var(--text3, #86868b);
border-bottom: 2px solid var(--text3, #86868b);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--dur-normal) var(--ease-out);
}
.accordion.is-open .accordion__trigger::after {
transform: rotate(-135deg) translateY(-2px);
}
/* Body — grid-template-rows tekniği ile smooth yükseklik animasyonu */
.accordion__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-normal) var(--ease-out);
}
.accordion.is-open .accordion__body {
grid-template-rows: 1fr;
}
/* İç wrapper — overflow: hidden ile sınır tanımlar */
.accordion__body-inner {
overflow: hidden;
padding: 0 var(--space-4);
transition: padding var(--dur-normal) var(--ease-out);
}
.accordion.is-open .accordion__body-inner {
padding: var(--space-4);
}
/* ================================================================
9. KOMPAKT UI YARDIMCILARI
================================================================ */
/* Kart — Kompakt versiyonu */
.card-compact {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius, 12px);
background: var(--card, #fff);
border: 1px solid var(--border2, #e5e5ea);
box-shadow: var(--shadow, 0 1px 4px rgba(0, 0, 0, .08));
contain: layout style;
}
/* Stat/Metrik kartı — Dashboard için */
.stat-card {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius, 12px);
background: var(--card, #fff);
border: 1px solid var(--border2, #e5e5ea);
min-height: 80px;
}
.stat-card__label {
font-size: 0.75rem;
font-weight: 500;
color: var(--text3, #86868b);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.stat-card__value {
font-size: 1.625rem;
/* 26px */
font-weight: 700;
color: var(--text, #1d1d1f);
line-height: 1.2;
/* Font sayı genişliğini sabitle — Değer değiştiğinde layout shift engelle */
font-variant-numeric: tabular-nums;
}
/* Dashboard grid — Responsive, 2/3/4 kolon */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (min-width: 480px) {
.dashboard-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.dashboard-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Liste öğeleri — kompakt */
.list-compact {
list-style: none;
margin: 0;
padding: 0;
}
.list-compact li {
display: flex;
align-items: center;
min-height: var(--touch-min);
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border2, #e5e5ea);
gap: var(--space-3);
touch-action: manipulation;
}
.list-compact li:last-child {
border-bottom: none;
}
/* Badge — küçük durum etiketi */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 100px;
font-size: 0.6875rem;
/* 11px */
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
line-height: 1.6;
}
.badge-green {
background: rgba(52, 199, 89, 0.12);
color: #1a7e35;
}
.badge-red {
background: rgba(255, 59, 48, 0.12);
color: #c0392b;
}
.badge-orange {
background: rgba(255, 149, 0, 0.12);
color: #b35c00;
}
.badge-blue {
background: rgba(0, 113, 227, 0.12);
color: #0050a3;
}
.badge-gray {
background: var(--card2, #f2f2f7);
color: var(--text2, #48484a);
}
/* ================================================================
10. PERFORMANS ANİMASYONLARI
Kural: SADECE transform ve opacity kullan.
margin/width/height/top/left reflow tetikler — yasak.
================================================================ */
/* Fade In — Sayfa yüklemesi için */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn var(--dur-normal) var(--ease-out) both;
}
/* Slide In (alttan) — Modal/Sheet için */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-slide-up {
animation: slideInUp var(--dur-slow) var(--ease-spring) both;
}
/* Skeleton loader — Veri yükleme animasyonu */
@keyframes skeleton {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.skeleton {
background: linear-gradient(90deg,
var(--card2, #f2f3f6) 25%,
var(--border2, #eaecf0) 50%,
var(--card2, #f2f3f6) 75%);
background-size: 200% 100%;
animation: skeleton 1.4s var(--ease-out) infinite;
border-radius: var(--radius2, 12px);
color: transparent !important;
}
/* Azaltılmış hareket tercihi — Erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Spinner — CSS only */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2.5px solid var(--border2, #e5e5ea);
border-top-color: var(--accent, #0071e3);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* ================================================================
11. Z-INDEX YÖNETİM SİSTEMİ
================================================================ */
/* Katman hiyerarşisi — Token'ları kullan, magic number yazma */
.z-base {
z-index: var(--z-base);
}
.z-dropdown {
z-index: var(--z-dropdown);
}
.z-sticky {
z-index: var(--z-sticky);
}
.z-overlay {
z-index: var(--z-overlay);
}
.z-modal {
z-index: var(--z-modal);
}
.z-toast {
z-index: var(--z-toast);
}
.z-tooltip {
z-index: var(--z-tooltip);
}
/* Dropdown — Tablo ve form üzerindeki açılır menüler */
.dropdown-menu {
position: absolute;
z-index: var(--z-dropdown);
background: var(--bg2, #fff);
border: 1px solid var(--border, #d2d2d7);
border-radius: var(--radius2, 8px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
min-width: 180px;
overflow: hidden;
/* Yeni stacking context — Alt elemanların z-index çakışmasını engelle */
isolation: isolate;
}
/* Overlay (modal arkaplanı) */
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: var(--z-overlay);
/* GPU katmanı */
will-change: opacity;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Toast bildirimi */
.toast-container {
position: fixed;
bottom: max(env(safe-area-inset-bottom), 16px);
left: 50%;
transform: translateX(-50%);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-2);
width: min(calc(100% - 32px), 360px);
pointer-events: none;
}
.toast {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius, 12px);
background: var(--text, #1d1d1f);
color: #fff;
font-size: 0.875rem;
font-weight: 500;
pointer-events: auto;
animation: slideInUp var(--dur-normal) var(--ease-spring) both;
}
/* ================================================================
12. SCROLL İYİLEŞTİRMELERİ
================================================================ */
/* Scrollable container — Momentum + gizli scrollbar */
.scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
/* Firefox */
}
.scroll-x::-webkit-scrollbar {
display: none;
}
.scroll-y {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
scrollbar-width: thin;
scrollbar-color: var(--border, #d2d2d7) transparent;
}
/* Sayfa kapsayıcısı — Gerçek viewport yüksekliği */
.page-container {
min-height: calc(var(--vh, 1vh) * 100);
}
/* Snap scroll — Yatay kart listesi için */
.snap-scroll-x {
display: flex;
gap: var(--space-3);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: var(--space-2);
/* iOS bottom bounce alanı */
}
.snap-scroll-x::-webkit-scrollbar {
display: none;
}
.snap-scroll-x>* {
scroll-snap-align: start;
flex-shrink: 0;
}
/* Yapışkan header */
.sticky-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--bg, #f5f5f7);
/* Blur efekti — Performans için will-change ekle */
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
background: rgba(245, 245, 247, 0.88);
border-bottom: 1px solid var(--border2, #e5e5ea);
will-change: transform;
}
/* Safe area — iPhone notch/home indicator */
.safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
.safe-area-top {
padding-top: env(safe-area-inset-top);
}
/* ================================================================
13. UTILITY SINIFLARI
================================================================ */
/* Görünürlük */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* Truncate */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* İnteraktif kart — Hover + active efekti */
.card-interactive {
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
will-change: transform;
}
.card-interactive:active {
transform: scale(0.98);
}
@media (hover: hover) {
.card-interactive:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
transform: translateY(-1px);
}
}
/* Bölücü */
.divider {
height: 1px;
background: var(--border2, #e5e5ea);
margin: var(--space-3) 0;
}
/* Disabled state */
[disabled],
.is-disabled {
opacity: 0.45;
pointer-events: none;
cursor: not-allowed;
}
/* Loading state */
.is-loading {
pointer-events: none;
position: relative;
color: transparent !important;
}
.is-loading::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: currentColor;
border-radius: 50%;
animation: spin 0.6s linear infinite;
color: var(--accent, #0071e3);
}
/* Sadece mobil / sadece masaüstü */
.mobile-only {
display: block;
}
.desktop-only {
display: none;
}
@media (min-width: 768px) {
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
}
/* Flex yardımcıları */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.flex-1 {
flex: 1 1 0;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-1 {
gap: var(--space-1);
}
.gap-2 {
gap: var(--space-2);
}
.gap-3 {
gap: var(--space-3);
}
.gap-4 {
gap: var(--space-4);
}
/* ================================================================
EOF — global-mobile-fix.css
================================================================ */