/* --- STRATEJİ BÖLÜMÜ GENEL --- */
.strategy-section {
    background-color: #12171C;
    padding: 180px 20px 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* --- ARKADAKİ YEŞİL IŞIK (GLOW) --- */
.bottom-reverse-glow {
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 400px;
    background: radial-gradient(ellipse at center top, rgba(200, 255, 26, 0.6) 0%, rgba(200, 255, 26, 0.2) 50%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
    animation: breath-effect 5s infinite ease-in-out;
}
@keyframes breath-effect { 0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } }

/* --- IZGARA (GRID) EFEKTİ --- */
.strategy-grid-container { position: relative; display: inline-block; max-width: 900px; margin: 0 auto; padding: 40px; }
.grids-mask-layer { position: absolute; inset: 0; z-index: -1; mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); }
.grid-base-layer { position: absolute; inset: 0; background-image: linear-gradient(rgba(200, 255, 26, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 255, 26, 0.05) 1px, transparent 1px); background-size: 50px 50px; }
.grid-highlight-layer { position: absolute; inset: 0; background-image: linear-gradient(rgba(200, 255, 26, 0.3) 2px, transparent 2px), linear-gradient(90deg, rgba(200, 255, 26, 0.3) 2px, transparent 2px); background-size: 50px 50px; mask-image: linear-gradient(110deg, transparent 30%, black 50%, transparent 70%); -webkit-mask-image: linear-gradient(110deg, transparent 30%, black 50%, transparent 70%); mask-size: 200% 100%; -webkit-mask-size: 200% 100%; animation: grid-thick-scan 5s infinite linear; }
@keyframes grid-thick-scan { 0% { -webkit-mask-position: 200% 0; mask-position: 200% 0; } 100% { -webkit-mask-position: -200% 0; mask-position: -200% 0; } }

/* --- BAŞLIK ALANI --- */
.strategy-header { margin-bottom: 60px; position: relative; z-index: 5; }
.strategy-badge-wrapper { display: inline-block; margin-bottom: 25px; }

.hero-badge-container {
    position: relative; display: inline-flex; align-items: center;
    padding: 1px; border-radius: 50px; overflow: hidden;
    background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(200, 255, 26, 0.1);
}
.hero-badge-border {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, transparent 90deg, #C8FF1A 180deg, transparent 270deg, transparent 360deg);
    animation: rotate-badge 3s linear infinite; z-index: 0;
}
@keyframes rotate-badge { 100% { transform: rotate(360deg); } }

.hero-badge-inner {
    position: relative; background-color: #0e1215; border-radius: 50px;
    padding: 8px 24px; z-index: 1; display: flex; align-items: center; gap: 10px;
}
.hero-badge-content span {
    background: linear-gradient(90deg, #fff, #C8FF1A); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 600; font-size: 13px; letter-spacing: 0.5px;
}
.star-particle { position: absolute; background: #C8FF1A; border-radius: 50%; animation: twinkle 3s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.strategy-header h2 {
    font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; line-height: 1.1;
    background: linear-gradient(180deg, #FFFFFF 0%, #9CA3AF 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.strategy-header p { color: #9CA3AF; max-width: 600px; margin: 0 auto; line-height: 1.7; font-size: 1.1rem; }

/* --- KARTLAR GRID --- */
.cards-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;
    max-width: 1250px; margin: 0 auto; position: relative; z-index: 2;
}

/* --- KART GENEL STİLİ --- */
.strategy-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px; padding: 30px; text-align: left;
    position: relative; overflow: hidden;
    transition: transform 0.3s ease;
}

/* Mouse Işığı */
.strategy-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%);
    opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 2;
}
.strategy-card::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(200, 255, 26, 0.15), transparent 40%);
    opacity: 0; transition: opacity 0.5s; z-index: 1; pointer-events: none;
}
.strategy-card:hover::before, .strategy-card:hover::after { opacity: 1; }

.strategy-card h4 { color: #fff; font-size: 20px; margin-bottom: 12px; position: relative; z-index: 5; margin-top: 20px; }
.strategy-card p { color: #9CA3AF; font-size: 14px; line-height: 1.6; position: relative; z-index: 5; }

/* --- 1. KART: WEB TASARIM --- */
.strategy-card .card-visual-web { position: relative; width: 100%; height: 180px; background: #1e2329; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: center; align-items: center; }
.builder-ui { width: 90%; height: 120px; background: #2a3038; border-radius: 8px; display: flex; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden; position: relative; }
.builder-sidebar { width: 25%; background: #363e48; border-right: 1px solid rgba(255,255,255,0.1); padding: 10px 5px; display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 2; }
.sidebar-widget { width: 80%; height: 15px; background: rgba(255,255,255,0.1); border-radius: 3px; }
.sidebar-widget.target { background: rgba(200, 255, 26, 0.2); border: 1px dashed rgba(200, 255, 26, 0.5); }
.builder-canvas { flex: 1; padding: 15px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.canvas-block { width: 100%; height: 20px; background: rgba(255,255,255,0.05); border-radius: 4px; }
.block-short { width: 60%; }
.dropped-block { width: 0; height: 0; background: #C8FF1A; border-radius: 4px; box-shadow: 0 0 15px rgba(200, 255, 26, 0.4); opacity: 0; margin-top: 5px; animation: block-appear 4s infinite ease-in-out; }
.ghost-widget { position: absolute; width: 40px; height: 15px; background: #C8FF1A; border-radius: 3px; opacity: 0; pointer-events: none; z-index: 10; animation: drag-motion 4s infinite ease-in-out; }
.builder-cursor { position: absolute; font-size: 18px; color: #fff; z-index: 20; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5)); animation: cursor-motion 4s infinite ease-in-out; }
@keyframes cursor-motion { 0% { top: 30%; left: 12%; transform: scale(1); } 15% { top: 30%; left: 12%; transform: scale(0.8); } 40% { top: 50%; left: 60%; transform: scale(0.8); } 50% { top: 50%; left: 60%; transform: scale(1); } 80% { opacity: 1; } 100% { top: 30%; left: 12%; opacity: 0; } }
@keyframes drag-motion { 0%, 10% { opacity: 0; } 15% { top: 30%; left: 12%; opacity: 1; width: 25px; } 40% { top: 50%; left: 60%; opacity: 1; width: 80px; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes block-appear { 0%, 45% { width: 40%; height: 0; opacity: 0; } 50% { height: 25px; opacity: 1; margin-bottom: 10px; transform: scale(1.1); } 60% { transform: scale(1); } 90% { opacity: 1; } 100% { opacity: 0; } }

/* --- 2. KART: GOOGLE ADS (DÜZELTİLDİ) --- */
.strategy-card .card-visual-ads { position: relative; width: 100%; height: 180px; background: #151a20; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: flex-end; }
.ads-brand-badge { position: absolute; top: 15px; left: 15px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(200, 255, 26, 0.2); padding: 6px 12px; border-radius: 50px; display: flex; align-items: center; gap: 8px; z-index: 5; backdrop-filter: blur(5px); }
.ads-neon-icon { font-size: 14px; color: #C8FF1A; } .ads-brand-text { font-size: 11px; color: #fff; font-weight: 700; text-transform: uppercase; }
.ads-graph-svg { width: 100%; height: 85%; display: block; overflow: visible; }
.ads-graph-path { fill: none; stroke: #C8FF1A; stroke-width: 3px; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(200, 255, 26, 0.8)); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-ads 12s linear infinite; }
.ads-graph-area { fill: url(#brandGreenGradient); opacity: 0.3; animation: fade-ads 12s linear infinite; }

/* POP-UP DÜZELTMESİ BURADA */
.ads-popup-neon {
    position: absolute; left: 220px; top: 70px; transform: translate(-50%, -135%);
    background: rgba(18, 23, 28, 0.98); border: 1px solid #C8FF1A;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6); padding: 8px 12px; border-radius: 6px;
    display: flex; flex-direction: column; opacity: 0; z-index: 10;
    white-space: nowrap; /* YAZI KAYMASINI ENGELLER */
    min-width: 110px; /* GENİŞLİK GARANTİSİ */
    animation: popup-show 12s linear infinite;
}
.ads-popup-neon::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0; border-style: solid; border-color: #C8FF1A transparent transparent transparent; }
.popup-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } 
.popup-label { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
.popup-number { font-size: 14px; color: #fff; font-weight: 800; display: flex; align-items: center; gap: 5px; }
.popup-percent { color: #C8FF1A; font-size: 12px; }
.neon-dot { width: 6px; height: 6px; background: #C8FF1A; border-radius: 50%; animation: blink 1s infinite; } 
.vertex-dot { fill: #151a20; stroke: #C8FF1A; stroke-width: 2px; opacity: 0; animation: tip-dot 12s linear infinite; }

@keyframes blink { 50% { opacity: 0.4; } } @keyframes draw-ads { 0% { stroke-dashoffset: 1000; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes fade-ads { 0% { opacity: 0; } 20% { opacity: 0; } 60% { opacity: 0.3; } 100% { opacity: 0.3; } } @keyframes popup-show { 0%, 45% { opacity: 0; transform: translate(-50%, -100%) scale(0.8); } 50%, 90% { opacity: 1; transform: translate(-50%, -135%) scale(1); } 100% { opacity: 0; } } @keyframes tip-dot { 0%, 45% { opacity: 0; r: 0; } 50%, 90% { opacity: 1; r: 5; } 100% { opacity: 0; r: 0; } }

/* --- 3. KART: META ORBIT --- */
.strategy-card .card-visual-system { position: relative; width: 100%; height: 180px; background: #151a20; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; }
.sys-core { position: absolute; z-index: 20; width: 44px; height: 44px; background: #1e2329; border: 1px solid rgba(200, 255, 26, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; box-shadow: 0 0 20px rgba(200, 255, 26, 0.2); animation: sys-pulse 3s infinite ease-in-out; }
@keyframes sys-pulse { 50% { box-shadow: 0 0 35px rgba(200, 255, 26, 0.6); } }
.sys-ring { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.08); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ring-1 { width: 100px; height: 100px; animation: rotate-ring 20s linear infinite; } .ring-2 { width: 160px; height: 160px; animation: rotate-ring-rev 25s linear infinite; }
@keyframes rotate-ring { 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotate-ring-rev { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }
.sys-orbit-arm { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 10; }
.arm-1 { animation: spin-cw 6s linear infinite; } .arm-2 { animation: spin-ccw 8s linear infinite; } .arm-3 { animation: spin-cw 10s linear infinite; }
@keyframes spin-cw { 100% { transform: rotate(360deg); } } @keyframes spin-ccw { 100% { transform: rotate(-360deg); } }
.sys-user { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #1e2329; border: 1px solid #555; color: #555; display: flex; align-items: center; justify-content: center; animation: capture-slide 8s infinite ease-in-out; }
.u-1 { animation-delay: 0s; } .u-2 { animation-name: capture-slide-far; animation-delay: -2s; } .u-3 { animation-delay: -4s; }
.sys-bubble { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background: #C8FF1A; color: #151a20; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; opacity: 0; white-space: nowrap; animation: bubble-show 8s infinite ease-in-out; }
.b-1 { animation-delay: 0s; } .b-2 { animation-delay: -2s; } .b-3 { animation-delay: -4s; }
.sys-user i.main-icon { animation: keep-upright 6s linear infinite; } .arm-2 .sys-user i.main-icon { animation-duration: 8s; animation-direction: reverse; } .arm-3 .sys-user i.main-icon { animation-duration: 10s; }
@keyframes keep-upright { 100% { transform: rotate(-360deg); } }
@keyframes capture-slide { 0% { transform: translateX(120px) scale(0.5); opacity: 0; } 20%, 80% { transform: translateX(50px) scale(1); border-color: #C8FF1A; color: #C8FF1A; opacity: 1; } 90%, 100% { transform: translateX(120px) scale(0); opacity: 0; } }
@keyframes capture-slide-far { 0% { transform: translateX(120px) scale(0.5); opacity: 0; } 20%, 80% { transform: translateX(80px) scale(1); border-color: #C8FF1A; color: #C8FF1A; opacity: 1; } 90%, 100% { transform: translateX(120px) scale(0); opacity: 0; } }
@keyframes bubble-show { 0%, 19% { opacity: 0; transform: translateX(-50%) scale(0); } 20%, 80% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; } }

/* --- 4. KART: SEO --- */
.strategy-card .card-visual-seo { position: relative; width: 100%; height: 180px; background: #151a20; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; padding: 15px; gap: 15px; }
.seo-search-bar-container { width: 100%; height: 35px; background: #1e2329; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; padding: 0 15px; gap: 10px; }
.search-icon-seo { color: #555; font-size: 14px; }
.typing-text { font-size: 12px; color: #9CA3AF; white-space: nowrap; overflow: hidden; border-right: 2px solid #C8FF1A; width: 0; animation: typing-search 4s steps(20, end) infinite; }
@keyframes typing-search { 0%, 100% { width: 0; } 40%, 80% { width: 120px; } }
.seo-results-list { flex: 1; position: relative; display: flex; flex-direction: column; gap: 10px; opacity: 0; animation: results-fade-in 12s infinite; }
@keyframes results-fade-in { 0%, 10% { opacity: 0; } 15%, 90% { opacity: 1; } 100% { opacity: 0; } }
.seo-result-item { position: absolute; width: 100%; height: 30px; background: #1e2329; border-radius: 6px; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; gap: 5px; transition: 0.8s; }
.res-line-title { width: 40%; height: 6px; background: #333; border-radius: 2px; } .res-line-desc { width: 80%; height: 4px; background: #2a3038; border-radius: 2px; }
.comp-1 { top: 0px; animation: comp-1-drop 12s infinite; } .comp-2 { top: 40px; animation: comp-2-drop 12s infinite; } .comp-3 { top: 120px; opacity: 0.5; }
.hero-result { top: 80px; background: rgba(200, 255, 26, 0.05); border: 1px solid rgba(200, 255, 26, 0.1); z-index: 10; animation: hero-climb 12s infinite; }
.hero-result .res-line-title { background: #C8FF1A; opacity: 0.6; } .hero-result .res-line-desc { background: #C8FF1A; opacity: 0.3; }
.rank-one-badge-seo { position: absolute; right: 10px; background: #C8FF1A; color: #151a20; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 4px; opacity: 0; transform: scale(0); animation: badge-pop 12s infinite; }
@keyframes comp-1-drop { 0%, 30% { top: 0px; } 40%, 100% { top: 40px; } }
@keyframes comp-2-drop { 0%, 30% { top: 40px; } 40%, 100% { top: 80px; } }
@keyframes hero-climb { 0%, 25% { top: 80px; } 40%, 80% { top: 0px; background: rgba(200,255,26,0.2); } 100% { top: 80px; } }
@keyframes badge-pop { 0%, 38% { opacity: 0; transform: scale(0); } 42%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* --- 5. KART: E-TİCARET (DÜZELTİLDİ) --- */
.strategy-card .card-visual-ecommerce { position: relative; width: 100%; height: 180px; background: #151a20; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; }
.e-device-screen { width: 100%; height: 100%; position: relative; }
.e-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 20px; transition: 0.5s; background: #151a20; }
.scene-home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: center; animation: slide-seq-1 16s infinite; }
.home-prod-item { background: #1e2329; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.05); }
.hp-img { width: 100%; height: 40px; background: rgba(255,255,255,0.05); border-radius: 4px; color: #777; display: flex; justify-content: center; align-items: center; }
.hp-line { width: 60%; height: 4px; background: #333; } 
/* Fiyatların tek satırda kalması için */
.hp-price { font-size: 11px; color: #C8FF1A; font-weight: 700; white-space: nowrap; }
.target-prod { border-color: rgba(200, 255, 26, 0.4); box-shadow: 0 0 10px rgba(200, 255, 26, 0.1); animation: prod-click 16s infinite; }
.scene-product { transform: translateX(100%); animation: slide-seq-2 16s infinite; justify-content: center; }
.product-detail-wrapper { display: flex; gap: 20px; align-items: center; width: 100%; justify-content: center; }
.prod-img-big { width: 90px; height: 90px; background: #1e2329; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 40px; color: #eee; }
.prod-info-col { display: flex; flex-direction: column; gap: 8px; flex: 1; max-width: 140px; }
.prod-title { width: 100%; height: 6px; background: #555; } 
.prod-price-big { color: #C8FF1A; font-weight: 700; font-size: 18px; white-space: nowrap; }
.btn-add-cart { width: 100%; height: 32px; background: #C8FF1A; color: #151a20; font-weight: 800; font-size: 12px; border-radius: 6px; display: flex; justify-content: center; align-items: center; white-space: nowrap; animation: btn-press-cart 16s infinite; }
.scene-checkout { transform: translateX(100%); animation: slide-seq-3 16s infinite; justify-content: center; }
.checkout-wrapper { width: 80%; display: flex; flex-direction: column; gap: 15px; }
.checkout-title { font-size: 12px; color: #aaa; text-transform: uppercase; }
.cc-mock { width: 100%; height: 85px; background: linear-gradient(135deg, #2a3038, #151a20); border-radius: 10px; padding: 15px; border: 1px solid rgba(255,255,255,0.1); }
.cc-chip { width: 24px; height: 18px; background: linear-gradient(45deg, #C8FF1A, #aaff00); border-radius: 4px; margin-bottom: 12px; }
.cc-num { width: 100%; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; }
.btn-pay { width: 100%; height: 32px; background: #fff; color: #000; font-weight: 800; font-size: 12px; border-radius: 6px; display: flex; justify-content: center; align-items: center; white-space: nowrap; animation: btn-press-pay 16s infinite; }
.scene-success { transform: translateX(100%); background: rgba(200, 255, 26, 0.05); animation: slide-seq-4 16s infinite; justify-content: center; }
.success-icon { font-size: 55px; color: #C8FF1A; margin-bottom: 15px; } .success-text { color: #fff; font-weight: 700; text-align: center; }
.e-cursor { position: absolute; font-size: 24px; color: #fff; z-index: 50; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5)); animation: cursor-journey-full 16s infinite; top: 110%; left: 110%; }
@keyframes slide-seq-1 { 0%, 20% { transform: translateX(0); opacity: 1; } 25%, 95% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes slide-seq-2 { 0%, 20% { transform: translateX(100%); opacity: 0; } 25%, 45% { transform: translateX(0); opacity: 1; } 50%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes slide-seq-3 { 0%, 45% { transform: translateX(100%); opacity: 0; } 50%, 70% { transform: translateX(0); opacity: 1; } 75%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes slide-seq-4 { 0%, 70% { transform: translateX(100%); opacity: 0; } 75%, 95% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes cursor-journey-full { 0% { top: 110%; left: 100%; opacity: 0; } 5% { opacity: 1; top: 60%; left: 15%; transform: scale(1); } 10% { transform: scale(0.8); } 15% { opacity: 0; } 30% { opacity: 0; top: 110%; left: 100%; } 35% { opacity: 1; top: 65%; left: 75%; transform: scale(1); } 38% { transform: scale(0.8); } 42% { opacity: 0; } 55% { opacity: 0; top: 110%; left: 100%; } 60% { opacity: 1; top: 75%; left: 50%; transform: translate(-50%,0); } 63% { transform: translate(-50%,0) scale(0.8); } 67% { opacity: 0; } }
@keyframes prod-click { 10% { transform: scale(0.95); } 12% { transform: scale(1); } }
@keyframes btn-press-cart { 38% { transform: scale(0.95); } 40% { transform: scale(1); } }
@keyframes btn-press-pay { 63% { transform: scale(0.95); } 65% { transform: scale(1); } }

/* --- 6. KART: SOSYAL MEDYA --- */
.strategy-card .card-visual-social { position: relative; width: 100%; height: 180px; background: #151a20; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.social-grid-bg { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(#333 1px, transparent 1px); background-size: 20px 20px; opacity: 0.2; z-index: 0; }
.platforms-container { position: absolute; top: 20px; width: 100%; display: flex; justify-content: center; gap: 25px; z-index: 10; }
.s-app-icon { width: 34px; height: 34px; background: #1e2329; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #777; font-size: 16px; position: relative; animation: app-active-cycle 8s infinite; }
.app-fb { animation-delay: 2s; } .app-ig { animation-delay: 2.5s; } .app-yt { animation-delay: 3s; } .app-pin { animation-delay: 3.5s; }
.notif-badge { position: absolute; top: -5px; right: -5px; background: #FF4081; color: #fff; font-size: 9px; font-weight: bold; width: 14px; height: 14px; border-radius: 50%; display: flex; justify-content: center; align-items: center; opacity: 0; transform: scale(0); animation: notif-pop 8s infinite; }
.app-fb .notif-badge { animation-delay: 2.2s; } .app-ig .notif-badge { animation-delay: 2.7s; } .app-yt .notif-badge { animation-delay: 3.2s; } .app-pin .notif-badge { animation-delay: 3.7s; }
.social-dashboard { margin-top: 40px; width: 160px; height: 90px; background: #1e2329; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.content-type-icon { font-size: 24px; color: #555; margin-bottom: 5px; }
.upload-status-text { font-size: 9px; color: #999; text-transform: uppercase; margin-bottom: 8px; animation: text-swap 8s infinite; }
.live-counter-box { background: rgba(200, 255, 26, 0.1); border: 1px solid rgba(200, 255, 26, 0.3); padding: 4px 12px; border-radius: 4px; display: flex; align-items: center; gap: 6px; }
.counter-number::after { content: "12.4K"; font-size: 12px; color: #fff; font-weight: 800; animation: count-up 8s infinite steps(1); }
.signal-line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 40px; z-index: 1; }
.signal-beam { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #C8FF1A; opacity: 0; animation: shoot-signal 8s infinite; }
.sig-1 { transform: translate(-50%, -100%) rotate(-45deg); height: 60px; } .sig-1 .signal-beam { animation-delay: 1.8s; }
.sig-2 { transform: translate(-50%, -100%) rotate(-15deg); height: 60px; } .sig-2 .signal-beam { animation-delay: 2.3s; }
.sig-3 { transform: translate(-50%, -100%) rotate(15deg); height: 60px; } .sig-3 .signal-beam { animation-delay: 2.8s; }
.sig-4 { transform: translate(-50%, -100%) rotate(45deg); height: 60px; } .sig-4 .signal-beam { animation-delay: 3.3s; }

@keyframes app-active-cycle { 0%, 20%, 100% { border-color: rgba(255,255,255,0.1); color: #777; transform: scale(1); } 10% { border-color: #C8FF1A; color: #C8FF1A; transform: scale(1.1); box-shadow: 0 0 10px rgba(200, 255, 26, 0.3); } }
@keyframes notif-pop { 0%, 40%, 100% { opacity: 0; transform: scale(0); } 10%, 30% { opacity: 1; transform: scale(1); } }
@keyframes count-up { 0%, 25%, 100% { content: "12.4K"; } 30% { content: "12.5K"; color: #C8FF1A; } 45%, 80% { content: "13.1K"; color: #C8FF1A; text-shadow: 0 0 10px #C8FF1A; } }
@keyframes shoot-signal { 0% { bottom: 0; opacity: 1; height: 0; } 50% { bottom: 100%; opacity: 0; height: 20px; } 100% { opacity: 0; } }

/* --- RESPONSIVE AYARLAR --- */
@media (max-width: 768px) {
    .strategy-section { padding-top: 160px; }
    .bottom-reverse-glow { top: -100px; height: 300px; opacity: 1; }
    .cards-grid { grid-template-columns: 1fr; padding: 0 10px; }
    .strategy-header h2 { font-size: 2rem; }
}
/* --- STRATEJİ EN ALT: TERS NEFES ALAN ÇİZGİ --- */
.strategy-footer-separator {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 100px; /* Işık hüzmesi için alan */
    display: flex;
    align-items: flex-end; /* Çizgiyi en alta yasla */
    justify-content: center;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}

/* Çizginin Kendisi */
.reverse-breathing-line {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #C8FF1A 50%, transparent 100%);
    border-radius: 50%;
    
    /* Işık Efekti: Yukarı Doğru (Bottom-Up) */
    box-shadow: 0 -5px 20px rgba(200, 255, 26, 0.6), 0 -10px 40px rgba(200, 255, 26, 0.3);
    
    /* Nefes Alma Animasyonu */
    animation: breathe-reverse-anim 4s infinite ease-in-out;
}

/* Yukarı doğru süzülen hafif sis efekti */
.strategy-footer-separator::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center bottom, rgba(200, 255, 26, 0.15) 0%, transparent 70%);
    filter: blur(20px);
    animation: glow-pulse-up 4s infinite ease-in-out;
}

@keyframes breathe-reverse-anim {
    0% { width: 20%; opacity: 0.4; }
    50% { width: 80%; opacity: 1; height: 4px; box-shadow: 0 -10px 50px rgba(200, 255, 26, 1); }
    100% { width: 20%; opacity: 0.4; }
}

@keyframes glow-pulse-up {
    0%, 100% { opacity: 0.3; transform: translateX(-50%) scaleY(0.8); }
    50% { opacity: 0.8; transform: translateX(-50%) scaleY(1.2); }
}