/* ============================================================================ Lunovia Records — polish.css Additive görsel cila katmanı. LAYOUT'A DOKUNMAZ — yalnızca görsel rötuş. Tüm sayfaların 'ine eklenir. Hem koyu (varsayılan) hem açık temada ([data-theme="light"]) çalışacak şekilde renkten bağımsız tutulmuştur. ============================================================================ */ /* ── Mobil dokunma + taşma güvenliği ─────────────────────────────────────── */ * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, svg, video, canvas { max-width: 100%; } /* ── Metin seçim rengi (markaya uygun mor) ───────────────────────────────── */ ::selection { background: rgba(157, 78, 221, 0.32); color: #fff; } /* ── Erişilebilir + şık odak halkası (yalnızca klavye ile gezerken) ──────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 2px solid #9d4edd; outline-offset: 2px; border-radius: 6px; } /* Fare ile tıklamada outline gösterme (yalnızca :focus-visible) */ a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* ── Genel yumuşak geçişler (renk/gölge/transform) ───────────────────────── */ a, button, .btn, [role="button"], input, select, textarea { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .18s ease, filter .18s ease; } /* ── Buton mikro-etkileşimleri (renkleri sayfa stili belirler) ───────────── */ .btn { will-change: transform; } .btn:hover:not(:disabled):not([disabled]) { transform: translateY(-1px); filter: brightness(1.06); } .btn:active:not(:disabled):not([disabled]) { transform: translateY(0); filter: brightness(.97); } .btn:disabled, .btn[disabled], button:disabled, button[disabled] { opacity: .55; cursor: not-allowed !important; transform: none !important; filter: none !important; } /* ── Kart hover derinliği (yalnızca .card sınıfı; layout değişmez) ────────── */ .card, .settings-card, .stat-card { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .card:hover, .settings-card:hover { box-shadow: 0 12px 36px rgba(157, 78, 221, 0.10), 0 4px 12px rgba(0, 0, 0, .30); border-color: rgba(157, 78, 221, 0.18); } .stat-card:hover { box-shadow: 0 8px 24px rgba(157, 78, 221, 0.08); transform: translateY(-1px); } /* ── Glassmorphism ────────────────────────────────────────────────────────── */ .stat-card, .cta-box { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ── Tablo satırı hover okunabilirliği ───────────────────────────────────── */ .data-table tbody tr { transition: background-color .15s ease; } .data-table tbody tr:hover { background: rgba(157, 78, 221, 0.06); } /* ── Buton tutarlılığı ───────────────────────────────────────────────────── */ .btn, .btn-primary, .cta-btn, .hero-cta, .submit-btn, .event-ticket, .event-landing-ticket { font-family: 'DM Sans', 'Inter', sans-serif; letter-spacing: 0.2px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Tipografi hiyerarşisi ──────────────────────────────────────────────── */ .section-title { letter-spacing: -0.5px; } /* ── Staggered fade-up animasyonları ────────────────────────────────────── */ .fade-up-delay-1 { transition-delay: 0.1s; } .fade-up-delay-2 { transition-delay: 0.2s; } .fade-up-delay-3 { transition-delay: 0.3s; } /* ── Özel scrollbar (markaya uygun, ince) ────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: rgba(157, 78, 221, 0.45) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(157, 78, 221, 0.40); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(157, 78, 221, 0.65); background-clip: padding-box; } /* ── Görsel yüklenirken bozulmayı azalt ──────────────────────────────────── */ img { font-size: 12px; } /* ── Gelişmiş glassmorphism kart efekti ──────────────────────────────────── */ .card, .settings-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="light"] .card, [data-theme="light"] .settings-card { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.08); } /* ── Stat kartları shimmer ──────────────────────────────────────────────── */ .stat-card { position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(157, 78, 221, 0.04), transparent); transition: left 0.5s; pointer-events: none; } .stat-card:hover::before { left: 100%; } /* ── Input alanları — daha belirgin focus ─────────────────────────────── */ .form-input:focus, .form-select:focus, .form-textarea:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="datetime-local"]:focus, textarea:focus, select:focus { border-color: rgba(157, 78, 221, 0.5); box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.08), 0 2px 8px rgba(0, 0, 0, 0.15); } /* ── Badge parlaklık ──────────────────────────────────────────────────── */ .badge { transition: transform 0.15s ease, box-shadow 0.15s ease; } .badge:hover { transform: scale(1.04); } /* ── Link alt çizgi animasyonu ────────────────────────────────────────── */ .nav-links a, .footer-links a { position: relative; } .nav-links a::after, .footer-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: #9d4edd; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .nav-links a:hover::after, .footer-links a:hover::after { width: 100%; } /* ── Daha iyi alert/toast kutuları ───────────────────────────────────── */ .alert { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: alertSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes alertSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Empty state ikon pulse ────────────────────────────────────────────────── ⚠️ DOĞRUDAN ÇOCUK (`>`) ZORUNLU — v4.26.4'te düzeltildi. Torun-eşleşen `.empty-state i` yazımı, boş-durumun İÇİNDEKİ `.empty-cta` butonunun ikonunu da yakalıyordu: buton ikonu nabız atıyor ve (aşağıdaki `body.lv-space` kuralıyla birlikte) 2.5rem BLOK öğeye dönüşüp butonu şişiriyordu. 8 sayfada 12 butonu etkiliyordu. Boş-durum ikonu her zaman doğrudan çocuk, buton ikonu torundur → `>` ikisini temiz ayırır. Yeni bir boş-durum yazarken ikonu SARMALAMA. */ .empty-state > i, .empty-state > .empty-icon { animation: emptyPulse 2.5s ease-in-out infinite; } @keyframes emptyPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.06); } } /* Kompakt varyant (kanban kolonları, kart içi tablolar) */ .empty-state.sm { padding: 18px 12px; } .empty-state.sm > i, .empty-state.sm > .empty-icon { font-size: 20px; margin-bottom: 6px; } .empty-state.sm p { font-size: 12px; margin: 0; } /* ── Tablo header sınırı ─────────────────────────────────────────────── */ .data-table thead th, table thead th { border-bottom: 2px solid rgba(157, 78, 221, 0.12); font-weight: 700; letter-spacing: 0.3px; } /* ── Kart başlık çizgisi ─────────────────────────────────────────────── */ .card-title, .card-header { position: relative; padding-bottom: 12px; } .card-title::after, .card-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: linear-gradient(90deg, #9d4edd, transparent); border-radius: 2px; } /* ── Sayfa geçiş animasyonu ──────────────────────────────────────────── */ body { animation: pageIn 0.35s ease-out; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } /* ── Skeleton shimmer için yardımcı ──────────────────────────────────── */ .shimmer { background: linear-gradient(110deg, transparent 33%, rgba(157, 78, 221, 0.05) 50%, transparent 66%); background-size: 300% 100%; animation: shimmer 1.8s linear infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } } /* ── Dokunmatik hedef minimum boyutu (mobil) ─────────────────────────────── */ @media (hover: none) and (pointer: coarse) { .btn, button, .nav-link, [role="button"] { min-height: 42px; } /* mobilde hover lift'i kapat (yapışkan hover'ı önler) */ .btn:hover:not(:disabled) { transform: none; filter: none; } .card:hover { box-shadow: none; } } /* ── Hareket azaltma tercihi (erişilebilirlik) ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================================ MOBİL GÜVENLİK KATMANI — telefonlarda sorun çıkmasın diye genel kurallar. Layout'u bozmaz; yalnızca taşmayı engeller ve okunabilirliği artırır. ============================================================================ */ @media (max-width: 600px) { /* Yatay kaydırmayı (taşmayı) engelle */ html, body { overflow-x: hidden; max-width: 100%; } /* Aşırı yan boşlukları telefonda makul seviyeye çek (üst/alt korunur) */ .container { padding-left: 16px !important; padding-right: 16px !important; } /* Tüm veri tablolarını telefonda yatay kaydırılabilir yap (kırpılmaz) */ .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; } /* Uzun kelimeler/linkler taşmasın */ p, a, span, td, th, li, h1, h2, h3, label, code { overflow-wrap: break-word; word-wrap: break-word; } /* Modal/overlay içerikleri ekrana sığsın */ .modal-content, .modal-box { max-width: 95vw !important; } } /* ── Events/Merch landing responsive ────────────────────────────────────── */ @media (max-width: 600px) { .events-landing-grid .event-landing-card { padding: 14px 14px; gap: 12px; } .merch-landing-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .merch-landing-info { padding: 12px 12px !important; } .earnings-breakdown-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Çok küçük telefonlar (≤380px): metin ölçeğini biraz küçült */ @media (max-width: 380px) { .container { padding-left: 12px !important; padding-right: 12px !important; } } /* Admin panel: tab içindeki çok kolonlu inline grid formlar telefonda dikey yığılır. (Stylesheet !important, inline style="display:grid" kuralını ezer.) */ @media (max-width: 640px) { .tab-panel form [style*="grid-template-columns"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .tab-panel form [style*="grid-template-columns"] > * { width: 100% !important; } } /* ── Track card hover lift + shadow ───────────────────────────────────── */ .track-card { transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s ease, border-color 0.22s ease; } .track-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(157,78,221,0.12), 0 2px 8px rgba(0,0,0,0.3); } /* Not: burada `.wall-cover` için MOR bir hover ışıması vardı — v4.34'te kaldırıldı. Son Çıkışlar rafı derinliğini artık ay ışığı/siyahtan alıyor (mor-yalnız-vurguda disiplini) ve kuralın tamamı tek tüketicisiyle birlikte index.php'nin sayfa-kapsamlı bloğunda duruyor. Burada tutmak, açık temalı sanatçı panelinin de yüklediği ortak katmanı gereksiz kirletiyordu. */ /* ── Roster card hover accent ─────────────────────────────────────────── */ .roster-card .roster-tracks { transition: color 0.2s ease; } .roster-card:hover .roster-tracks { color: rgba(157,78,221,0.7); } /* ── Dil seçici (lang_switcher.php) — JS'siz

dropdown cilası ── */ /* Açılır üçgen işaretini gizle (saf görünüm) */ .lunovia-lang-switch > summary { list-style: none; } .lunovia-lang-switch > summary::-webkit-details-marker { display: none; } .lunovia-lang-switch > summary::marker { content: ""; } /* Summary hover */ .lunovia-lang-summary:hover { border-color: rgba(157,78,221,0.55) !important; background: rgba(157,78,221,0.10) !important; } .lunovia-lang-summary:hover .lunovia-lang-globe { opacity: 1; } /* Açıkken caret döner */ .lunovia-lang-caret { transition: transform .2s ease; } .lunovia-lang-switch[open] .lunovia-lang-caret { transform: rotate(180deg); } /* Menü seçenek hover */ .lunovia-lang-opt:hover { background: rgba(157,78,221,0.14) !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════════════════ Ortak public navbar + footer (v4.16 — TÜM public sayfalarda tek tasarım) Eskiden core/public_nav.php içindeki inline