/* ========================================================= PREMIUM.CSS — Ne İzlesem görsel yükseltme katmanı Bu dosya HİÇBİR işlevselliği (JS, id, class, form davranışı) değiştirmez. Sadece mevcut seçicilerin görünümünü, geçiş eğrilerini ve efektlerini geliştirir. Her sayfada en son yüklenen stylesheet olarak devreye girer. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* Var olan renk paletiyle uyumlu, ek premium değişkenler */ --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --glow-accent: rgba(214, 160, 74, 0.35); --glow-accent-soft: rgba(214, 160, 74, 0.16); --premium-radius: 14px; --font-premium: 'Inter', 'Segoe UI', Tahoma, sans-serif; /* Cam efekti (glassmorphism) katmanları — tema geçişinde otomatik uyum sağlar */ --glass-bg: rgba(18, 20, 27, 0.72); --glass-bg-strong: rgba(23, 27, 38, 0.93); --glass-border: rgba(214, 160, 74, 0.12); --menu-shadow: rgba(0, 0, 0, 0.5); --input-bg: #0f1219; --body-grad-start: #151a26; /* Gece/gündüz anahtarı ölçüleri */ --toggle-w: 52px; --toggle-h: 27px; } /* ========================================================= GECE / GÜNDÜZ TEMASI Varsayılan (gece) paleti yukarıdaki :root ve her sayfanın kendi :root bloğunda tanımlı. Aşağıdaki blok, olduğunda TÜM sayfalardaki aynı isimli değişkenleri (daha yüksek özgüllük + en son yüklenen dosya olduğu için) geçersiz kılar. Renk kimliği (altın accent) kasıtlı olarak SABİT tutulur: iki tema da aynı markaya ait gibi "uyumlu" görünsün. */ html[data-theme="light"] { --bg: #f8f3ea; --bg-elevated: #ffffff; --text: #2b2416; --text-muted: #8a7d68; --nav-bg: #fffaf0ee; --nav-text: #2b2416; --white: #ffffff; --card-bg: #ffffff; --shadow: rgba(120, 90, 40, 0.18); --shadow-light: rgba(120, 90, 40, 0.16); --glass-bg: rgba(255, 250, 240, 0.78); --glass-bg-strong: rgba(255, 253, 247, 0.95); --glass-border: rgba(184, 130, 47, 0.22); --menu-shadow: rgba(120, 90, 40, 0.22); --input-bg: #fbf6ec; --body-grad-start: #fffaf0; } /* Tema geçişi sırasında her şeyin sertçe değil, yumuşakça renk değiştirmesi için (Apple-vari akıcılık) */ html { transition: background-color 0.6s var(--ease-soft); } body { transition: background-color 0.6s var(--ease-soft), color 0.6s var(--ease-soft); } /* ---------- Genel akıcılık ---------- */ html { scroll-behavior: smooth; } body { font-family: var(--font-premium); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; animation: pageFadeIn 0.6s var(--ease-soft) both; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Seçim ve odak stilleri */ ::selection { background: var(--glow-accent); color: #fff; } a, button, input, textarea, .film-card, .btn-arrow, .arrow-btn, .mod-button, .rast-button, .menu-toggle, .btn-fav, .btn-watchlist { transition-timing-function: var(--ease-premium); } :focus-visible { outline: 2px solid var(--accent, #d6a04a); outline-offset: 3px; border-radius: 4px; transition: outline-color 0.25s var(--ease-soft); } /* İnce, premium kaydırma çubuğu */ ::-webkit-scrollbar { width: 10px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(214,160,74,0.55), rgba(214,160,74,0.25)); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; } * { scrollbar-color: rgba(214,160,74,0.45) transparent; scrollbar-width: thin; } /* ---------- Header / Navbar: cam efekti (glassmorphism) ---------- */ header { background: var(--glass-bg) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--glass-border); transition: box-shadow 0.4s var(--ease-soft), background 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft); } .navbar, .nav-list { position: relative; } /* Farklı şablonlardaki (.navbar-right / .nav-right) sağ nav bloğunu tek bir hizalama kuralına bağlayıp tema anahtarının her sayfada aynı hizada oturmasını sağlıyoruz. */ .navbar-right, .nav-right { display: flex !important; align-items: center; gap: 0.7rem; } /* Nav linklerinde zarif alt-çizgi animasyonu */ .nav-links a, .dropdown > a, .nav-right a { position: relative; transition: color 0.35s var(--ease-soft); } .nav-links a::after, .dropdown > a::after, .nav-right a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: linear-gradient(90deg, var(--accent-bright, #f0c26e), var(--accent, #d6a04a)); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 0.4s var(--ease-premium), opacity 0.3s ease; border-radius: 2px; } .nav-right a::after { left: 0; right: 0; } .nav-links a:hover::after, .dropdown > a:hover::after, .nav-right a:hover::after { transform: scaleX(1); opacity: 1; } .menu-toggle { transition: color 0.3s var(--ease-soft), transform 0.3s var(--ease-bounce); } .menu-toggle:hover { transform: rotate(90deg); } /* Açılır menüler: display yerine opacity/transform ile yumuşat */ .dropdown-menu { display: block !important; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top left; pointer-events: none; transition: opacity 0.3s var(--ease-premium), transform 0.35s var(--ease-premium), visibility 0.3s, background 0.5s var(--ease-soft); background: var(--glass-bg-strong) !important; backdrop-filter: blur(10px); } .dropdown-menu.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .nav-links { transition: opacity 0.3s var(--ease-soft), transform 0.35s var(--ease-premium), background 0.5s var(--ease-soft); } @media (max-width: 768px) { .nav-links { display: flex !important; opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; background: var(--glass-bg-strong) !important; backdrop-filter: blur(12px); } .nav-links.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } } .dropdown-menu li a:hover { padding-left: 26px; } /* ---------- Arama kutusu ---------- */ .search-form { transition: box-shadow 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft), transform 0.3s var(--ease-soft), background-color 0.5s var(--ease-soft); } .search-form:focus-within { box-shadow: 0 4px 22px var(--glow-accent-soft), 0 0 0 1px rgba(214,160,74,0.4); border-color: rgba(214,160,74,0.55); transform: translateY(-1px); } .search-form button { transition: background-color 0.35s var(--ease-soft), transform 0.25s var(--ease-bounce); } .search-form button:active { transform: scale(0.92); } /* ---------- Hero / About ---------- */ .about-container > * { animation: fadeInUp 0.8s var(--ease-premium) both; } .tagline { animation-delay: 0.05s; } .subtitle { animation-delay: 0.15s; } .about-actions { animation-delay: 0.25s; } .highlight { background: linear-gradient(90deg, var(--accent-bright, #f0c26e), var(--accent, #d6a04a)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: filter 0.3s ease; } .highlight:hover { filter: brightness(1.2); } /* ---------- Butonlar (genel premium his) ---------- */ .mod-button, .rast-button, button[type="submit"], .contact-container button, button.remove-btn, .toggle-button { position: relative; overflow: hidden; transition: transform 0.35s var(--ease-bounce), box-shadow 0.4s var(--ease-soft), background-color 0.35s var(--ease-soft); } .mod-button::before, .rast-button::before, button[type="submit"]::before, .contact-container button::before, button.remove-btn::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); transition: left 0.6s var(--ease-soft); pointer-events: none; } .mod-button:hover::before, .rast-button:hover::before, button[type="submit"]:hover::before, .contact-container button:hover::before, button.remove-btn:hover::before { left: 130%; } .mod-button:hover, .rast-button:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 26px var(--glow-accent); } .mod-button:active, .rast-button:active { transform: translateY(-1px) scale(0.98); } button[type="submit"]:hover, .contact-container button:hover, button.remove-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--glow-accent); } /* ---------- Film kartları: premium kabartma + parıltı ---------- */ .movie-list-wrapper > .film-card, .film-card { transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium), background-color 0.5s var(--ease-soft); will-change: transform; position: relative; } .movie-list-wrapper > .film-card::after, .film-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 45%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; border-radius: inherit; } .movie-list-wrapper > .film-card:hover, .film-card:hover { transform: translateY(-10px) scale(1.045); box-shadow: 0 18px 38px rgba(0,0,0,0.45), 0 0 0 1px rgba(214,160,74,0.25), 0 12px 30px var(--glow-accent-soft); } .movie-list-wrapper > .film-card:hover::after, .film-card:hover::after { opacity: 1; } .film-card img, .movie-poster { transition: transform 0.6s var(--ease-premium), filter 0.5s ease; } .film-card:hover img, .film-card:hover .movie-poster { transform: scale(1.08); filter: brightness(1.05) saturate(1.08); } .film-card .title, .movie-title, .film-title { transition: color 0.3s ease; } .film-card:hover .title, .film-card:hover .movie-title, .film-card:hover .film-title { color: var(--accent-bright, #f0c26e); } /* Kaydırılabilir liste satırları: yumuşak momentum */ .movie-list-wrapper, .film-container { scroll-behavior: smooth; } /* Ok butonları */ .btn-arrow, .arrow-btn { transition: background-color 0.35s var(--ease-soft), transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease-soft); box-shadow: 0 4px 14px rgba(0,0,0,0.3); } .btn-arrow:hover, .arrow-btn:hover { transform: translateY(-50%) scale(1.12); box-shadow: 0 8px 20px var(--glow-accent); } .btn-arrow:active, .arrow-btn:active { transform: translateY(-50%) scale(0.95); } /* Favori / izleme listesi ikon butonları */ .btn-fav, .btn-watchlist { transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease-soft), background 0.35s var(--ease-soft), color 0.35s var(--ease-soft); } .btn-fav:hover { transform: scale(1.3) rotate(-6deg); } .btn-watchlist:hover { transform: scale(1.18); box-shadow: 0 6px 16px var(--glow-accent); } /* ---------- Başlıklar ---------- */ h1, h2 { transition: color 0.35s var(--ease-soft), letter-spacing 0.35s var(--ease-soft); } /* moduna-gore sahne başlığı: yavaş, sürekli premium zoom */ .scene-header { position: relative; overflow: hidden; } .scene-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,19,0.05) 0%, rgba(11,13,19,0.55) 100%); pointer-events: none; } .scene-header img { animation: kenBurns 18s var(--ease-soft) infinite alternate; } @keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } /* Not: .scene-header h1 ve .motto zaten statik translateY(-50%) ile konumlandırıldığı için transform içeren bir animasyon kullanmıyoruz; sadece opacity ile yumuşak bir giriş yapıyoruz. */ @keyframes fadeInOpacity { from { opacity: 0; } to { opacity: 1; } } .scene-header h1, .motto { animation: fadeInOpacity 0.9s var(--ease-premium) both; } .motto { animation-delay: 0.15s; } /* ---------- Modallar: zarif ölçek + bulanıklık geçişi ---------- */ .modal, #filmModal, #searchModal { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: opacity 0.4s var(--ease-soft), backdrop-filter 0.4s var(--ease-soft), visibility 0.4s; } .modal.active, #filmModal.active, #searchModal.active { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #filmModalContent, .modal-content { transform: scale(0.92) translateY(12px); opacity: 0; transition: transform 0.45s var(--ease-premium), opacity 0.4s var(--ease-premium), background-color 0.5s var(--ease-soft), color 0.5s var(--ease-soft); border: 1px solid rgba(214,160,74,0.15); } .modal.active #filmModalContent, #filmModal.active #filmModalContent, .modal.active .modal-content { transform: scale(1) translateY(0); opacity: 1; } #filmModalClose, .modal-close { transition: color 0.3s var(--ease-soft), transform 0.35s var(--ease-bounce), background 0.3s ease; border-radius: 50%; } #filmModalClose:hover, .modal-close:hover { transform: rotate(90deg) scale(1.1); background: rgba(214,160,74,0.12); } .modal-left img { transition: transform 0.4s var(--ease-premium); } .modal-left img:hover { transform: scale(1.03); } /* ---------- Formlar (giriş / iletişim / şifre) ---------- */ .login-container, .contact-container, form, .list-section { transition: box-shadow 0.4s var(--ease-soft), transform 0.4s var(--ease-soft), background-color 0.5s var(--ease-soft); } input, textarea { transition: border-color 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), background-color 0.35s var(--ease-soft), transform 0.25s var(--ease-soft); } input:focus, textarea:focus { box-shadow: 0 0 0 3px var(--glow-accent-soft), 0 4px 18px rgba(0,0,0,0.35); transform: translateY(-1px); } /* ---------- Footer ---------- */ footer { position: relative; } /* ---------- Genel kaydırma girişi animasyonu ---------- */ .movie-section, .genre-section, .list-section { animation: fadeInUp 0.7s var(--ease-premium) both; } /* ========================================================= GECE / GÜNDÜZ ANAHTARI — sevimli geçiş kutucuğu JS tarafından (common.js) #menu-toggle'ın hemen yanına otomatik olarak enjekte edilir; bu yüzden tüm sayfa şablonlarında (navbar-right / nav-right) aynı görünür. ========================================================= */ .theme-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .theme-toggle-track { position: relative; display: inline-flex; align-items: center; width: var(--toggle-w); height: var(--toggle-h); border-radius: 999px; background: linear-gradient(135deg, #1c2338, #0b0d13 70%); border: 1px solid rgba(214, 160, 74, 0.35); box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.25); overflow: hidden; transition: background 0.55s var(--ease-soft), border-color 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft); } html[data-theme="light"] .theme-toggle-track { background: linear-gradient(135deg, #cfe6ff, #ffe3a3 75%); border-color: rgba(184, 130, 47, 0.4); box-shadow: inset 0 2px 6px rgba(184,130,47,0.2), 0 2px 8px rgba(184,130,47,0.18); } /* Gece göğünde ufak, sevimli yıldızlar */ .theme-toggle-track::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 14% 30%, #fff 90%, transparent), radial-gradient(1.2px 1.2px at 26% 65%, #fff 90%, transparent), radial-gradient(1.4px 1.4px at 38% 22%, #fff 90%, transparent); opacity: 0.8; transition: opacity 0.4s var(--ease-soft); } html[data-theme="light"] .theme-toggle-track::before { opacity: 0; } .theme-toggle-thumb { position: absolute; top: 2.5px; left: 3px; width: calc(var(--toggle-h) - 7px); height: calc(var(--toggle-h) - 7px); border-radius: 50%; background: linear-gradient(150deg, #f0c26e, #d6a04a 75%); box-shadow: 0 2px 6px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; z-index: 2; transition: transform 0.55s var(--ease-bounce), background 0.45s var(--ease-soft); } html[data-theme="light"] .theme-toggle-thumb { transform: translateX(calc(var(--toggle-w) - var(--toggle-h))); background: linear-gradient(150deg, #fff6e0, #ffd873 75%); } .theme-toggle-icon { position: relative; z-index: 1; width: 50%; text-align: center; font-size: 11px; line-height: 1; pointer-events: none; opacity: 0.9; filter: saturate(1.1); transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-premium); } .theme-toggle-icon.sun { transform: scale(0.85); } .theme-toggle-icon.moon { transform: scale(1); } html[data-theme="light"] .theme-toggle-icon.sun { transform: scale(1.05); } html[data-theme="light"] .theme-toggle-icon.moon { opacity: 0.55; transform: scale(0.85); } html:not([data-theme="light"]) .theme-toggle-icon.sun { opacity: 0.55; } .theme-toggle:hover .theme-toggle-track { box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 4px 14px var(--glow-accent); } .theme-toggle:active .theme-toggle-thumb { transform: scale(0.88); } html[data-theme="light"] .theme-toggle:active .theme-toggle-thumb { transform: translateX(calc(var(--toggle-w) - var(--toggle-h))) scale(0.88); } .theme-toggle:focus-visible .theme-toggle-track { outline: 2px solid var(--accent, #d6a04a); outline-offset: 2px; } /* ========================================================= GELİŞMİŞ RESPONSIVE / AKICI TİPOGRAFİ Mevcut breakpoint'lere ek olarak, ara boyutlarda (tablet, küçük dizüstü, küçük telefon) daha akıcı bir deneyim. ========================================================= */ /* Akıcı başlık boyutları: sabit breakpoint sıçramaları yerine ekran genişliğine göre yumuşakça ölçeklenir. */ .tagline { font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.4rem); } .subtitle { font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.25rem); } .movie-section h2, .list-section h2 { font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); } body > h1:not(.tagline), main > h1, .scene-header h1 { font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); } /* Tablet / küçük dizüstü (1024px) */ @media (max-width: 1024px) { .movie-list-wrapper > .film-card, .film-card { width: 165px; } .about { padding: 3rem 1.5rem; } header, .navbar { padding-left: 1.25rem; padding-right: 1.25rem; } } /* Orta boy telefon / dar tablet (600px) */ @media (max-width: 600px) { :root, html[data-theme="light"] { --toggle-w: 46px; --toggle-h: 24px; } .theme-toggle-icon { font-size: 9px; } .navbar-right, .nav-right { gap: 0.45rem; } .movie-list-wrapper > .film-card, .film-card { width: 132px; margin: 0 6px; } .film-card img, .movie-list-wrapper > .film-card img { height: 185px; } .btn-arrow, .arrow-btn { width: 26px; height: 26px; font-size: 14px; } .login-container, .contact-container { padding: 1.75rem 1.25rem; width: 100%; max-width: 320px; } } /* Çok küçük telefonlar (360px ve altı) */ @media (max-width: 360px) { .about-actions { width: 100%; } .mod-button, .rast-button { width: 100%; } .movie-list-wrapper > .film-card, .film-card { width: 112px; margin: 0 4px; } .film-card img, .movie-list-wrapper > .film-card img { height: 155px; } } /* Notch / güvenli alan desteği */ header, .navbar { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); } /* Dokunmatik cihazlarda hover-only efektleri kapatıp dokunma hedeflerini büyütüyoruz */ @media (hover: none) and (pointer: coarse) { .btn-fav, .btn-watchlist, .theme-toggle, .menu-toggle, .btn-arrow { min-width: 34px; min-height: 34px; } } /* Hareket azaltma tercihine saygı */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }