/* ============================================================================
soldere-app.css — Soldere Hasat Kulübü · Standart Uygulama Katmanı
Versiyon: 1.0
soldere.css'i TAMAMLAR, değiştirmez. 'de soldere.css'ten SONRA yükle:
İçerik: mobil güvenli alan · standart sayfa kabı · dokunma hedefleri ·
toast · onay diyaloğu · iskelet yükleyici · erişilebilirlik.
Mevcut bileşenler (.card .btn-primary .durum-chip vb.) AYNEN korunur.
============================================================================ */
/* ── GÜVENLİ ALAN (çentikli telefonlar: iPhone, vb.) ─────────────────────── */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--app-max: 640px; /* mobil-öncelikli okunur genişlik; web'de ortalanır */
}
body { padding-bottom: var(--safe-bottom); }
/* ── STANDART SAYFA KABI (mobil + web tek davranış) ──────────────────────── */
/* Mobilde tam genişlik, geniş ekranda ortalanır ve okunur kalır. */
.app-container {
width: 100%;
max-width: var(--app-max);
margin: 0 auto;
padding: 16px;
}
.app-container.wide { max-width: 1100px; } /* admin tabloları için geniş mod */
@media (min-width: 768px) {
.app-container { padding: 24px; }
}
/* Sticky header çentik desteği */
.site-header, .admin-header { padding-top: calc(var(--safe-top) + 12px); }
/* ── DOKUNMA HEDEFLERİ (mobilde min 44px — Apple/Google standardı) ────────── */
@media (max-width: 768px) {
.btn-primary, .btn-secondary, .btn-wa,
.tab-btn, .admin-tab-btn, .pg-btn, .uye-cip-edit {
min-height: 44px;
}
.btn-sm { min-height: 38px; }
/* iOS otomatik yakınlaşmasını önlemek için form girdileri >=16px */
.field input, .field select, .field textarea, .arama-input { font-size: 16px; }
}
/* Mobil dokunmada mavi parlama vurgusunu kaldır */
button, a, .menu-kart, .liste-item, .tab-btn, .admin-tab-btn {
-webkit-tap-highlight-color: transparent;
}
/* ── TOAST (app.js → App.toast ile kullanılır) ───────────────────────────── */
.app-toast-box {
position: fixed;
left: 50%;
bottom: calc(16px + var(--safe-bottom));
transform: translateX(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
width: calc(100% - 32px);
max-width: 420px;
pointer-events: none;
}
.app-toast {
pointer-events: auto;
padding: 12px 16px;
border-radius: var(--r-md);
font-size: 14px;
line-height: 1.45;
box-shadow: var(--shadow-lg);
opacity: 0;
transform: translateY(12px);
transition: opacity .22s ease, transform .22s ease;
cursor: pointer;
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast-info { background: var(--forest); color: #fff; }
.app-toast-success { background: #1a7a3a; color: #fff; }
.app-toast-error { background: #b3392b; color: #fff; }
.app-toast-warn { background: #8a6500; color: #fff; }
/* ── ONAY DİYALOĞU (app.js → App.onay) ───────────────────────────────────── */
.app-confirm-overlay {
position: fixed; inset: 0; z-index: 1100;
background: rgba(20,26,18,.5);
display: flex; align-items: center; justify-content: center;
padding: 20px; opacity: 0; transition: opacity .2s ease;
}
.app-confirm-overlay.show { opacity: 1; }
.app-confirm {
background: #fff; border-radius: var(--r-xl);
padding: 24px; width: 100%; max-width: 380px;
box-shadow: var(--shadow-lg);
transform: scale(.96); transition: transform .2s ease;
}
.app-confirm-overlay.show .app-confirm { transform: scale(1); }
.app-confirm-msg { font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: 20px; }
.app-confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
.app-confirm-btns .btn-secondary { margin-top: 0; }
/* ── İSKELET YÜKLEYİCİ (boş "Yükleniyor…" yerine zarif) ──────────────────── */
.skeleton {
background: linear-gradient(100deg, var(--mist) 30%, #f6faf2 50%, var(--mist) 70%);
background-size: 200% 100%;
animation: skeleton-shine 1.3s ease-in-out infinite;
border-radius: var(--r-sm);
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.w60 { width: 60%; } .skeleton-line.w40 { width: 40%; }
.skeleton-card { height: 64px; border-radius: var(--r-md); margin-bottom: 8px; }
@keyframes skeleton-shine { to { background-position: -200% 0; } }
/* ── ERİŞİLEBİLİRLİK ─────────────────────────────────────────────────────── */
/* Klavye ile gezerken net odak halkası (fare tıklamasında görünmez) */
:focus-visible {
outline: 2.5px solid var(--leaf);
outline-offset: 2px;
border-radius: 4px;
}
/* Hareket hassasiyeti olan kullanıcılar için animasyonları azalt */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* Ekran okuyucu için görsel gizli ama erişilebilir metin */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ── KÜÇÜK STANDART YARDIMCILAR ──────────────────────────────────────────── */
.is-hidden { display: none !important; }
.text-muted { color: var(--muted); }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.stack > * + * { margin-top: 12px; } /* dikey eşit boşluk */
/* Geniş ekranda tablolar daha rahat okunur */
@media (min-width: 768px) {
.tablo { font-size: 14px; }
}