/* Theme Name: Spnk
Theme URI: Sohbet Teması
Author: S4S
Author URI: #
Description: Sohbet teması
Version: 1.0 */

/* CSS Kodları... */
        
        :root {
            --primary-color: #5B21B6; /* Mor */
            --secondary-color: #EC4899; /* Fuşya/Pembe */
            --text-color: #1F2937;
            --light-mor: #EDE9FE; /* Hafif Mor */
            --light-pembe: #FEF2F9; /* Hafif Pembe */
            --modern-radius: 2rem; /* 32px */
            --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #F9FAFB 0%, #EDE9FE 100%); /* Hafif Mor Geçişli Arkaplan */
            color: var(--text-color);
            overflow-x: hidden;
        }
        
        /* Orijinal max-width'i korumak için */
        .max-width-7xl {
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Modern Köşe Yapısı */
        .card-modern {
            border-radius: var(--modern-radius); 
            transition: transform 0.3s, box-shadow 0.3s;
            border: none;
        }
        .card-modern:hover {
             transform: translateY(-5px);
             box-shadow: 0 0.75rem 2rem rgba(91, 33, 182, 0.2) !important;
        }

        .cta-button {
            background-color: var(--secondary-color);
            transition: background-color 0.3s, transform 0.2s;
            color: white !important;
        }
        .cta-button:hover {
            background-color: #DB2777; 
            transform: scale(1.05);
        }

        /* Navigasyon, CTA ve Footer için kullanılan gradient */
        .bg-gradient-header {
            background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        }
        
        /* YENİ: Sade Footer Link Stili */
        .footer-link-simple {
            opacity: 0.85;
            transition: opacity 0.2s, color 0.2s;
            color: #d1d5db !important; /* Açık Gri */
        }
        .footer-link-simple:hover {
            opacity: 1;
            color: var(--secondary-color) !important; /* Hover'da Pembe */
        }

        /* Hero başlık rengi */
        .hero-title-color {
            color: var(--primary-color) !important;
        }
        
        /* Başlık için gradient renk */
        .gradient-text-hero {
            background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent; /* Fallback */
            display: inline-block; /* Gradient'in sadece metni kapsaması için */
        }
        
        /* Görselin 3D Mockup görünümü için */
        .image-mockup-wrapper {
            perspective: 1500px; /* 3D derinlik algısı */
        }
        
        /* Görselin sabit stilini koru ve boyutu küçült */
        .image-mockup {
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); /* Daha güçlü gölge */
            border-radius: 2.5rem; /* rounded-5'e eşdeğer */
            display: block; 
            width: 100%; /* Kolonu doldurmaya çalışır */
            max-width: 85%; /* Boyut küçültüldü */
            height: auto;
            /* Yatayda sağa hizalanması için */
            margin-left: auto; 
            margin-right: 0; 
        }

        /* Mobil cihazlarda (küçük ekran) ortalamak için */
        @media (max-width: 768px) {
            .image-mockup {
                margin-right: auto;
            }
        }
        
        /* İndirme Kartı Stilleri */
        .download-card {
            background-color: white;
            padding: 2.5rem 1.5rem;
            border-radius: var(--modern-radius);
            text-align: center;
            transition: all 0.3s;
            cursor: default; /* Artık tıklanabilir alan değil */
            border: 1px solid #E5E7EB;
            height: 100%; 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .download-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        .platform-icon {
            font-size: 3rem; 
            margin-bottom: 1rem;
        }
        
        /* Tüm indirme bağlantıları için temel stil */
        .download-btn-style {
            color: white !important;
            font-weight: bold;
            border-radius: 7px;
            padding: 0.75rem 2rem;
            transition: all 0.3s;
            cursor: pointer;
            border: none; 
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-decoration: none; /* Link olduğu için alt çizgiyi kaldır */
            display: inline-block; /* Blok gibi davranması için */
            width: 100%; /* Tam genişlik kaplaması için */
            text-align: center;
        }
        .download-btn-style:hover {
            transform: scale(1.03); 
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            color: white !important; /* Hover'da renk sabit kalsın */
        }
        
        /* Android Kartı: Mor Buton */
        #androidDownloadLink {
            background-color: var(--primary-color);
        }
        #androidDownloadLink:hover {
            background-color: #4C1D95; 
        }
        
        /* Mirc Kartı: Pembe Buton */
        #mircDownloadLink {
            background-color: var(--secondary-color);
        }
        #mircDownloadLink:hover {
            background-color: #DB2777; 
        }
        
        /* iOS Kartı - Koyu Yeşil Buton (Kullanıcı İsteği Üzerine Güncellendi) */
        #iosDownloadLink {
            background-color: #10B981; /* Koyu Yeşil */
        }
        #iosDownloadLink:hover {
            background-color: #059669; /* Hover için biraz daha koyu yeşil */
        }
        
        /* Burç Kartı Stilleri - ÇİFT YARIÇAPLI SADE STİL */
        .zodiac-card {
            background-color: white; /* Sade beyaz arkaplan */
            color: var(--text-color) !important; /* Metin rengi koyu */
            /* Farklı radius değerleri */
            border-radius: 2rem 0.5rem 2rem 0.5rem; 
            padding: 1.5rem 0.75rem; 
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            border: 1px solid var(--light-mor); /* Hafif mor kenarlık */
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden; 
        }
        .zodiac-card:before {
            content: none; /* Gradient katmanı kaldırıldı */
        }
        .zodiac-card:hover {
            transform: translateY(-5px); /* Hafif yukarı kalkma */
            box-shadow: 0 10px 30px rgba(91, 33, 182, 0.15); /* Hover'da hafif mor gölge */
            border-color: var(--primary-color); /* Hover'da mor kenarlık */
            opacity: 1;
        }
        .zodiac-card.active {
            /* Aktif rengi: Açık Pembe Arkaplan, Koyu Metin, Pembe Dış Kenarlık */
            background-image: none;
            background-color: var(--light-pembe); /* Açık Pembe */
            transform: scale(1.03); 
            box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4);
            color: var(--text-color) !important; 
            border: 2px solid var(--secondary-color); /* Pembe Dış Kenarlık */
        }
        
        /* SVG Icon stili */
        .zodiac-icon svg {
            width: 3rem; 
            height: 3rem;
            stroke: var(--primary-color); /* Varsayılan Mor */
            stroke-width: 2.5;
            fill: none;
            line-height: 1;
            margin: 0 auto 0.5rem;
            transition: stroke 0.2s ease-in-out;
            position: relative;
            z-index: 2; 
        }

        /* Tıklanan karttaki SVG rengini değiştirme */
        .zodiac-card.active .zodiac-icon svg {
             stroke: var(--secondary-color); /* Aktifken pembe olsun */
        }
        
        /* Metin renklerini tekrar koyu yap */
        .zodiac-card div.fw-bold.small,
        .zodiac-card .opacity-75 {
            color: var(--text-color) !important; /* Varsayılan olarak koyu */
            position: relative;
            z-index: 2;
        }
        .zodiac-card.active .opacity-75 {
            opacity: 0.7 !important; /* Aktifken biraz soluk */
        }


        /* Modal Stilleri */
        .modal-content-custom {
            border-radius: var(--modern-radius) !important;
            border: none;
            overflow: hidden;
        }
        .modal-header-custom {
            background-color: var(--primary-color);
            color: white;
            border-bottom: none;
        }
        .modal-footer-custom {
            background-color: var(--light-mor);
            border-top: none;
        }
        
        /* YENİ ODA KART STİLİ */
        .chat-room-card {
            padding: 1.5rem;
            border-radius: var(--modern-radius);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #E5E7EB;
            text-align: left;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .chat-room-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
        }
        .room-icon {
            font-size: 2rem;
        }
        
        /* GİRİŞ FORMU BUTON STİLLERİ */
        .login-btn {
            font-weight: bold;
            padding: 0.75rem 2rem;
            transition: all 0.3s;
            color: white !important;
            border-radius: 6px; 
            border: none;
            width: 100%;
            margin-top: 0.75rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
            opacity: 0.9;
        }

        #connectBtn {
            background-color: var(--primary-color); /* Mor */
        }
        #oldVersionBtn {
            background-color: var(--secondary-color); /* Fuşya/Pembe */
        }
        /* Mobil Sürüm İle Bağlan Butonu: Koyu Yeşil */
        #mobileVersionBtn { 
            background-color: #10B981; 
        }