/* ============================================================ Alternatif Kurgu — bölüm tasarımı Artık PLATFORM TEMASINI kullanır (koyu/açık otomatik) → tek uygulama hissi. Tek istisna: BACKDROP HERO sinematik kalır (afiş + koyu degrade + beyaz yazı) — bölümün imzası. Sınıf öneki: fc-. Sayfa . ============================================================ */ /* Normal body zemini + mor parlama aynen geçerli (ayrı koyu palet kaldırıldı) */ .fc-konteyner { max-width: 920px; margin: 0 auto; padding: 0 1.1rem 5rem; } /* Renk değişkenleri → platform temasına bağlı */ .fc-sayfa { --fc-bg: var(--bg-ana); --fc-kart: var(--bg-kart); --fc-kart-hover: var(--bg-hover); --fc-cizgi: var(--cerceve); --fc-metin: var(--metin-ana); --fc-soluk: var(--metin-soluk); --fc-vurgu: var(--vurgu); --fc-yildiz: #ffce4d; } /* ===== ARAMA / KEŞİF (alternatif.html) ===== */ .fc-ust { text-align: center; padding: 2.6rem 1rem 1.6rem; } .fc-ust h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; background: linear-gradient(120deg, var(--metin-ana) 15%, var(--vurgu) 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .fc-ust p { color: var(--fc-soluk); font-size: 0.98rem; max-width: 540px; margin: 0 auto; line-height: 1.55; } .fc-arama { display: flex; gap: 0.6rem; max-width: 600px; margin: 1.6rem auto 0; } .fc-arama input { flex: 1; padding: 0.85rem 1.1rem; font-size: 1rem; background: var(--bg-hover); border: 1px solid var(--fc-cizgi); border-radius: 12px; color: var(--fc-metin); } .fc-arama input::placeholder { color: var(--fc-soluk); } .fc-arama input:focus { outline: none; border-color: var(--fc-vurgu); } .fc-arama button { padding: 0.85rem 1.4rem; font-size: 0.95rem; font-weight: 600; background: var(--fc-vurgu); color: #fff; border: none; border-radius: 12px; cursor: pointer; transition: filter 0.15s; } .fc-arama button:hover { filter: brightness(1.1); } .fc-mesaj { text-align: center; color: var(--fc-soluk); font-size: 0.88rem; min-height: 1.2em; margin: 0.9rem 0 0; } .fc-bolum-baslik { font-size: 1.05rem; font-weight: 600; color: var(--fc-metin); margin: 2.6rem 0 0.3rem; } .fc-bolum-alt { color: var(--fc-soluk); font-size: 0.85rem; margin: 0; } /* Poster ızgarası */ .fc-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.1rem; margin-top: 1.3rem; } .fc-poster-kart { position: relative; border: none; padding: 0; background: none; cursor: pointer; text-align: left; border-radius: 12px; overflow: hidden; transition: transform 0.18s ease; } @media (hover: hover) { .fc-poster-kart:hover { transform: translateY(-5px) scale(1.015); } } .fc-poster-kart img, .fc-poster-bos { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; background: var(--bg-hover); border-radius: 12px; } .fc-poster-bos { display: flex; align-items: center; justify-content: center; color: var(--fc-soluk); font-size: 0.8rem; text-align: center; padding: 0.6rem; } /* Poster üstüne alttan kararma + başlık (resim üstü → beyaz kalır) */ .fc-poster-kart .fc-poster-bilgi { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 0.7rem 0.65rem; background: linear-gradient(to top, rgba(0,0,0,0.92) 10%, transparent); border-radius: 0 0 12px 12px; } .fc-poster-kart .fc-poster-ad { font-size: 0.85rem; font-weight: 600; color: #fff; line-height: 1.25; margin: 0 0 0.15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fc-poster-kart .fc-poster-meta { font-size: 0.7rem; color: #c9c9d2; display: flex; gap: 0.4rem; align-items: center; } .fc-rozet { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(108,99,255,0.16); color: var(--fc-vurgu); padding: 0.1rem 0.4rem; border-radius: 5px; font-weight: 600; } .fc-poster-kart .fc-kurgu-rozet { position: absolute; top: 8px; right: 8px; background: rgba(108,99,255,0.92); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 20px; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.4); } /* ===== FİLM DETAY (film.html) — BACKDROP HERO (sinematik, temadan bağımsız) ===== */ .fc-backdrop { position: relative; width: 100%; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden; } .fc-backdrop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } /* Degrade alta doğru sayfa zeminine (tema) erir; orta tonlar koyu kalır (resim okunur) */ .fc-backdrop-grad { position: absolute; inset: 0; background: linear-gradient(to top, var(--fc-bg) 2%, rgba(10,10,12,0.55) 45%, rgba(10,10,12,0.25) 100%), linear-gradient(to right, rgba(10,10,12,0.7), transparent 60%); } /* Backdrop yoksa: HER ZAMAN koyu degrade (beyaz hero yazısı okunur kalsın) */ .fc-backdrop.fc-backdrop-yok { background: radial-gradient(120% 120% at 30% 0%, #2a2a38 0%, #14141a 70%); min-height: 240px; } .fc-geri { position: absolute; top: 1rem; left: 1rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.15s; } .fc-geri:hover { background: rgba(0,0,0,0.75); } .fc-detay-ust { position: relative; z-index: 2; display: flex; gap: 1.3rem; align-items: flex-end; max-width: 920px; margin: 0 auto; width: 100%; padding: 2rem 1.1rem 1.4rem; } .fc-detay-poster { width: 120px; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; flex-shrink: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.6); background: #1a1a22; } /* Hero yazısı resim/koyu degrade üstünde → BEYAZ kalır (tema fark etmez) */ .fc-detay-yazi { min-width: 0; padding-bottom: 0.3rem; } .fc-detay-yazi h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0.5rem 0 0.4rem; color: #fff; line-height: 1.15; } .fc-detay-yazi .fc-rozet { background: rgba(255,255,255,0.18); color: #fff; } .fc-detay-meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: 0.85rem; color: #d3d3da; } .fc-detay-rating { color: var(--fc-yildiz); font-weight: 600; } /* Özet + yazma + sonlar (içerik alanı → tema) */ .fc-ozet { color: var(--fc-soluk); font-size: 0.95rem; line-height: 1.65; margin: 1.6rem 0 0; max-width: 720px; } .fc-yaz-bolum { margin: 2rem 0 0.5rem; } .fc-yaz-cta { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.5rem; font-size: 1rem; font-weight: 600; background: var(--fc-vurgu); color: #fff; border: none; border-radius: 12px; cursor: pointer; transition: filter 0.15s, transform 0.1s; } .fc-yaz-cta:hover { filter: brightness(1.1); } .fc-yaz-cta:active { transform: scale(0.98); } .fc-yaz-bilgi { color: var(--fc-soluk); font-size: 0.88rem; padding: 0.6rem 0; } .fc-yaz-bilgi a { color: var(--fc-vurgu); text-decoration: none; } .fc-baslik-input, .fc-ozet-input { width: 100%; box-sizing: border-box; padding: 0.8rem 1.1rem; font-size: 0.95rem; background: var(--fc-kart); border: 1px solid var(--fc-cizgi); border-radius: 12px; color: var(--fc-metin); font-family: inherit; margin-bottom: 0.7rem; } .fc-baslik-input { font-size: 1.05rem; font-weight: 600; } .fc-ozet-input { min-height: 58px; resize: vertical; line-height: 1.5; display: block; } .fc-baslik-input::placeholder, .fc-ozet-input::placeholder { color: var(--fc-soluk); font-weight: 400; } .fc-baslik-input:focus, .fc-ozet-input:focus { outline: none; border-color: var(--fc-vurgu); } .fc-yaz-form textarea { width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical; padding: 1rem 1.1rem; font-size: 0.98rem; line-height: 1.6; background: var(--fc-kart); border: 1px solid var(--fc-cizgi); border-radius: 12px; color: var(--fc-metin); font-family: inherit; } .fc-yaz-form textarea:focus { outline: none; border-color: var(--fc-vurgu); } .fc-yaz-arac { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; flex-wrap: wrap; } .fc-sonlar-baslik { display: flex; align-items: center; gap: 0.6rem; margin: 2.6rem 0 0; padding-bottom: 0.7rem; border-bottom: 1px solid var(--fc-cizgi); } .fc-sonlar-baslik h2 { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: 0.01em; color: var(--fc-metin); } .fc-sonlar-sayi { font-size: 0.8rem; color: var(--fc-soluk); background: var(--fc-kart); padding: 0.15rem 0.55rem; border-radius: 20px; } .fc-sonlar-liste { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; } .fc-son-kart { background: var(--fc-kart); border: 1px solid var(--fc-cizgi); border-radius: 14px; padding: 1.1rem 1.2rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } @media (hover: hover) { .fc-son-kart:hover { border-color: rgba(108,99,255,0.5); background: var(--fc-kart-hover); } } .fc-son-baslik { color: var(--fc-metin); font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.4rem; } .fc-son-metin { color: var(--fc-soluk); font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .fc-son-alt { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; flex-wrap: wrap; } .fc-son-yazar { display: flex; align-items: center; gap: 0.5rem; color: var(--fc-soluk); text-decoration: none; min-width: 0; } .fc-son-yazar:hover { color: var(--fc-metin); } .fc-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--bg-hover); flex-shrink: 0; } .fc-avatar-harf { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6c63ff, #3f3a99); color: #fff; font-size: 0.78rem; font-weight: 600; } .fc-son-rating { color: #ff5470; font-weight: 600; white-space: nowrap; } .fc-son-rating.fc-yok { color: var(--fc-soluk); font-weight: 400; } .fc-bos { text-align: center; color: var(--fc-soluk); padding: 2.5rem 1rem; font-size: 0.95rem; } .fc-yukleniyor { text-align: center; color: var(--fc-soluk); padding: 4rem 1rem; } @media (max-width: 600px) { .fc-detay-ust { gap: 0.9rem; padding: 1.5rem 1rem 1.1rem; } .fc-detay-poster { width: 88px; border-radius: 9px; } .fc-backdrop { min-height: 280px; } .fc-izgara { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.8rem; } } /* ===== KURGU OKUMA (kurgu.html) ===== */ .fc-backdrop-oku { min-height: 240px; } @media (max-width: 600px) { .fc-backdrop-oku { min-height: 200px; } } .fc-oku { padding-top: 1.6rem; } .fc-oku-baslik { font-size: clamp(1.5rem, 4.5vw, 2.3rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0.7rem 0 0.7rem; color: var(--fc-metin); } .fc-oku-yazar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--fc-soluk); margin-bottom: 1.6rem; } .fc-oku-ozet { font-size: 1rem; line-height: 1.6; color: var(--fc-soluk); margin: 0 0 1.3rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--fc-cizgi); font-style: italic; } .fc-oku-metin { font-size: 1.06rem; line-height: 1.85; color: var(--fc-metin); white-space: pre-wrap; word-wrap: break-word; } .fc-oku-arac { display: flex; gap: 0.5rem; margin: 2rem 0 0; flex-wrap: wrap; } .fc-arac-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; font-size: 0.85rem; font-family: inherit; background: var(--fc-kart); border: 1px solid var(--fc-cizgi); border-radius: 10px; color: var(--fc-soluk); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .fc-arac-btn:hover { border-color: var(--fc-vurgu); color: var(--fc-metin); } .fc-arac-btn.aktif { color: var(--fc-vurgu); border-color: var(--fc-vurgu); } .fc-arac-sil { color: #ff6b6b; border-color: rgba(255,107,107,0.4); } .fc-arac-sil:hover { border-color: #ff6b6b; color: #ff8585; } /* Beğeni butonu */ .fc-begeni-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; font-size: 0.95rem; font-weight: 600; font-family: inherit; background: var(--fc-kart); border: 1px solid var(--fc-cizgi); border-radius: 22px; color: var(--fc-soluk); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .fc-begeni-btn:not(:disabled):hover { border-color: #ff6b81; color: #ff6b81; } .fc-begeni-btn.aktif { color: #ff5470; border-color: #ff5470; background: rgba(255,84,112,0.1); } .fc-begeni-btn:disabled { cursor: default; opacity: 0.7; }