:root {
    --navy-main: #1f305f;
    --navy-light: #5c6a8a;
    --bg-base: #f2f4f7;
    
    /* Daha parlak ve canlı geçişler */
    --grad-pink: linear-gradient(135deg, #fadd62, #ff7a79, #e47271);
    --grad-blue: linear-gradient(135deg, #74a4d6, #31c4f5, #1f305f);
    --grad-green: linear-gradient(135deg, #5cc69c, #21d58d);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    /* Canlı ve sürekli değişen inci beyazı/açık gri arka plan */
    background: linear-gradient(-45deg, #f2f4f7, #ffffff, #eaf0f6, #f7f9fa);
    background-size: 400% 400%;
    animation: bgPulse 12s ease infinite;
    
    color: var(--navy-main);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Brand Playbook Geometrisi (Canlandırılmış) --- */
.playbook-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}

/* Renkli Köşe Detayları (Süzülme animasyonlu ve daha parlak) */
.corner {
    position: absolute;
    opacity: 0.95;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    filter: saturate(1.2); /* Renkleri daha canlı yapar */
}

@keyframes floatCorner {
    0% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(-20px) rotate(48deg) scale(1.05); }
    100% { transform: translateY(0) rotate(45deg); }
}

.top-right {
    top: -15vh;
    right: -10vw;
    width: 35vw;
    height: 35vw;
    background: var(--grad-pink);
    border-radius: 20px;
    animation: floatCorner 8s ease-in-out infinite;
}

.bottom-left {
    bottom: -20vh;
    left: -15vw;
    width: 45vw;
    height: 45vw;
    background: var(--grad-blue);
    border-radius: 40px;
    animation: floatCorner 10s ease-in-out infinite reverse;
}

.bottom-right {
    bottom: -15vh;
    right: -5vw;
    width: 25vw;
    height: 25vw;
    background: var(--grad-green);
    border-radius: 20px;
    animation: floatCorner 7s ease-in-out infinite 1s;
}

/* Dinamik Hareket Eden Beyaz Elmas/Kareler */
.diamond {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 60px;
    backdrop-filter: blur(5px);
    box-shadow: 0 15px 40px rgba(255,255,255,0.8), inset 0 0 20px rgba(255,255,255,0.5);
}

@keyframes driftDiamond {
    0% { transform: rotate(45deg) translate(0, 0) scale(1); }
    50% { transform: rotate(45deg) translate(15px, -15px) scale(1.02); }
    100% { transform: rotate(45deg) translate(0, 0) scale(1); }
}

.d-1 {
    width: 60vw; height: 60vw; top: -15%; left: 15%;
    animation: driftDiamond 12s ease-in-out infinite;
}

.d-2 {
    width: 50vw; height: 50vw; top: 35%; left: 35%;
    animation: driftDiamond 15s ease-in-out infinite reverse;
}

.d-3 {
    width: 70vw; height: 70vw; top: 15%; left: -25%;
    animation: driftDiamond 14s ease-in-out infinite 2s;
}

.d-4 {
    width: 40vw; height: 40vw; bottom: 0%; right: 15%;
    animation: driftDiamond 10s ease-in-out infinite 1s;
}

/* --- Merkez İçerik --- */
.container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    animation: fadeUpContent 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.logo-wrapper {
    margin-bottom: 2rem;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease;
}

.logo-wrapper:hover {
    transform: scale(1.02);
}

.brand-logo {
    max-width: 450px;
    width: 100%;
    height: auto;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.headline {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
    /* Metne şık, enerjik bir renk geçişi (gradient) eklendi */
    background: linear-gradient(to right, var(--navy-main), #31c4f5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 4s linear infinite;
    background-size: 200% auto;
}

.description {
    font-size: 1.15rem;
    color: var(--navy-light);
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* --- Abonelik Formu (Canlı & Enerjik) --- */
.subscribe-wrapper {
    margin-top: 2.5rem;
    width: 100%;
    max-width: 480px;
}

.subscribe-text {
    font-size: 1rem;
    color: var(--navy-main);
    margin-bottom: 1rem;
    font-weight: 600;
}

.subscribe-form {
    display: flex;
    gap: 12px;
    margin-bottom: 0.5rem;
    width: 100%;
}

.subscribe-form input {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid transparent;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--navy-main);
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    box-shadow: 0 8px 25px rgba(31, 48, 95, 0.08);
}

.subscribe-form input:focus {
    border-color: #31c4f5;
    box-shadow: 0 10px 30px rgba(49, 196, 245, 0.2);
    transform: translateY(-2px);
}

.subscribe-form button {
    padding: 16px 28px;
    background-size: 200% auto;
    background-image: linear-gradient(to right, #31c4f5 0%, #1f305f 50%, #31c4f5 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 20px rgba(49, 196, 245, 0.4);
    /* Butonda enerjik parıldama efekti */
    animation: buttonShine 3s linear infinite;
}

.subscribe-form button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(49, 196, 245, 0.6);
}

.subscribe-form button:active {
    transform: translateY(1px);
}

.subscribe-form button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    animation: none;
    transform: none;
}

.form-message {
    font-size: 0.9rem;
    min-height: 20px;
    margin-top: 8px;
    font-weight: 600;
}

/* Animasyonlar */
@keyframes bgPulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fadeUpContent {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes textShine {
    to { background-position: 200% center; }
}

@keyframes buttonShine {
    to { background-position: 200% center; }
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .brand-logo { max-width: 320px; }
    .headline { font-size: 2rem; }
    .subscribe-form { flex-direction: column; }
    
    .top-right { width: 50vw; height: 50vw; top: -10vh; right: -20vw; }
    .bottom-left { width: 60vw; height: 60vw; bottom: -10vh; left: -30vw; }
    .bottom-right { width: 40vw; height: 40vw; bottom: -5vh; right: -15vw; }
}