/* Proje detayı — Makro Çelik Ev (data-case="makro"). Tasarım: caseMakro bloğu. */

/* Değer katmanı görseli */
#page-project[data-case="makro"] .mvalue-area { position: relative; padding: clamp(70px, 8vw, 130px) 7.002% 0; }
#page-project[data-case="makro"] .mvalue-area img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* İki kart: Dönüşüm (WhatsApp animasyonu) + Adwords Strategy (huni görseli) */
#page-project[data-case="makro"] .cards-area { position: relative; padding: clamp(70px, 8vw, 130px) 7.002% 0; }
#page-project[data-case="makro"] .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 3vw, 34px); align-items: stretch; }
#page-project[data-case="makro"] .card { display: flex; flex-direction: column; }
#page-project[data-case="makro"] .card .t { font-weight: 700; font-size: 12px; line-height: 12px; color: #151515; }
#page-project[data-case="makro"] .card h2 { margin: 20px 0 0; max-width: 460px; font-weight: 500; font-size: clamp(24px, 1.9vw, 32px); line-height: 1.15; letter-spacing: -0.02em; color: #151515; text-wrap: pretty; }
#page-project[data-case="makro"] .card p { margin: 14px 0 clamp(28px, 3vw, 48px); max-width: 430px; font-weight: 400; font-size: 14px; line-height: 21px; color: rgba(0,0,0,0.7); text-wrap: pretty; }
#page-project[data-case="makro"] .card .vis { margin-top: auto; }
#page-project[data-case="makro"] .card .vis > img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* WhatsApp → Pikap Bot → Qualified Lead animasyonu (wl*) */
#page-project[data-case="makro"] .wa { margin-top: auto; position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: rgb(242,246,242); container-type: inline-size; }
#page-project[data-case="makro"] .wa .msg { position: absolute; left: 15.4%; top: 38.8%; width: 43.8%; height: 43.8%; border-radius: 1.4cqw; background: rgb(63,191,108); box-sizing: border-box; padding: 4.6cqw; display: flex; flex-direction: column; animation: wlWa 6s cubic-bezier(.65,0,.35,1) infinite; }
#page-project[data-case="makro"] .wa .msg .ico { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: rgb(37,211,102); display: flex; align-items: center; justify-content: center; }
#page-project[data-case="makro"] .wa .msg .ico svg { display: block; width: 58%; height: 58%; }
#page-project[data-case="makro"] .wa .msg .txt { margin-top: auto; font-weight: 400; font-size: 2.63cqw; line-height: 1.33; letter-spacing: -0.01em; color: #ffffff; }
#page-project[data-case="makro"] .wa .msg .time { margin-top: 2.4cqw; font-weight: 700; font-size: 1.2cqw; line-height: 1; color: #ffffff; }
#page-project[data-case="makro"] .wa .bot { position: absolute; left: 45.2%; top: 20.8%; width: 43.9%; height: 35.3%; border-radius: 1.4cqw; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); box-sizing: border-box; padding: 4.6cqw 4.6cqw 0; animation: wlBot 6s cubic-bezier(.16,1,.3,1) infinite; }
#page-project[data-case="makro"] .wa .bot .q { display: block; font-weight: 400; font-size: 2.63cqw; line-height: 1.3; letter-spacing: -0.01em; color: #151515; }
#page-project[data-case="makro"] .wa .bot .opts { margin-top: 2.6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw; padding: .7cqw; border-radius: 1.4cqw; background: #ffffff; box-shadow: 0 1cqw 3cqw rgba(0,0,0,0.07); }
#page-project[data-case="makro"] .wa .bot .opt { position: relative; height: 7.8cqw; border-radius: 1.2cqw; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; font-size: 1.65cqw; color: #151515; }
#page-project[data-case="makro"] .wa .bot .pick { position: absolute; inset: 0; border-radius: 1.2cqw; background: rgb(63,191,108); display: flex; align-items: center; justify-content: center; color: #ffffff; animation: wlPick 6s ease infinite; }
#page-project[data-case="makro"] .wa .bot .name { display: block; margin-top: 3.2cqw; font-weight: 700; font-size: 1.2cqw; color: #151515; }
#page-project[data-case="makro"] .wa .stamp { position: absolute; left: 49.3%; top: 56.2%; z-index: 3; height: 9.6cqw; padding: 0 3.6cqw; border-radius: 1.2cqw; background: rgb(236,255,93); box-shadow: -2.2cqw 3.4cqw 0 rgba(20,90,45,0.35); display: flex; align-items: center; white-space: nowrap; font-weight: 500; font-size: 4.6cqw; line-height: 1; letter-spacing: -0.02em; color: #151515; animation: wlStamp 6s cubic-bezier(.2,.9,.3,1.2) infinite; }

@keyframes wlWa { 0% { opacity: 0; transform: translate(29%, -21.7%) scale(.9); } 8% { opacity: 1; transform: translate(29%, -21.7%) scale(1); } 28% { opacity: 1; transform: translate(29%, -21.7%) scale(1); } 40% { opacity: 1; transform: translate(0, 0) scale(1); } 90% { opacity: 1; transform: translate(0, 0) scale(1); } 98%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
@keyframes wlBot { 0%, 30% { opacity: 0; transform: translate(-18%, 14%) scale(.94); } 42% { opacity: 1; transform: translate(0, 0) scale(1); } 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes wlPick { 0%, 50% { opacity: 0; } 53%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes wlStamp { 0%, 60% { opacity: 0; transform: translate(-50%, -50%) rotate(30deg) scale(2.2); } 64% { opacity: 1; transform: translate(-50%, -50%) rotate(30deg) scale(.94); } 67% { opacity: 1; transform: translate(-50%, -50%) rotate(30deg) scale(1); } 90% { opacity: 1; transform: translate(-50%, -50%) rotate(30deg) scale(1); } 98%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(30deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
    #page-project[data-case="makro"] .wa .msg,
    #page-project[data-case="makro"] .wa .bot,
    #page-project[data-case="makro"] .wa .pick,
    #page-project[data-case="makro"] .wa .stamp { animation: none !important; opacity: 1 !important; }
}

/* Creative Content: başlık + ok rozetli veriler + görsel */
#page-project[data-case="makro"] .creative-area { position: relative; padding: clamp(70px, 8vw, 130px) 7.002% 0; }
#page-project[data-case="makro"] .creative-area .top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: clamp(28px, 4vw, 60px); }
#page-project[data-case="makro"] .creative-area .txt { flex: 1 1 420px; max-width: 640px; }
#page-project[data-case="makro"] .creative-area .t { font-weight: 700; font-size: 15px; line-height: 15px; color: #151515; }
#page-project[data-case="makro"] .creative-area h2 { margin: 18px 0 0; font-weight: 500; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.02; letter-spacing: -0.02em; color: #151515; text-wrap: pretty; }
#page-project[data-case="makro"] .creative-area h2 span { color: rgb(145,145,145); }
#page-project[data-case="makro"] .creative-area .stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 4.5vw, 76px); padding-top: 34px; }
#page-project[data-case="makro"] .creative-area .stat { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
#page-project[data-case="makro"] .creative-area .pill { height: 26px; width: 50px; border-radius: 50px; background: rgb(13,225,169); display: inline-flex; align-items: center; justify-content: center; }
#page-project[data-case="makro"] .creative-area .pill img { display: block; width: 20px; height: auto; filter: brightness(0) invert(1); }
#page-project[data-case="makro"] .creative-area .pill.down img { transform: scaleY(-1); }
#page-project[data-case="makro"] .creative-area .lbl { font-weight: 500; font-size: 15px; line-height: 16px; color: #151515; }
#page-project[data-case="makro"] .creative-area .val { font-weight: 500; font-size: clamp(34px, 3vw, 46px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: #151515; }
#page-project[data-case="makro"] .creative-area .img { margin-top: clamp(40px, 4vw, 60px); }
#page-project[data-case="makro"] .creative-area .img img { display: block; width: 100%; height: auto; }