@charset "UTF-8"; /* ======================================= */ /* FÜTÜRİSTİK ENDÜSTRİYEL CSS STİLLERİ */ /* Renkler: Koyu Gri, Neon Mor/Pembe, Neon Yeşil */ /* ======================================= */ /* --- RENK DEĞİŞKENLERİ --- */ :root { /* Koyu Panel/Arka Plan */ --color-bg-dark: #121212; /* Ana Vurgu Rengi: Neon Mor/Pembe (Mevcut HTML'deki renge yakın fütüristik bir ton) */ --color-primary: #ff00ff; /* İkincil Vurgu Rengi: Neon Yeşil/Camgöbeği (Teknolojik Işıma) */ --color-secondary: #00ffc2; /* Metin Rengi: Açık Gri */ --color-text-light: #eaeaea; /* Çerçeve Rengi */ --color-border: #ff5733; /* Başlık Fontu: Keskin, fütüristik */ --font-display: "Orbitron", sans-serif; /* Gövde/Veri Fontu: Dijital, okunaklı */ --font-body: "Share Tech Mono", monospace; /* Keskin Köşeler */ --border-radius-sharp: 4px; } /* --- FONT İMPORT (Orbitron ve Share Tech Mono Eklendi) --- */ /* Bu fontların HTML kısmına eklenmesi gerekir! */ /* (Aşağıdaki HTML düzenlemeleri kısmına bakın) */ html, body { background-color: var(--color-bg-dark); color: var(--color-text-light); /* Tüm metinleri açık gri yaptık */ font-family: var(--font-body); /* Tüm gövde metinleri dijital font */ font-size: 18px; font-weight: 400; text-rendering: optimizeLegibility; overflow-x: hidden; line-height: 1.6; background-image: url("background2.png"); background-size: cover; } /* --- TEMEL BİLEŞENLER --- */ .maintext { max-width: 1000px; margin: 40px auto; padding: 30px; background-color: transparent; /* #1e1e1e; Koyu panel rengi */ /* YENİ: PNG ARKA PLANI */ /* Dosya yolunuzu güncelleyin! */ background-size: cover; background-repeat: no-repeat; background-position: center; background-blend-mode: luminosity; /* Fütüristik tema için renkleri karıştırır */ border: 3px solid var(--color-primary); /* Neon çerçeve */ box-shadow: 0 0 25px rgba(255, 0, 255, 0.4); /* Işıma efekti */ border-radius: var(--border-radius-sharp); } h1 { font-family: var(--font-display); font-size: 3em; text-transform: uppercase; letter-spacing: 5px; color: var(--color-secondary) !important; /* Neon Yeşil Başlık */ text-shadow: 0 0 15px rgba(0, 255, 194, 0.8); border-bottom: 2px dashed #333; padding-bottom: 10px; margin-bottom: 10px; } #subtitle { font-size: 1.1em; color: var(--color-primary) !important; /* Neon Mor Alt Başlık */ font-style: italic; display: block; margin-top: -10px; /* H1'e yaklaştır */ text-align: center; letter-spacing: 1px; text-shadow: 0 0 5px rgba(255, 0, 255, 0.5); } p, li { line-height: 1.7; color: var(--color-text-light); /* Tüm metinler okunaklı açık gri */ margin-bottom: 15px; } /* --- RESİMLER ve ÇERÇEVELER --- */ img { margin: 20px auto; display: block; border-radius: var(--border-radius-sharp); /* Köşeleri keskinleştir */ /*border: 2px solid var(--color-secondary); /* Neon yeşil çerçeve */ box-shadow: 0 0 10px rgba(0, 255, 194, 0.5); transition: transform 0.3s; } .store { width: 200px; /* sabit genişlik */ height: 50px; /* sabit yükseklik */ object-fit: cover; /* orantılı kırpma, bozulma olmaz */ border: 1px solid #ccc; border-radius: 6px; margin: 20px; } img:hover { transform: scale(1.02); } .roundedimage img { border-radius: var(--border-radius-sharp); /* Resimler hala keskin köşeli */ } /* --- LİNKLER ve BUTON GÖRÜNÜMLÜ RESİMLER --- */ .row a img { /* Uygulama mağazası ikonları */ border: none; box-shadow: none; margin: 10px; transition: filter 0.3s; filter: brightness(0.8) drop-shadow(0 0 5px var(--color-secondary)); } .row a img:hover { filter: brightness(1) drop-shadow(0 0 15px var(--color-secondary)); transform: scale(1.05); } /* --- TABLOLAR (DATA LOG GÖRÜNÜMÜ) --- */ table { border-collapse: collapse; /* Tek hat */ margin-top: 30px; margin-bottom: 30px; background-color: #2d2d2d; /* Tablo arka planı */ } th { border: 1px solid var(--color-border); background-color: #444444; /* Başlık arka planı */ color: var(--color-secondary); font-family: var(--font-display); padding: 15px 10px; text-transform: uppercase; letter-spacing: 1px; border-radius: 0; /* Köşe yuvarlamayı kaldırdık */ text-align: center; } td { border: 1px dashed #333333; color: var(--color-text-light); /* Veri hücreleri metni */ padding: 10px; text-align: center; font-family: var(--font-body); } #valueBox { /* Önemli metrik kutuları için vurgu */ border: 2px solid var(--color-primary); box-shadow: 0 0 10px rgba(255, 0, 255, 0.6); background-color: #0a0a0a; font-weight: 700; color: var(--color-primary); padding: 15px 10px; } /* --- LİSTELER (USER GUIDE) --- */ ul { list-style-type: "⚡"; /* Fütüristik ikon */ padding-left: 20px; margin-left: 10px; } li { margin-bottom: 10px; padding-left: 10px; } /* Mevcut HTML'deki diğer stil tanımlarını temizledik */ .resim, .blur { /* Gerekli değilse kaldırılabilir veya yeniden tanımlanabilir */ display: none; }