:root {
            --primary-color: #145c9c; /* Koyu Mavi (Logo Rengi) */
            --accent-color: #C9DFEB; /* Turkuaz (Aksiyon Rengi) */
            --text-color: #333;
            --light-bg: #c7d7e6;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--light-bg);
            color: var(--text-color);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        .container {
            background: white;
            padding: 40px 60px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            max-width: 90%;
        }
        .logo-container {
            margin-bottom: 50px;
        }
        #logo {
            max-width: 400px;
            width: 100%;
            height: auto;
            /* Logo PNG'nizdeki koyu mavi rengi kullandık, burası dinamik değil */
        }
        .slogan {
            font-size: 1.5em;
            color: var(--primary-color);
            margin-bottom: 25px;
            font-weight: 500;
        }
        .hashtag {
            font-size: 2.2em;
            color: var(--accent-color);
            font-weight: 700;
            margin-bottom: 40px;
            display: inline-block;
            padding: 5px 15px;
            border: 3px solid var(--accent-color);
            border-radius: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Geri Sayım Sayacı Stili */
        #countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
        }
        .time-box {
            background-color: var(--primary-color);
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            min-width: 80px;
        }
        .time-box span {
            display: block;
            font-size: 2.5em;
            font-weight: 700;
            line-height: 1.1;
        }
        .time-box small {
            font-size: 0.8em;
            opacity: 0.8;
            text-transform: uppercase;
        }

        /* E-posta Toplama Formu */
        .email-form input[type="email"] {
            padding: 12px;
            width: 300px;
            max-width: 100%;
            border: 2px solid var(--primary-color);
            border-radius: 6px 0 0 6px;
            font-size: 1em;
            outline: none;
        }
        .email-form button {
            padding: 12px 25px;
            background-color: var(--accent-color);
            color: var(--primary-color);
            border: none;
            cursor: pointer;
            border-radius: 0 6px 6px 0;
            font-size: 1em;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        .email-form button:hover {
            background-color: #33b5a9;
        }
        @media (max-width: 600px) {
            .container {
                padding: 30px 20px;
            }
            .time-box span {
                font-size: 1.8em;
            }
            .time-box {
                padding: 10px 15px;
                min-width: 60px;
            }
            .email-form input[type="email"], .email-form button {
                border-radius: 6px;
                margin-top: 10px;
                width: 100%;
            }
        }
		
		
/* Yeni Eklenen CSS */
        #interactive-logo-eyes {
            position: fixed; /* Sayfada sabit kalmasını sağlar */
            top: 50px;       /* Sayfanın üst kısmına yakın konumlandır */
            left: 50%;
            transform: translateX(-50%); /* Tam ortalamak için */
            width: 50px; /* İkonunuzun genişliğine göre ayarlayın */
            height: 50px; /* İkonunuzun yüksekliğine göre ayarlayın */
            background-image: url('laklaklook-ikon.png'); /* İkonunuzun yolu */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 1000;
            display: flex; /* Gözbebeklerini konumlandırmak için flex kullanıyoruz */
            justify-content: center;
            align-items: center;
            pointer-events: none; /* Fare etkileşimini engeller, alttaki elementlere tıklanabilir */
        }

        .animated-pupil {
            position: absolute;
            width: 14px; /* Gözbebeği boyutunu ayarlayın */
            height: 14px; /* Gözbebeği boyutunu ayarlayın */
            background-color: #ffffff; /* Koyu mavi gözbebeği */
            border-radius: 50%;
            transition: transform 0.1s linear; /* Yumuşak hareket */
            z-index: 1001; /* İkonun üstünde olmalı */
        }

        /* Bu değerler logonuzdaki gözbebeklerinin piksel koordinatlarına göre ayarlanmalıdır */
        /* Bu sadece bir tahmindir, görselinize göre ayarlamanız gerekebilir */
        .animated-pupil.left-eye {
            left: 77px; /* İkonun sol gözbebeğinin X koordinatı */
            top: 37px;  /* İkonun sol gözbebeğinin Y koordinatı */
        }

        .animated-pupil.right-eye {
            left: 116px; /* İkonun sağ gözbebeğinin X koordinatı */
            top: 37px;  /* İkonun sağ gözbebeğinin Y koordinatı */
        }

/* inc/style.css veya Tailwind yapısına eklenir */

@keyframes pulse-red {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.animate-pulse-red {
    /* Kalp ikonu için yanıp sönme efekti */
    animation: pulse-red 1.5s infinite;
}

.message-dot {
    /* Küçük kırmızı bildirim noktası */
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background-color: #ef4444; /* Tailwind red-500 */
    border-radius: 50%;
    border: 2px solid white;
}
.text-white-force {
    color: red !important;
}