@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&display=swap');

/* Reset ve Genel */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #fff;
    background-color: #001f3f; /* Koyu lacivert */
}

img {
    border-radius: 28px;
}

header {
    background-color: #000; /* Siyah */
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    background: linear-gradient(120deg, #fff4a3 0%, #ffe25a 35%, #ffcf33 60%, #fff0a6 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.18);
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 2rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #FFD700;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

footer {
    background-color: #000;
    text-align: center;
    padding: 1rem;
    color: #fff;
}

/* Hero */
.hero {
    position: relative;
    isolation: isolate;
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #001f3f, #003366);
    border-radius: 10px;
    border: 1px solid rgba(255, 230, 0, 0.2);
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 239, 120, 0.08), 0 0 24px rgba(255, 214, 0, 0.08);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    pointer-events: none;
}

.hero::before {
    padding: 2px;
    background: conic-gradient(
        from 0deg,
        rgba(255, 238, 0, 0.08) 0deg,
        rgba(255, 244, 110, 0.92) 80deg,
        rgba(255, 214, 0, 0.25) 165deg,
        rgba(255, 247, 153, 0.95) 250deg,
        rgba(255, 222, 0, 0.18) 320deg,
        rgba(255, 238, 0, 0.08) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    box-shadow: 0 0 16px rgba(255, 234, 0, 0.72), 0 0 30px rgba(255, 210, 0, 0.42), 0 0 50px rgba(255, 196, 0, 0.22);
    animation: heroNeonGlow 1.9s ease-in-out infinite;
}

.hero::after {
    inset: -22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(255, 242, 73, 0.34), transparent 34%),
        radial-gradient(circle at top right, rgba(255, 221, 0, 0.28), transparent 36%),
        radial-gradient(circle at bottom left, rgba(255, 234, 48, 0.24), transparent 34%),
        radial-gradient(circle at bottom right, rgba(255, 208, 0, 0.22), transparent 36%);
    filter: blur(14px);
    opacity: 0.95;
    z-index: -1;
}

.hero.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(120deg, #fff59d 0%, #fff200 28%, #ffe600 52%, #ffd400 78%, #fff59d 100%);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 8px rgba(255, 242, 0, 0.65), 0 0 20px rgba(255, 222, 0, 0.4);
    animation: neonTitleShift 4.8s ease-in-out infinite, neonTitlePulse 2.2s ease-in-out infinite;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.cta-button {
    background: linear-gradient(120deg, #fff59d 0%, #ffe600 40%, #ffd000 75%, #fff59d 100%);
    background-size: 220% 220%;
    color: #001f3f;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(255, 224, 0, 0), 0 10px 22px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
    animation: neonButtonShift 3.8s ease-in-out infinite, neonButtonGlow 1.9s ease-in-out infinite;
}

.cta-button:hover {
    transform: scale(1.05) translateY(-1px);
}

/* Services */
.services {
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
}

.services.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.services h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #FFD700;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.service-item {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 10px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    min-height: 420px;
    transition: transform 0.3s;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
}

.service-item img {
    width: 100%;
    height: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: 28px;
}

.service-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0.8rem 1rem;
}

.service-item h3 {
    margin-bottom: 0.5rem;
    color: #FFD700;
}

@keyframes neonTitleShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes neonTitlePulse {
    0%,
    100% {
        text-shadow: 0 0 8px rgba(255, 242, 0, 0.65), 0 0 20px rgba(255, 222, 0, 0.4);
    }
    50% {
        text-shadow: 0 0 12px rgba(255, 247, 128, 0.95), 0 0 28px rgba(255, 221, 0, 0.7);
    }
}

@keyframes heroNeonGlow {
    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 234, 0, 0.48), 0 0 22px rgba(255, 210, 0, 0.28), 0 0 38px rgba(255, 196, 0, 0.16);
    }
    50% {
        box-shadow: 0 0 18px rgba(255, 239, 80, 0.92), 0 0 38px rgba(255, 218, 0, 0.58), 0 0 64px rgba(255, 196, 0, 0.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero h1 {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .logo {
        font-size: 1.4rem;
    }

    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    nav ul {
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #000;
        display: none;
    }
    nav ul.show {
        display: flex;
    }
    nav ul li {
        margin: 1rem 0;
    }
    .service-item {
        min-height: 360px;
    }
    .cta-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        padding: 0;
        font-size: 0;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23001f3f"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/></svg>');
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.whatsapp-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    background: linear-gradient(120deg, #fff59d 0%, #ffe600 40%, #ffd000 75%, #fff59d 100%);
    background-size: 220% 220%;
    color: #001f3f;
    border: none;
    padding: 0.9rem 1.2rem;
    border-radius: 35px;
    font-weight: bold;
    box-shadow: 0 0 0 rgba(255, 224, 0, 0), 0 8px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.25s ease;
    animation: neonButtonShift 3.8s ease-in-out infinite, neonButtonGlow 1.9s ease-in-out infinite;
}

.whatsapp-fixed:hover {
    transform: translateY(-3px);
}

@keyframes neonButtonShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes neonButtonGlow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(255, 224, 0, 0), 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 18px rgba(255, 234, 0, 0.7), 0 0 34px rgba(255, 222, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.34);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-button,
    .whatsapp-fixed {
        animation: none;
    }
}