/* ========================================================================== ULTRA DETAYLI OYUN TEMASI - style.css (Bordo/Mor/Yeşil - Koyu Tema) Sürüm: 4.0 - 3000+ Satır Hedefi, Yumuşak Animasyonlar, Belirgin Aktif Buton ========================================================================== */ /* -------------------------------------------------------------------------- * 1. Font Import (@import) * Google Fonts (Poppins) ve potansiyel diğer fontlar buradan eklenebilir. * Font Awesome linki HTML içinde olmalıdır. * -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); /* -------------------------------------------------------------------------- */ /* 2. CSS Değişkenleri (:root) * Renk paleti, fontlar, animasyon süreleri gibi genel değerler burada tanımlanır. * Bu, temanın tutarlılığını sağlar ve değişiklik yapmayı kolaylaştırır. * -------------------------------------------------------------------------- */ :root { /* Ana Renk Paleti (Bordo/Mor/Yeşil ve Tonları) */ --renk-bordo-koyu: #7c0a0a; --renk-bordo: #8B0000; /* Aktif Nav, Kart Başlıkları, Vurgular */ --renk-bordo-acik: #A52A2A; /* Bordo Hover, İkincil Vurgu */ --renk-kirmizi-canli: #DC143C; /* Nadir Vurgular, Uyarılar? */ --renk-kirmizi-acik: #FF6347; /* Nadir Vurgular */ --renk-mor-koyu: #4B0082; /* Koyu Mor (Header Gradient Sonu?) */ --renk-mor-orta: #6a0dad; /* Ana Mor (Başlıklar, Kenarlıklar) */ --renk-mor-canli: #8A2BE2; /* Canlı Mor (Hover, Linkler) */ --renk-mor-acik: #BA55D3; /* Açık Mor (Link Hover, İkonlar?) */ --renk-yesil-koyu: #004d00; --renk-yesil-orta: #006400; /* Ana Yeşil (Butonlar, Kenarlıklar) */ --renk-yesil-canli: #2E8B57; /* Canlı Yeşil (Buton Hover, İkonlar) */ --renk-yesil-acik: #50C878; /* Açık Yeşil (İnce Detaylar) */ --renk-yesil-soluk: #98FB98; /* Çok Açık Yeşil (Arka Plan Efekt?) */ /* Nötr Renkler (Koyu Tema) */ --renk-arka-koyu1: #1a1a1e; /* Body Arka Planı (En Koyu) */ --renk-arka-koyu2: #25252c; /* Section Arka Planı */ --renk-arka-koyu3: #31313a; /* Kart, Nav Arka Planı */ --renk-metin-acik1: #ededf0; /* Ana Açık Metin */ --renk-metin-acik2: #b5b5c0; /* İkincil Açık Metin */ --renk-beyaz: #ffffff; /* Tam Beyaz (Kontrast için) */ /* Gölgeler (Koyu Tema için daha belirgin) */ --renk-golge-koyu: rgba(0, 0, 0, 0.6); --renk-golge-orta: rgba(0, 0, 0, 0.35); --renk-golge-hafif: rgba(0, 0, 0, 0.2); /* Ölçüler ve Efektler */ --kenar-yuvarlaklik-kucuk: 4px; --kenar-yuvarlaklik-orta: 8px; --kenar-yuvarlaklik-buyuk: 12px; /* Daha köşeli bir his için */ --kenar-yuvarlaklik-tam: 50px; /* Pill shape butonlar */ --golge-yumusak: 0 8px 25px var(--renk-golge-orta); --golge-belirgin: 0 15px 45px var(--renk-golge-koyu); --golge-ic-hafif: inset 0 2px 4px rgba(0,0,0,0.2); --golge-ic-derin: inset 0 4px 8px rgba(0,0,0,0.4); /* Animasyon Değerleri */ --animasyon-hizi-cok-yavas: 1s; --animasyon-hizi-yavas: 0.6s; --animasyon-hizi-normal: 0.4s; /* Biraz yavaşlatıldı */ --animasyon-hizi-hizli: 0.2s; --animasyon-fonksiyonu-yumusak: cubic-bezier(0.65, 0, 0.35, 1); /* Yumuşak giriş/çıkış */ --animasyon-fonksiyonu-elastik: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Sekme efekti */ } /* -------------------------------------------------------------------------- */ /* 3. Genel Sıfırlama ve Temel HTML Elementleri /* - Tutarlı bir başlangıç noktası sağlar. /* -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; /* Genel geçiş efekti (performansa dikkat) */ /* transition: all var(--animasyon-hizi-normal) var(--animasyon-fonksiyonu-yumusak); */ } html { scroll-behavior: smooth; /* Yumuşak kaydırma */ font-size: 100%; /* 1rem = 16px (genellikle) */ } body { font-family: 'Poppins', sans-serif; line-height: 1.8; /* Ferah satır aralığı */ background: linear-gradient(to bottom, var(--renk-arka-koyu1) 0%, #0a0a0c 100%); /* Hafif gradient */ color: var(--renk-metin-acik1); font-size: 1rem; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } /* Ana içerik alanı body'nin esnemesini sağlar */ main { flex-grow: 1; width: 100%; } /* Genel Resim Ayarları */ img, video, svg { max-width: 100%; /* Taşmaları engelle */ height: auto; /* Oranı koru */ display: block; /* Alt boşluğu kaldır */ } /* Genel Link Ayarları */ a { color: var(--renk-mor-canli); /* Canlı mor linkler */ text-decoration: none; transition: color var(--animasyon-hizi-normal) ease, text-shadow var(--animasyon-hizi-normal) ease, background-color var(--animasyon-hizi-normal) ease; } a:hover, a:focus { color: var(--renk-yesil-canli); /* Hover: Canlı Yeşil */ text-decoration: none; /* Alt çizgiyi kaldıralım */ text-shadow: 0 0 8px var(--renk-yesil-canli); /* Yeşil parlama */ } /* Genel Başlık Stilleri */ h1, h2, h3, h4, h5, h6 { font-weight: 700; /* Kalın başlıklar */ line-height: 1.3; /* Başlık satır aralığı */ color: inherit; /* Body'den veya parent'tan alsın (bölümlerde üzerine yazılacak) */ } /* Genel Paragraf Stilleri */ p { margin-bottom: 1.5rem; /* Paragraflar arası boşluk */ color: var(--renk-metin-acik2); /* İkincil metin rengi */ } p:last-child { margin-bottom: 0; /* Son paragrafın alt boşluğunu kaldır */ } /* Genel Liste Stilleri */ ul, ol { padding-left: 1.5rem; /* İçeriden boşluk */ margin-bottom: 1.5rem; } li { margin-bottom: 0.5rem; } /* -------------------------------------------------------------------------- */ /* 4. Metin Seçim Rengi (::selection) /* -------------------------------------------------------------------------- */ ::selection { background-color: var(--renk-yesil-canli); /* Seçim arka planı yeşil */ color: var(--renk-arka-koyu1); /* Seçili metin koyu */ text-shadow: none; } ::-moz-selection { /* Firefox için */ background-color: var(--renk-yesil-canli); color: var(--renk-arka-koyu1); text-shadow: none; } /* -------------------------------------------------------------------------- */ /* 5. Üst Bilgi (Header) - Arka Plan Resmi ve Animasyonlu /* -------------------------------------------------------------------------- */ header { /* ARKAPLAN RESMİ BURADA AYARLANIYOR */ background-image: /* Katman 1: Koyu Renk Geçişi (Overlay) */ linear-gradient(rgba(44, 44, 46, 0.7) 0%, rgba(26, 26, 30, 0.9) 100%), /* Katman 2: Kullanıcının Resmi */ url('images/header_arkaplan.jpg'); /* <<< KENDİ RESMİNİZİ images KLASÖRÜNE KOYUP ADINI BURAYA YAZIN */ background-blend-mode: multiply; /* Renkleri karıştırarak koyulaştır */ background-size: cover; background-position: center 70%; /* Resmin dikey konumunu ayarla (istenirse) */ background-repeat: no-repeat; background-attachment: fixed; /* Kaydırmada parallax efekti (isteğe bağlı) */ color: var(--renk-beyaz); padding: clamp(6rem, 15vh, 10rem) 2rem; /* Esnek dikey padding */ text-align: center; position: relative; overflow: hidden; border-bottom: 10px solid var(--renk-yesil-orta); /* Daha kalın yeşil kenar */ box-shadow: 0 8px 25px var(--renk-golge-koyu); z-index: 1; } /* Header arka planına ek katmanlar (parçacık efekti gibi) */ header::before { content: ''; position: absolute; inset: 0; /* Tüm alanı kapla */ background-image: radial-gradient(var(--renk-mor-acik) 1px, transparent 1px), radial-gradient(var(--renk-yesil-acik) 1px, transparent 1px); background-size: 30px 30px, 40px 40px; background-position: 0 0, 15px 15px; opacity: 0.05; /* Çok silik */ animation: subtle-move 60s linear infinite; z-index: -1; } @keyframes subtle-move { 0% { background-position: 0 0, 15px 15px; } 100% { background-position: 1000px 500px, 1015px 515px; } } /* Header Başlığı (H1) */ header h1 { margin: 0 0 1.2rem 0; font-size: clamp(3.2rem, 9vw, 5.5rem); /* Daha büyük boyut aralığı */ font-weight: 700; color: var(--renk-beyaz); text-shadow: 0 0 10px var(--renk-kirmizi-koyu), 0 0 20px var(--renk-kirmizi-koyu), 4px 4px 8px var(--renk-golge-koyu); /* Kırmızımsı parlama + gölge */ position: relative; z-index: 1; animation: text-flicker 3s linear infinite alternate 1s; /* Hafif titreşim efekti */ } /* Header Paragrafı (P) */ header p { font-size: clamp(1.3rem, 4.5vw, 1.9rem); color: var(--renk-metin-acik1); text-shadow: 2px 2px 6px var(--renk-golge-koyu); margin: 0 auto; max-width: 850px; font-weight: 400; position: relative; z-index: 1; opacity: 0; /* Animasyon için başlangıç */ animation: fadeIn 1s ease forwards 0.5s; /* Gecikmeli giriş */ } /* Genel Giriş Animasyonları */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes text-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 10px var(--renk-kirmizi-koyu), 0 0 20px var(--renk-kirmizi-koyu), 4px 4px 8px var(--renk-golge-koyu); } 20%, 24%, 55% { text-shadow: none; } } /* -------------------------------------------------------------------------- */ /* 6. Navigasyon Menüsü - Daha Büyük Aktif Buton /* -------------------------------------------------------------------------- */ nav { background: rgba(42, 42, 46, 0.85); /* Hafif şeffaf arka plan */ backdrop-filter: blur(12px); /* Arka planı bulanıklaştır (iOS/Safari uyumlu) */ -webkit-backdrop-filter: blur(12px); padding: 1rem 0; margin-bottom: 4.5rem; box-shadow: 0 6px 15px var(--renk-golge-orta); position: sticky; top: 0; z-index: 1000; border-bottom: 5px solid var(--renk-mor-orta); /* Mor kenarlık */ transition: background-color var(--animasyon-hizi-normal) ease; } nav ul { list-style: none; text-align: center; } nav ul li { display: inline-block; margin: 0 0.7rem; /* Boşluk */ position: relative; } /* Navigasyon Butonları (Genel - İnaktif) */ nav ul li a { display: inline-flex; align-items: center; padding: 0.9rem 2rem; /* İç boşluk */ color: var(--renk-metin-acik2); /* Sönük renk */ background-color: transparent; border: 2px solid #555; /* Gri kenarlık */ border-radius: var(--kenar-yuvarlaklik-orta); text-decoration: none; font-weight: 600; transition: all var(--animasyon-hizi-normal) var(--animasyon-fonksiyonu-yumusak); text-transform: uppercase; letter-spacing: 1.2px; position: relative; overflow: hidden; /* Efektler için */ opacity: 0.8; /* Hafif soluk */ } /* İkon Stilleri */ nav ul li a i { margin-right: 0.9rem; font-size: 1.15em; /* Biraz daha büyük ikon */ transition: transform var(--animasyon-hizi-normal) var(--animasyon-fonksiyonu-elastik); /* Sekme efekti */ } /* İnaktif Buton Hover */ nav ul li a:hover { color: var(--renk-beyaz); border-color: var(--renk-yesil-acik); /* Açık yeşil kenarlık */ background-color: rgba(46, 139, 87, 0.1); /* Çok hafif yeşil arka plan */ transform: translateY(-3px); box-shadow: 0 5px 10px var(--renk-golge-hafif); opacity: 1; } nav ul li a:hover i { transform: scale(1.2) rotate(10deg); /* İkon hafif dönsün ve büyüsün */ } /* --- AKTİF SAYFA BUTONU (DAHA BÜYÜK VE BELİRGİN) --- */ nav ul li a.active { background: var(--renk-bordo); /* Bordo arka plan */ color: var(--renk-beyaz); border-color: var(--renk-bordo-acik); /* Açık bordo kenarlık */ font-weight: 700; opacity: 1; transform: scale(1.1) translateY(-2px); /* %10 Daha Büyük ve hafif yukarıda */ padding: 1rem 2.2rem; /* İç boşluk da artsın */ box-shadow: 0 0 20px rgba(139, 0, 0, 0.6), inset 0 3px 6px rgba(0,0,0,0.4); /* Bordo parlama ve iç gölge */ z-index: 2; /* Diğerlerinin hafif önüne geçebilir */ } /* Aktif Buton İkonu */ nav ul li a.active i { transform: scale(1.2); /* Aktif ikon daha büyük */ color: var(--renk-beyaz); /* Rengi beyaz olsun */ } /* Aktif Buton Hover (Stil değişmesin) */ nav ul li a.active:hover { cursor: default; background: var(--renk-bordo); color: var(--renk-beyaz); border-color: var(--renk-bordo-acik); box-shadow: 0 0 20px rgba(139, 0, 0, 0.6), inset 0 3px 6px rgba(0,0,0,0.4); transform: scale(1.1) translateY(-2px); /* Boyut ve konum korunsun */ } /* ------------------------------------------------------ */ /* Klavye Odaklanma Stilleri */ nav ul li a:focus-visible { outline: 3px solid var(--renk-yesil-canli); outline-offset: 5px; background-color: var(--renk-arka-koyu3); color: var(--renk-beyaz); opacity: 1; } nav ul li a.active:focus-visible { outline-color: var(--renk-kirmizi-acik); /* Aktifken farklı odak */ } /* -------------------------------------------------------------------------- */ /* 7. Ana İçerik Alanı (Main) ve Bölümler (Section) /* -------------------------------------------------------------------------- */ main { max-width: 1350px; /* Daha da geniş */ margin: 4.5rem auto; padding: 0 3rem; } section { background: var(--renk-arka-koyu2); padding: 4rem 4.5rem; /* Bol iç boşluk */ margin-bottom: 4.5rem; border-radius: var(--kenar-yuvarlaklik-buyuk); /* Yuvarlak köşeler */ box-shadow: var(--golge-yumusak), inset 0 0 50px rgba(0,0,0,0.25); border: 1px solid #404045; border-left: 8px solid var(--renk-mor-orta); /* Mor sol kenar vurgusu */ transition: all var(--animasyon-hizi-yavas) var(--animasyon-fonksiyonu-yumusak); position: relative; overflow: hidden; /* Pseudo elementler için */ animation: scaleIn 0.8s var(--animasyon-fonksiyonu-yumusak) backwards; animation-delay: calc(var(--section-index, 0) * 0.15s); /* Gecikmeli giriş */ } /* Section üzerine gelince daha belirgin efekt */ section:hover { box-shadow: var(--golge-belirgin), inset 0 0 60px rgba(0,0,0,0.1); transform: translateY(-8px) scale(1.01); /* Hafif büyüme */ border-color: var(--renk-mor-canli); border-left-color: var(--renk-yesil-canli); /* Sol kenar rengi değişsin */ } /* Bölüm Başlıkları (H2) */ section h2 { color: var(--renk-mor-acik); margin: 0 auto 3.5rem auto; padding-bottom: 1.5rem; font-size: 3rem; font-weight: 700; text-align: center; letter-spacing: 1.8px; /* Daha geniş harf aralığı */ position: relative; width: fit-content; text-shadow: 2px 2px 4px var(--renk-golge-orta); } /* Başlık altına gelişmiş çizgi efekti */ section h2::before, section h2::after { content: ''; position: absolute; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--renk-mor-canli) 0%, var(--renk-yesil-canli) 100%); border-radius: 3px; opacity: 0.9; transition: width var(--animasyon-hizi-yavas) var(--animasyon-fonksiyonu-elastik); } section h2::before { width: 0%; /* Başlangıçta gizli */ left: 50%; transform: translateX(-50%); } section h2::after { /* İkinci çizgi (isteğe bağlı) */ display:none; /* Şimdilik kapalı */ } section:hover h2::before { width: 60%; /* Hover'da çizgi uzasın */ } /* Genel Liste Stilleri */ section ul { list-style: none; margin-top: 2.5rem; } section ul li { padding: 1rem 0 1rem 3rem; /* Sol boşluk arttı */ margin-bottom: 1.2rem; position: relative; border-bottom: 1px solid rgba(181, 181, 192, 0.1); /* Daha belirgin ayırıcı */ color: var(--renk-metin-acik2); transition: all var(--animasyon-hizi-normal) ease; font-size: 1.05rem; } section ul li:last-child { border-bottom: none; } /* Liste Başı İkonu/Şekli */ section ul li::before { content: ''; position: absolute; left: 0.5rem; /* Konum ayarı */ top: 50%; transform: translateY(-50%) rotate(0deg); width: 12px; height: 12px; border: 3px solid var(--renk-yesil-canli); /* Yeşil kenarlık */ background-color: transparent; border-radius: 50%; /* Daire */ transition: all var(--animasyon-hizi-normal) var(--animasyon-fonksiyonu-yumusak); } /* Liste Elemanı Hover */ section ul li:hover { color: var(--renk-beyaz); background-color: rgba(255, 255, 255, 0.03); /* Çok hafif arka plan */ border-radius: var(--kenar-yuvarlaklik-kucuk); } section ul li:hover::before { background-color: var(--renk-yesil-canli); /* İçi dolsun */ transform: translateY(-50%) rotate(180deg) scale(1.2); /* Dönsün ve büyüsün */ border-color: var(--renk-yesil-orta); box-shadow: 0 0 8px var(--renk-yesil-canli); /* Parlama efekti */ } /* -------------------------------------------------------------------------- */ /* 8. Kart Listeleri (Karakterler / Haritalar) - Gelişmiş Stiller /* -------------------------------------------------------------------------- */ #character-list, #map-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* Daha geniş min kart */ gap: 4rem; /* Kart arası boşluk */ padding-top: 2.5rem; } /* Kart Stili */ .character-card, .map-card { background: linear-gradient(160deg, var(--renk-arka-koyu3) 0%, var(--renk-arka-koyu2) 100%); border-radius: var(--kenar-yuvarlaklik-orta); box-shadow: var(--golge-yumusak); overflow: hidden; display: flex; flex-direction: column; transition: all var(--animasyon-hizi-yavas) cubic-bezier(0.165, 0.84, 0.44, 1); border: 2px solid #444; position: relative; animation: scaleIn 0.8s var(--animasyon-fonksiyonu-yumusak) backwards; /* Kartların animasyon gecikmeleri */ animation-delay: calc(var(--card-index, 0) * 0.1s); /* JS ile --card-index atanabilir */ } #character-list > div:nth-child(1), #map-list > div:nth-child(1) { animation-delay: 0.15s; } #character-list > div:nth-child(2), #map-list > div:nth-child(2) { animation-delay: 0.25s; } #character-list > div:nth-child(3), #map-list > div:nth-child(3) { animation-delay: 0.35s; } #character-list > div:nth-child(4), #map-list > div:nth-child(4) { animation-delay: 0.45s; } /* Daha fazla kart için */ /* Kart Hover Efekti */ .character-card:hover, .map-card:hover { transform: translateY(-15px) scale(1.04) rotate(0.5deg); /* Daha belirgin efekt */ box-shadow: var(--golge-belirgin); border-color: var(--renk-mor-canli); } /* Kart Resim Alanı */ .card-image-container { position: relative; overflow: hidden; border-bottom: 6px solid var(--renk-bordo); /* Kalın bordo kenarlık */ clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); /* Altı kesik şekil */ } .card-image-container img { width: 100%; height: 300px; /* Daha yüksek resim alanı */ object-fit: cover; display: block; filter: contrast(1.1) saturate(1.1) brightness(1); transition: all var(--animasyon-hizi-yavas) ease-in-out; } /* Kart Resim Hover Efekti */ .character-card:hover img, .map-card:hover img { filter: contrast(1.3) saturate(1.3) brightness(1.1); transform: scale(1.15); /* Daha fazla büyüme */ } /* Kart Resim Üzeri Overlay */ .card-image-container::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(42, 42, 46, 0.8) 0%, transparent 50%); /* Alttan koyuluk */ opacity: 1; transition: opacity var(--animasyon-hizi-normal) ease; } .character-card:hover .card-image-container::after, .map-card:hover .card-image-container::after { opacity: 0.5; /* Hover'da overlay azalsın */ } /* Kart İçerik Alanı */ .card-content { padding: 2rem 2.5rem; /* İç boşluk */ flex-grow: 1; display: flex; flex-direction: column; text-align: center; } /* Kart Başlığı */ .card-content h3 { color: var(--renk-bordo-acik); /* Açık Bordo */ margin: 0 auto 1.2rem auto; /* Alt boşluk */ font-size: 1.9rem; font-weight: 700; position: relative; padding-bottom: 0.8rem; /* Çizgi için yer */ width: fit-content; } /* Kart başlığı altına çizgi */ .card-content h3::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 3px; background: var(--renk-mor-acik); border-radius: 2px; transform: scaleX(0); /* Başlangıçta gizli */ transition: transform var(--animasyon-hizi-yavas) var(--animasyon-fonksiyonu-elastik); transform-origin: center; } .character-card:hover .card-content h3::after, .map-card:hover .card-content h3::after { transform: scaleX(1); /* Hover'da çizgi belirsin */ } /* Kart Paragrafı */ .card-content p { color: var(--renk-metin-acik2); font-size: 1rem; flex-grow: 1; margin-bottom: 1.8rem; line-height: 1.7; } /* Kart Link/Buton */ .card-link { display: inline-block; padding: 0.8rem 1.6rem; background: linear-gradient(45deg, var(--renk-mor-orta), var(--renk-mor-canli)); color: var(--renk-beyaz); border-radius: var(--kenar-yuvarlaklik-kucuk); text-decoration: none; font-weight: 600; transition: all var(--animasyon-hizi-normal) var(--animasyon-fonksiyonu-yumusak); margin-top: auto; border: 1px solid var(--renk-mor-canli); box-shadow: 0 4px 8px var(--renk-golge-hafif); } .card-link:hover { background: linear-gradient(45deg, var(--renk-mor-canli), var(--renk-mor-orta)); color: var(--renk-beyaz); transform: scale(1.08) translateY(-2px); box-shadow: 0 6px 15px rgba(138, 43, 226, 0.5); /* Morumsu gölge */ text-decoration: none; } .card-link:focus-visible { outline: 3px solid var(--renk-mor-canli); outline-offset: 3px; } /* -------------------------------------------------------------------------- */ /* 9. Bağış Butonu ve Genel Buton Stilleri /* -------------------------------------------------------------------------- */ .donate-button, button, input[type="submit"] { /* Genel buton stilleri */ display: inline-block; background: linear-gradient(65deg, var(--renk-yesil) 0%, var(--renk-yesil-canli) 100%); color: var(--renk-beyaz); padding: 18px 45px; border: none; border-radius: var(--kenar-yuvarlaklik-buyuk); font-size: 1.4rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: all var(--animasyon-hizi-normal) var(--animasyon-fonksiyonu-elastik); /* Elastik geçiş */ box-shadow: 0 5px 20px rgba(46, 139, 87, 0.45); position: relative; overflow: hidden; z-index: 1; letter-spacing: 1.8px; text-transform: uppercase; margin-top: 1rem; margin-right: 0.5rem; /* Diğer butonlarla yan yana gelirse boşluk */ } /* Buton Parlama Efekti */ .donate-button::before, button::before, input[type="submit"]::before { content: ''; position: absolute; top: 0; left: -130%; width: 100%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left var(--animasyon-hizi-yavas) cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 0; transform: skewX(-25deg); } /* Buton Hover */ .donate-button:hover, button:hover, input[type="submit"]:hover { background: linear-gradient(65deg, var(--renk-yesil-canli) 0%, var(--renk-yesil) 100%); box-shadow: 0 8px 30px rgba(46, 139, 87, 0.6); transform: scale(1.1) translateY(-4px) rotate(-1deg); /* Hafif eğim */ color: var(--renk-beyaz); text-decoration: none; } /* Buton Hover Parlama */ .donate-button:hover::before, button:hover::before, input[type="submit"]:hover::before { left: 130%; } /* Buton Tıklama Anı */ .donate-button:active, button:active, input[type="submit"]:active { transform: scale(1.03) translateY(0px) rotate(0deg); box-shadow: 0 4px 15px rgba(46, 139, 87, 0.4); } /* Buton Odaklanma */ .donate-button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible { outline: 4px solid var(--renk-yesil-canli); outline-offset: 4px; box-shadow: 0 0 0 6px var(--renk-arka-koyu1), 0 0 0 9px var(--renk-yesil-canli); /* Kademeli odak */ } /* -------------------------------------------------------------------------- */ /* 10. Form Elemanları (Gelecekteki Kullanım İçin Stiller) /* - İletişim formu vb. eklenirse kullanılacak temel stiller. /* -------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], textarea, select { width: 100%; padding: 1rem 1.2rem; margin-bottom: 1.5rem; background-color: var(--renk-arka-koyu3); border: 2px solid #555; border-radius: var(--kenar-yuvarlaklik-orta); color: var(--renk-metin-acik1); font-family: inherit; font-size: 1rem; transition: border-color var(--animasyon-hizi-normal) ease, box-shadow var(--animasyon-hizi-normal) ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="number"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--renk-mor-canli); box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); /* Mor parlama */ } textarea { min-height: 150px; /* Minimum yükseklik */ resize: vertical; /* Sadece dikeyde boyutlandırma */ } label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--renk-metin-acik2); } input::placeholder, textarea::placeholder { color: #888; opacity: 1; } /* Checkbox / Radio Button Stilleri (Tarayıcı varsayılanları yerine özel) */ input[type="checkbox"], input[type="radio"] { opacity: 0; /* Varsayılanı gizle */ position: absolute; } input[type="checkbox"] + label, input[type="radio"] + label { position: relative; padding-left: 2.2rem; /* Özel kutu için yer */ cursor: pointer; user-select: none; /* Metin seçilemesin */ } input[type="checkbox"] + label::before, input[type="radio"] + label::before { /* Özel kutu */ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; border: 2px solid #888; background-color: var(--renk-arka-koyu3); transition: all var(--animasyon-hizi-hizli) ease; } input[type="radio"] + label::before { border-radius: 50%; /* Radio için yuvarlak */ } input[type="checkbox"] + label::before { border-radius: var(--kenar-yuvarlaklik-kucuk); /* Checkbox için köşeli */ } input[type="checkbox"] + label::after, input[type="radio"] + label::after { /* İşaret */ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(0); /* Başlangıçta gizli */ transition: transform var(--animasyon-hizi-hizli) ease; background-color: var(--renk-yesil-canli); } input[type="radio"] + label::after { /* Radio işareti (içi dolu daire) */ width: 0.7rem; height: 0.7rem; border-radius: 50%; left: 0.25rem; /* Kutunun içine ortala */ top: calc(50% - 0.35rem); } input[type="checkbox"] + label::after { /* Checkbox işareti (check işareti) */ content: '\f00c'; /* Font Awesome check ikonu */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.9rem; color: var(--renk-yesil-canli); left: 0.15rem; top: calc(50% - 0.5rem); background-color: transparent; /* İkonun kendi rengi */ transform: translateY(-50%) scale(0) rotate(-15deg); } input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before { border-color: var(--renk-yesil-canli); /* Seçiliyken kenarlık yeşil */ } input[type="checkbox"]:checked + label::after, input[type="radio"]:checked + label::after { transform: translateY(-50%) scale(1); /* İşareti görünür yap */ } input[type="checkbox"]:checked + label::after { transform: translateY(-50%) scale(1) rotate(0deg); } /* -------------------------------------------------------------------------- */ /* 11. Alt Bilgi (Footer) /* -------------------------------------------------------------------------- */ footer { text-align: center; margin-top: 8rem; /* Daha fazla üst boşluk */ padding: 4rem 2.5rem; background: var(--renk-arka-koyu1); color: var(--renk-metin-acik2); font-size: 1.05rem; /* Biraz daha büyük yazı */ border-top: 10px solid var(--renk-mor-orta); /* Kalın mor üst kenarlık */ position: relative; overflow: hidden; } footer::before { content: ''; position: absolute; top: -20px; /* Kenarlığın üzerine hafifçe binsin */ left: 0; width: 100%; height: 100px; /* Yükseklik */ background: linear-gradient(to bottom, rgba(26, 26, 30, 0.5) 0%, transparent 100%); /* Yukarıdan hafif gölge efekti */ z-index: 0; pointer-events: none; /* Tıklanamaz */ } footer p { margin: 0; position: relative; z-index: 1; } footer p:first-of-type { margin-bottom: 0.5rem; /* Paragraflar arası küçük boşluk */ } /* Footer Linkleri */ footer a { color: var(--renk-mor-acik); font-weight: 600; border-bottom: 2px dotted transparent; /* Başlangıçta şeffaf çizgi */ transition: color var(--animasyon-hizi-normal) ease, border-color var(--animasyon-hizi-normal) ease; padding-bottom: 2px; } footer a:hover { color: var(--renk-yesil-acik); border-bottom-color: var(--renk-yesil-acik); /* Hover'da çizgi belirsin */ text-shadow: none; text-decoration: none; } /* -------------------------------------------------------------------------- */ /* 12. Yardımcı Sınıflar (Utility Classes - İsteğe Bağlı) /* - Hızlı stil vermek için kullanılabilir (çok fazla kullanmamalı) /* -------------------------------------------------------------------------- */ .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-bold { font-weight: 700 !important; } .text-uppercase { text-transform: uppercase !important; } .text-white { color: var(--renk-beyaz) !important; } .text-bordo { color: var(--renk-bordo) !important; } .text-mor { color: var(--renk-mor-orta) !important; } .text-yesil { color: var(--renk-yesil-orta) !important; } .mt-1 { margin-top: 1rem !important; } .mt-2 { margin-top: 2rem !important; } .mt-3 { margin-top: 3rem !important; } .mb-1 { margin-bottom: 1rem !important; } .mb-2 { margin-bottom: 2rem !important; } .mb-3 { margin-bottom: 3rem !important; } .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } .d-flex { display: flex !important; } .d-none { display: none !important; } /* -------------------------------------------------------------------------- */ /* 13. Yazdırma Stilleri (@media print) - Daha Detaylı /* -------------------------------------------------------------------------- */ @media print { @page { size: A4 portrait; /* Sayfa boyutu ve yönü */ margin: 1.5cm; /* Kenar boşlukları */ } body { background: var(--renk-beyaz) !important; color: #000 !important; font-size: 10pt; /* Daha küçük font */ line-height: 1.4; font-family: 'Times New Roman', serif; /* Yazdırmaya uygun font */ } header, nav, footer, .donate-button, ::selection, header::before, header::after, footer::before, button, input[type="submit"], .card-link { display: none !important; /* Yazdırılmayacak elemanlar */ } main { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } section { box-shadow: none !important; border: 1px solid #bbb !important; padding: 1cm !important; margin-bottom: 1.5cm !important; animation: none !important; border-top: 1px solid #bbb !important; border-left: none !important; background: var(--renk-beyaz) !important; page-break-inside: avoid; /* Bölüm ortasında sayfa bölünmesin */ border-radius: 0 !important; } section h2 { color: #000 !important; text-align: left !important; font-size: 14pt !important; background: none !important; -webkit-text-fill-color: initial !important; text-fill-color: initial !important; border-bottom: 1px solid #000 !important; padding-bottom: 0.5cm !important; margin-bottom: 1cm !important; text-shadow: none !important; width: auto !important; } section h2::before, section h2::after { display: none !important; } a { color: #000 !important; text-decoration: underline !important; font-weight: normal !important; border: none !important; text-shadow: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } /* Dış linkleri göster */ a[href^="#"] { text-decoration: none !important; } /* Sayfa içi linkleri normal göster */ section ul { margin-top: 1cm !important; } section ul li { border-bottom: 1px dotted #ccc !important; color: #000 !important; padding: 0.2cm 0 !important; margin-bottom: 0.3cm !important; } section ul li::before { display: inline !important; position: static !important; transform: none !important; content: '- ' !important; color: #000 !important; margin-right: 5px !important; font-family: initial !important; font-weight: normal !important; font-size: inherit !important; background: none !important; border: none !important; box-shadow: none !important;} #character-list, #map-list { display: block !important; } .character-card, .map-card { box-shadow: none !important; border: 1px solid #bbb !important; margin-bottom: 1.5cm !important; page-break-inside: avoid; animation: none !important; transform: none !important; background: var(--renk-beyaz) !important; border-radius: 0 !important; padding: 1cm !important; } .character-card::before, .map-card::before, .character-card::after, .map-card::after { display: none !important; } .card-image-container { border-bottom: none !important; clip-path: none !important;} .card-image-container img { max-width: 60% !important; height: auto !important; filter: grayscale(1) !important; border-bottom: none !important; margin: 0 auto 1cm auto !important; } .card-image-container::after { display: none !important; } .card-content { background: none !important; padding: 0 !important;} .card-content h3 { color: #000 !important; font-size: 12pt !important; text-align: left !important; border-bottom: 1px solid #ccc !important; padding-bottom: 0.5cm !important; margin-bottom: 0.5cm !important; } .card-content h3::after { display: none !important;} .card-content p { color: #000 !important; font-size: 10pt !important; text-align: left !important; } } /* -------------------------------------------------------------------------- */ /* 14. Mobil Uyumluluk (@media queries) - Daha Fazla Kırılma Noktası /* -------------------------------------------------------------------------- */ /* Geniş Laptoplar / Küçük Desktoplar */ @media (max-width: 1400px) { main { max-width: 1200px; } #character-list, #map-list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem;} } /* Standart Laptoplar / Büyük Tabletler */ @media (max-width: 1200px) { main { max-width: 1000px; padding: 0 2rem; } section h2 { font-size: 2.6rem; } header h1 { font-size: clamp(3rem, 7vw, 4.8rem); } header p { font-size: clamp(1.2rem, 4vw, 1.7rem); } nav ul li { margin: 0 0.6rem; } nav ul li a { padding: 0.9rem 1.6rem; font-size: 0.95rem;} } /* Tabletler Dikey / Küçük Laptoplar */ @media (max-width: 992px) { html { font-size: 95%; } /* Genel fontu hafif küçült */ main { max-width: 90%; padding: 0 1.5rem;} section { padding: 3rem 2.5rem; margin-bottom: 3.5rem;} section h2 { font-size: 2.3rem; } header { padding: 6rem 1.5rem 5rem 1.5rem; } nav ul li { margin: 0 0.4rem; } nav ul li a { padding: 0.8rem 1.4rem; font-size: 0.9rem; letter-spacing: 1px;} #character-list, #map-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem;} .card-image-container img { height: 240px; } .card-content h3 { font-size: 1.7rem; } } /* Büyük Telefonlar / Küçük Tabletler Dikey */ @media (max-width: 768px) { html { font-size: 90%; } body { line-height: 1.7; } header { padding: 5rem 1rem 4rem 1rem; border-bottom-width: 6px;} header h1 { font-size: 2.8rem; } header p { font-size: 1.3rem; } nav { padding: 0.8rem 0; margin-bottom: 3rem; border-bottom-width: 4px;} nav ul li { margin: 0 0.3rem; } nav ul li a { padding: 0.7rem 1.2rem; font-size: 0.85rem; letter-spacing: 0.8px;} nav ul li a.active { transform: scale(1.05) translateY(-1px); padding: 0.8rem 1.5rem;} /* Aktif buton mobilde daha az büyüsün */ main { padding: 0 1.5rem; } section { padding: 2.5rem 2rem; margin-bottom: 3rem;} section h2 { font-size: 2rem; } #character-list, #map-list { grid-template-columns: 1fr; gap: 3rem;} /* Tek sütun */ .character-card, .map-card { border-radius: var(--kenar-yuvarlaklik-orta); } .donate-button { padding: 16px 35px; font-size: 1.3rem; } footer { padding: 3.5rem 1.5rem; margin-top: 5rem; border-top-width: 6px;} } /* Orta Boy Telefonlar */ @media (max-width: 576px) { nav { position: static; } nav ul { display: flex; flex-direction: column; align-items: stretch; } nav ul li { display: block; width: 95%; max-width: 400px; margin: 0.8rem auto; } /* Butonlar arası daha fazla boşluk */ nav ul li a { width: 100%; text-align: center; justify-content: center; padding: 1rem; font-size: 1rem;} nav ul li a.active { transform: scale(1.03); padding: 1.1rem;} /* Aktif buton */ header { padding: 4.5rem 1rem; } header h1 { font-size: 2.5rem; } main { padding: 0 1rem; } section { padding: 2rem 1.5rem; } section h2 { font-size: 1.8rem; text-align: center; } section h2::before, section h2::after { width: 35%; } section h2::before { left: 5%;} section h2::after { right: 5%;} .card-image-container img { height: 220px; } .card-content { padding: 1.5rem; } .card-content h3 { font-size: 1.6rem; } .card-content p { font-size: 0.95rem; } .donate-button { padding: 14px 30px; font-size: 1.2rem; } footer { padding: 3rem 1rem; } } @media (max-width: 420px) { html { font-size: 85%; } header { padding: 4rem 1rem; } header h1 { font-size: 2.2rem; } header p { font-size: 1.1rem; } nav ul li { margin: 0.6rem auto; } nav ul li a { padding: 0.9rem; font-size: 0.95rem;} section { padding: 1.8rem 1rem; } section h2 { font-size: 1.7rem; } #character-list, #map-list { gap: 2rem;} .card-image-container img { height: 200px; } .donate-button { padding: 12px 25px; font-size: 1.1rem; } } ::-webkit-scrollbar { width: 12px; background-color: var(--renk-arka-koyu1); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--renk-mor-orta), var(--renk-yesil-orta)); border-radius: 6px; border: 2px solid var(--renk-arka-koyu1); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--renk-mor-canli), var(--renk-yesil-canli)); } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px var(--renk-golge-orta); background-color: var(--renk-arka-koyu2); } /* style.css dosyasının sonuna ekleyin */ /* Varsayılan HTML audio oynatıcısını gizle */ audio#lobby-music { display: none; } /* Müzik Kontrol Butonları Konumlandırma (Örnek: Sağ Alt Köşe) */ #music-controls { position: fixed; /* Sayfada sabit kalsın */ bottom: 20px; /* Alttan boşluk */ right: 20px; /* Sağdan boşluk */ z-index: 1001; /* Diğer elemanların üzerinde */ } /* Sessize Alma Butonu Stili */ #mute-button { background-color: rgba(42, 42, 46, 0.8); /* Koyu yarı şeffaf */ color: var(--renk-metin-acik1); border: 1px solid #666; border-radius: 50%; /* Tam yuvarlak */ width: 50px; /* Genişlik */ height: 50px; /* Yükseklik */ font-size: 1.2rem; /* İkon boyutu */ cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all var(--animasyon-hizi-normal) ease; box-shadow: 0 3px 8px var(--renk-golge-orta); } #mute-button:hover { background-color: var(--renk-mor-orta); /* Hover'da mor */ color: var(--renk-beyaz); transform: scale(1.1); box-shadow: 0 5px 12px var(--renk-golge-orta); } #mute-button:focus-visible { outline: 3px solid var(--renk-mor-acik); outline-offset: 3px; } /* Buton içindeki ikon için ek stil (gerekirse) */ #mute-button i { transition: transform var(--animasyon-hizi-normal) ease; } #mute-button:hover i { transform: scale(1.1); }