body {
    font-family: 'Poppins', sans-serif;
}

.nav-link {
    @apply text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200 relative;
}

.nav-link.aktif {
    @apply text-blue-600;
}

.nav-link.aktif::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-0.5 bg-blue-600;
}

.nav-link-mobile {
    @apply text-gray-700 hover:text-blue-600 font-medium transition-colors duration-200 py-2 border-b border-gray-200;
}

.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.kart-hover {
    @apply transform hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl;
}

.buton-birincil {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-full transition-colors duration-200;
}

.buton-ikincil {
    @apply bg-white hover:bg-gray-50 text-blue-600 font-medium py-3 px-6 rounded-full border-2 border-blue-600 transition-colors duration-200;
}

.haber-kart {
    @apply bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden;
}

.haber-kart-resim {
    @apply w-full h-48 object-cover;
}

.haber-kart-icerik {
    @apply p-6;
}

.haber-kart-baslik {
    @apply text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-200 line-clamp-2;
}

.haber-kart-ozet {
    @apply text-gray-600 mt-2 line-clamp-3;
}

.haber-kart-tarih {
    @apply text-sm text-gray-500 mt-4;
}

.dj-kart {
    @apply bg-white rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden transform hover:scale-105;
}

.dj-kart-resim {
    @apply w-full h-64 object-cover;
}

.dj-kart-icerik {
    @apply p-6 text-center;
}

.dj-kart-isim {
    @apply text-xl font-semibold text-gray-800;
}

.dj-kart-program {
    @apply text-blue-600 font-medium mt-1;
}

.dj-kart-saat {
    @apply text-sm text-gray-500 mt-2;
}

.form-grup {
    @apply mb-6;
}

.form-etiket {
    @apply block text-gray-700 font-medium mb-2;
}

.form-girdi {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200;
}

.form-girdi:focus {
    @apply outline-none;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 resize-vertical min-h-32;
}

.sosyal-medya-link {
    @apply w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full flex items-center justify-center transition-colors duration-200;
}

.footer-link {
    @apply text-gray-300 hover:text-white transition-colors duration-200;
}

.radyo-player {
    @apply bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl p-8 text-white shadow-2xl;
}

.radyo-player-buton {
    @apply w-20 h-20 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full flex items-center justify-center text-3xl transition-all duration-300 transform hover:scale-110;
}

.program-kart {
    @apply bg-white rounded-lg shadow-md p-4 border-l-4 border-blue-500;
}

.sarki-gecmisi-item {
    @apply bg-white rounded-lg shadow-sm p-4 border-l-4 border-green-500 hover:shadow-md transition-shadow duration-200;
}

.istatistik-kart {
    @apply bg-white rounded-2xl shadow-lg p-6 text-center;
}

.istatistik-sayi {
    @apply text-3xl font-bold text-blue-600;
}

.istatistik-baslik {
    @apply text-gray-700 font-medium mt-2;
}

.breadcrumb {
    @apply bg-gray-100 py-4;
}

.breadcrumb-liste {
    @apply flex items-center space-x-2 text-sm text-gray-600;
}

.breadcrumb-link {
    @apply hover:text-blue-600 transition-colors duration-200;
}

.breadcrumb-ayirici {
    @apply text-gray-400;
}

.paylas-butonlari {
    @apply flex space-x-3 mt-6;
}

.paylas-buton {
    @apply px-4 py-2 rounded-lg text-white font-medium transition-colors duration-200;
}

.paylas-facebook {
    @apply bg-blue-600 hover:bg-blue-700;
}

.paylas-twitter {
    @apply bg-blue-400 hover:bg-blue-500;
}

.paylas-whatsapp {
    @apply bg-green-600 hover:bg-green-700;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@media (max-width: 768px) {
    .hero-gradient {
        padding: 3rem 1rem;
    }
    
    .dj-kart-resim {
        height: 200px;
    }
    
    .radyo-player {
        padding: 1.5rem;
    }
    
    .radyo-player-buton {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}