/* ===================================================================
   Mobil Uygulama Landing Sayfaları — Özel Tasarımlar
   - Cartoonizer: AI/kreatif (canlı, renkli, gradient, koyu zemin)
   - Vena: duygusal/sıcak (soft pembe/mor tonları, aydınlık)
   Her biri kendi kök değişkeniyle, bağımsız.
   =================================================================== */

/* ============================== CARTOONIZER ============================== */
.app-landing {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* --- Cartoonizer: koyu, neon, kreatif AI --- */
.app-cartoonizer {
    --c-bg: #0B0B14;
    --c-bg2: #14101F;
    --c-text: #F0E8FF;
    --c-accent: #FF6B1A;
    --c-accent2: #C441FF;   /* mor */
    --c-accent3: #00E0FF;   /* cyan */
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
}
.app-cartoonizer::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(196,65,255,0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(255,107,26,0.18) 0%, transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(0,224,255,0.12) 0%, transparent 40%);
}
.app-cartoonizer::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 80%);
}
.app-cartoonizer > * { position: relative; z-index: 1; }

.cart-hero {
    min-height: 100vh; display: grid; place-items: center; text-align: center;
    padding: 120px 20px 60px;
}
.cart-hero h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(3rem, 9vw, 7rem); line-height: 0.95; letter-spacing: -0.03em;
    margin-bottom: 24px;
}
.cart-gradient {
    background: linear-gradient(120deg, var(--c-accent) 0%, var(--c-accent2) 50%, var(--c-accent3) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cart-emoji-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 22px; border-radius: 100px; font-weight: 600;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,107,26,0.4);
    margin-bottom: 32px; backdrop-filter: blur(10px);
}
.cart-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem); max-width: 640px; margin: 0 auto 40px;
    color: rgba(240,232,255,0.75);
}
.cart-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cart-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px; border-radius: 100px; font-weight: 600; font-size: 1.05rem;
    transition: transform 0.3s, box-shadow 0.3s;
}
.cart-btn-primary {
    background: linear-gradient(120deg, var(--c-accent), var(--c-accent2));
    color: #fff; box-shadow: 0 10px 40px rgba(196,65,255,0.4);
}
.cart-btn-primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 16px 50px rgba(196,65,255,0.6); }
.cart-btn-secondary {
    background: rgba(255,255,255,0.08); color: var(--c-text); border: 1px solid rgba(255,255,255,0.2);
}
.cart-btn-secondary:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14); color: var(--c-text); }

/* Cartoonizer feature kartları */
.cart-features {
    padding: 80px 20px; max-width: 1100px; margin: 0 auto;
}
.cart-features h2 {
    text-align: center; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 50px;
}
.cart-feature-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;
}
.cart-feature {
    padding: 32px 24px; border-radius: 18px; text-align: center;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.3s, border-color 0.3s;
}
.cart-feature:hover { transform: translateY(-6px); border-color: var(--c-accent); }
.cart-feature-icon {
    width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.8rem;
    background: linear-gradient(135deg, rgba(255,107,26,0.2), rgba(196,65,255,0.2));
    border: 1px solid rgba(255,107,26,0.3);
}
.cart-feature h3 { margin-bottom: 8px; }
.cart-feature p { color: rgba(240,232,255,0.65); font-size: 0.92rem; }

/* Store butonları */
.cart-store { text-align: center; padding: 60px 20px 100px; }
.cart-store h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 30px; }

/* ============================== VENA ============================== */
/* Duygusal, sıcak, soft tonlar — aydınlık */
.app-vena {
    --v-bg: #FFF5F2;
    --v-bg2: #FFFFFF;
    --v-text: #3D2B2E;
    --v-soft: #8A6D72;
    --v-accent: #E8431A;
    --v-accent2: #FF7A92;   /* soft pembe */
    --v-accent3: #B76E79;   /* gül kurusu */
    background: var(--v-bg);
    color: var(--v-text);
    font-family: var(--font-sans);
}
.app-vena::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 15% 25%, rgba(255,122,146,0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(232,67,26,0.10) 0%, transparent 45%),
        radial-gradient(circle at 50% 95%, rgba(183,110,121,0.12) 0%, transparent 45%);
}
.app-vena > * { position: relative; z-index: 1; }

.vena-hero {
    min-height: 100vh; display: grid; place-items: center; text-align: center;
    padding: 120px 20px 60px;
}
.vena-hero h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(3rem, 8vw, 6rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 24px;
}
.vena-gradient {
    background: linear-gradient(120deg, var(--v-accent) 0%, var(--v-accent2) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vena-subtitle {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem); max-width: 620px; margin: 0 auto 40px;
    color: var(--v-soft); line-height: 1.7;
}
.vena-emoji-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 22px; border-radius: 100px; font-weight: 600;
    background: rgba(255,122,146,0.15); border: 1px solid rgba(232,67,26,0.3);
    color: var(--v-accent); margin-bottom: 32px;
}
.vena-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.vena-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px; border-radius: 100px; font-weight: 600; font-size: 1.05rem;
    transition: transform 0.3s, box-shadow 0.3s;
}
.vena-btn-primary {
    background: linear-gradient(120deg, var(--v-accent), var(--v-accent2));
    color: #fff; box-shadow: 0 10px 40px rgba(255,122,146,0.4);
}
.vena-btn-primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 16px 50px rgba(255,122,146,0.6); }
.vena-btn-secondary {
    background: #fff; color: var(--v-text); border: 1px solid rgba(61,43,46,0.12);
    box-shadow: 0 4px 20px rgba(61,43,46,0.06);
}
.vena-btn-secondary:hover { transform: translateY(-3px); color: var(--v-accent); border-color: var(--v-accent); }

.vena-features { padding: 80px 20px; max-width: 1100px; margin: 0 auto; }
.vena-features h2 { text-align: center; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 16px; }
.vena-features > p { text-align: center; color: var(--v-soft); margin-bottom: 50px; }
.vena-feature-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;
}
.vena-feature {
    padding: 36px 28px; border-radius: 22px; text-align: center;
    background: var(--v-bg2); box-shadow: 0 8px 30px rgba(61,43,46,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}
.vena-feature:hover { transform: translateY(-6px); box-shadow: 0 16px 50px rgba(255,122,146,0.15); }
.vena-feature-icon {
    width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 20px;
    display: grid; place-items: center; font-size: 2rem;
    background: linear-gradient(135deg, rgba(255,122,146,0.2), rgba(232,67,26,0.12));
}
.vena-feature h3 { margin-bottom: 8px; }
.vena-feature p { color: var(--v-soft); font-size: 0.92rem; }

.vena-quote {
    text-align: center; padding: 80px 20px; max-width: 800px; margin: 0 auto;
}
.vena-quote blockquote {
    font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    line-height: 1.4; font-style: italic; margin-bottom: 16px;
    background: linear-gradient(120deg, var(--v-accent), var(--v-accent3));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vena-quote cite { color: var(--v-soft); font-size: 1rem; }

.vena-store { text-align: center; padding: 40px 20px 100px; }
.vena-store h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 30px; }

/* Landing'lerde geri dönüş linki */
.app-back {
    position: fixed; top: 20px; left: 20px; z-index: 50;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 100px; font-size: 0.88rem; font-weight: 500;
    background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12); transition: all 0.3s;
}
.app-cartoonizer .app-back { color: var(--c-text); }
.app-vena .app-back { background: rgba(255,255,255,0.7); color: var(--v-text); border-color: rgba(61,43,46,0.1); }
.app-back:hover { transform: translateX(-3px); }

@media (max-width: 600px) {
    .cart-hero h1, .vena-hero h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
    .cart-actions, .vena-actions { flex-direction: column; align-items: stretch; }
}