/**
 * ferdigiden.com.tr - Yazılım Araçları Stilleri
 * Referans: coderspace.io/araclar/ (Mor & Beyaz Tema + Uzay Efekti)
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Overpass:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Shadows+Into+Light&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css');

:root {
    --primary: #6500FF;
    --primary-hover: #5300d6;
    --primary-light: #f3ebff;
    --space-bg: #0c0926;
    --space-card: #151136;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Overpass', sans-serif;
}

.font-rubik {
    font-family: 'Rubik', sans-serif;
}

.font-handwriting {
    font-family: 'Shadows Into Light', cursive;
}

/* Uzay Temalı Hero Arka Planı */
.space-hero-bg {
    background-color: #0c0827;
    background-image: 
        radial-gradient(circle at 50% 18%, rgba(101, 0, 255, 0.45) 0%, transparent 60%),
        radial-gradient(circle at 80% 30%, rgba(168, 85, 247, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 20% 70%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
        radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.7), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 90px 40px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 230px 80px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 310px 190px, rgba(255,255,255,0.75), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 380px 60px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 470px 140px, rgba(255,255,255,0.85), rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 540px 220px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 620px 110px, rgba(255,255,255,0.7), rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 350px 350px, 350px 350px, 350px 350px, 350px 350px, 350px 350px, 350px 350px, 350px 350px, 350px 350px, 350px 350px, 350px 350px;
}

/* Space Section Main Icon Wrapper */
.space-section-main-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(101, 0, 255, 0.8), rgba(168, 85, 247, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 30px rgba(101, 0, 255, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.space-section-main-icon-wrapper:hover {
    transform: scale(1.06) rotate(5deg);
    box-shadow: 0 0 40px rgba(101, 0, 255, 0.7);
}

/* Referans Tasarımdaki Araç Kartları (tools-software-item-card) */
.tools-software-item-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dark .tools-software-item-card {
    background: #151136;
    border-color: #2b235b;
}

.tools-software-item-card:hover {
    transform: translateY(-4px);
    border-color: #6500FF;
    box-shadow: 0 12px 28px -6px rgba(101, 0, 255, 0.18);
}

.dark .tools-software-item-card:hover {
    border-color: #8c42ff;
    box-shadow: 0 12px 32px -6px rgba(101, 0, 255, 0.35);
}

/* Araç İkon Kutusu */
.tool-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: #f5f0ff;
    color: #6500FF;
    transition: all 0.25s ease;
}

.dark .tool-icon-box {
    background: rgba(101, 0, 255, 0.2);
    color: #c49eff;
}

.tools-software-item-card:hover .tool-icon-box {
    background: #6500FF;
    color: #ffffff;
    transform: scale(1.05);
}

/* Yönlendirme İkonu */
.tool-arrow-icon {
    transition: transform 0.2s ease, color 0.2s ease;
}

.tools-software-item-card:hover .tool-arrow-icon {
    transform: translate(3px, -3px);
    color: #6500FF;
}

/* Kategori Navigasyon Butonları */
.category-filter-btn {
    transition: all 0.2s ease;
}

.category-filter-btn.active {
    background-color: #6500FF !important;
    color: #ffffff !important;
    font-weight: 600;
}

.category-filter-btn.active .cat-badge {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Özel Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f5;
}
.dark ::-webkit-scrollbar-track {
    background: #0f0c24;
}
::-webkit-scrollbar-thumb {
    background: #c3b4e6;
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #392c6e;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6500FF;
}

/* Klavye Sanal Tuş Efektleri */
.key-cap {
    transition: all 0.08s ease;
    user-select: none;
}
.key-cap.active-key {
    background-color: #6500FF !important;
    color: #ffffff !important;
    transform: translateY(2px) scale(0.97);
    box-shadow: 0 0 12px rgba(101, 0, 255, 0.6);
}