/* ============================================================ KAMPANYA POPUP — BAĞIMSIZ STİL DOSYASI (WordPress için) Bu dosya, ana sayfadaki (template.html) kampanya pop-up'ının BİREBİR AYNISINI, styles/common.css'e veya template.html'e bağımlı olmadan üretmek için var. WordPress iç sayfalarında js/campaign-popup.js ile birlikte enqueue edilir. Kaynak (bu dosya elle YAZILMADI, aşağıdaki gerçek kaynaklardan birebir kopyalandı — sırası cascade'i korumak için önemli): 1) styles/common.css → temel .campaign-popup* kuralları 2) template.html → satır ~262, ~322, ~393, ~533 override blokları (!important zincirleri) 3) template.html → "KAMPANYA POPUP EK CSS" bloğu (renk özelleştirme için --cp-* custom property'leri) ÖNEMLİ: Ana sayfadaki pop-up tasarımında bir değişiklik yapılırsa (template.html veya styles/common.css içinde), bu dosyaya da AYNI değişiklik elle yansıtılmalı — otomatik senkronizasyon yok. Bağımlılık: Tabler Icons (ti ti-check, ti ti-arrow-right, ti ti-brand-whatsapp) VE Cormorant Garamond/Inter/JetBrains Mono font-face'leri bu dosyada import EDİLMİYOR — ikisi de mu-plugin'den (wp-content/mu-plugins/ae-campaign-popup.php) kendi self-hosted dosyaları üzerinden ayrı ayrı enqueue ediliyor. Önce hem tabler-icons hem Google Fonts CDN/@import üzerinden yüklenmeye çalışıldı, ikisi de WordPress'te güvenilir çalışmadı (ikonlar kareye dönüyordu, font listedeki ilk seçenek hiç yüklenmeyip yedeğe düşüyordu) — self-hosting ikisinde de kesin çözüm oldu, burada da aynı yol izlendi. ============================================================ */ /* Tasarım token'ları — sadece #campaign-popup alt ağacına scope'lu, WordPress temasının kendi global :root değişkenleriyle çakışmasın diye */ #campaign-popup { --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; --midnight: #1A1F36; --coral: #8B1E3F; --sage: #6BA88F; --text-dark: #2A2418; --text-mid: #5A5040; --text-light: #8A7E68; } /* ====== KAMPANYA POPUP — TEMEL (kaynak: styles/common.css) ====== */ .campaign-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .campaign-popup-overlay { position: absolute; inset: 0; background: rgba(26,31,54,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade-in 0.3s ease-out; } .campaign-popup-box { position: relative; background: #fff; border-radius: 24px; max-width: 580px; width: 100%; display: grid; grid-template-columns: 200px 1fr; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.4); animation: popup-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes popup-bounce-in { 0% { transform: scale(0.7) translateY(40px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .campaign-popup-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: rgba(255,255,255,0.95); border: none; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: #1A1F36; z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.2s; } .campaign-popup-close:hover { transform: scale(1.1); background: #fff; } .campaign-popup-visual { background: linear-gradient(135deg, #8B1E3F 0%, #5A0F26 100%); color: #F0D584; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 16px; text-align: center; position: relative; overflow: hidden; } .campaign-popup-visual::before { content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: radial-gradient(circle, rgba(240,213,132,0.15) 0%, transparent 60%); animation: visual-spin 20s linear infinite; } @keyframes visual-spin { to { transform: rotate(360deg); } } .campaign-popup-badge { background: rgba(240,213,132,0.2); color: #F0D584; padding: 4px 12px; border-radius: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; border: 1px solid rgba(240,213,132,0.4); position: relative; margin-bottom: 12px; } .campaign-popup-discount { font-family: var(--font-serif); font-size: 76px; font-weight: 700; line-height: 1; color: #F0D584; text-shadow: 0 4px 20px rgba(0,0,0,0.3); position: relative; } .campaign-popup-discount-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 4px; color: #FBE9B8; font-weight: 600; position: relative; margin-top: 4px; } .campaign-popup-content { padding: 30px 30px 26px; } .campaign-popup-content h2 { font-family: var(--font-serif); font-size: 28px; color: var(--midnight); margin: 0 0 8px; line-height: 1.15; letter-spacing: -0.5px; } .campaign-popup-content p { font-size: 14px; color: var(--text-mid); line-height: 1.55; margin: 0 0 16px; } .campaign-popup-features { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .cpf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dark); } .cpf i { color: var(--sage); font-weight: 700; } .campaign-popup-buttons { display: flex; flex-direction: column; gap: 8px; } .campaign-popup-btn-primary { background: linear-gradient(135deg, #8B1E3F, #5A0F26); color: #fff; border: none; padding: 14px 20px; border-radius: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s; } .campaign-popup-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,30,63,0.4); } .campaign-popup-btn-secondary { background: none; border: 1px solid rgba(0,0,0,0.1); color: var(--text-light); padding: 10px 16px; border-radius: 8px; font-family: var(--font-sans); font-size: 12px; cursor: pointer; transition: color 0.2s; } .campaign-popup-btn-secondary:hover { color: var(--coral); } .campaign-popup-countdown { margin-top: 14px; padding: 10px; background: #FBF5E8; border-radius: 8px; font-size: 12px; color: var(--text-mid); text-align: center; } .campaign-popup-countdown strong { color: var(--coral); font-family: var(--font-mono); margin-left: 6px; font-size: 13px; } @media (max-width: 580px) { .campaign-popup-box { grid-template-columns: 1fr; max-width: calc(100vw - 32px); } .campaign-popup-visual { padding: 22px 16px; } .campaign-popup-discount { font-size: 56px; } .campaign-popup-content { padding: 22px 22px 20px; } .campaign-popup-content h2 { font-size: 22px; } } /* ====== template.html override — satır ~262 (Apple-vari ilk geçiş) ====== */ .campaign-popup-visual { background: linear-gradient(135deg, #8B1E3F 0%, #5A0F26 100%) !important; } .campaign-popup-badge { background: rgba(255,255,255,0.18) !important; border: 1px solid rgba(255,255,255,0.35) !important; color: #fff !important; font-family: 'Inter',sans-serif !important; } .campaign-popup-discount { color: #F0D584 !important; font-family: 'Inter',sans-serif !important; } .campaign-popup-discount-label { color: rgba(255,255,255,0.85) !important; } .campaign-popup-btn-primary { background: #8B1E3F !important; border-radius: 12px !important; font-family: 'Inter',sans-serif !important; border: none !important; } .campaign-popup-btn-primary:hover { background: #6d1730 !important; } .campaign-popup-box { border-radius: 24px !important; overflow: hidden !important; } /* ====== template.html override — satır ~322 (kapatma butonu + geri sayım) ====== */ .campaign-popup-close{position:absolute!important;top:14px!important;right:16px!important;background:#1d1d1f!important;border:none!important;color:#fff!important;border-radius:50%!important;width:32px!important;height:32px!important;cursor:pointer!important;font-size:18px!important;font-weight:600!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:20!important;line-height:1!important;opacity:1!important;box-shadow:0 2px 8px rgba(0,0,0,.25)!important;} .campaign-popup-close:hover{background:#000!important;transform:scale(1.08)!important;} .campaign-popup-countdown{background:#eef3fb!important;border:1px solid #d3e0f5!important;border-radius:12px!important;padding:10px 16px!important;font-size:13px!important;color:#2C5CA6!important;font-weight:600!important;text-align:center!important;margin-top:14px!important;} .campaign-popup-countdown strong{color:#1a3d7a!important;} /* ====== template.html override — satır ~393 (final Apple-vari geçiş) ====== */ .campaign-popup-overlay{background:rgba(20,24,40,.52)!important;backdrop-filter:blur(4px)!important;} .campaign-popup-box{background:#fff!important;border-radius:28px!important;box-shadow:0 40px 100px rgba(20,24,40,.22)!important;border:1px solid #f0f0f3!important;overflow:hidden!important;font-family:'Inter',sans-serif!important;position:relative!important;} .campaign-popup-visual{background:linear-gradient(135deg,#8B1E3F 0%,#5A0F26 100%)!important;padding:36px 28px!important;text-align:center!important;} .campaign-popup-badge{background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:999px!important;font-size:11px!important;font-weight:700!important;letter-spacing:.08em!important;padding:6px 14px!important;display:inline-block!important;} .campaign-popup-discount{font-size:68px!important;font-weight:800!important;color:#F0D584!important;letter-spacing:-.06em!important;line-height:1!important;} .campaign-popup-btn-primary{background:#8B1E3F!important;color:#fff!important;border:none!important;border-radius:999px!important;font-weight:700!important;padding:15px 24px!important;display:flex!important;align-items:center!important;gap:8px!important;justify-content:center!important;width:100%!important;cursor:pointer!important;font-family:'Inter',sans-serif!important;box-shadow:0 8px 22px rgba(139,30,63,.3)!important;} .campaign-popup-btn-primary:hover{background:#6d1730!important;transform:translateY(-2px)!important;} .campaign-popup-close{position:absolute!important;top:14px!important;right:16px!important;background:rgba(255,255,255,.2)!important;border:none!important;color:#fff!important;border-radius:50%!important;width:30px!important;height:30px!important;cursor:pointer!important;z-index:10!important;} /* ====== template.html override — satır ~533 (mobil, max-width:900px) ====== */ @media(max-width:900px){ .campaign-popup-box{width:92vw!important;max-width:92vw!important;max-height:86dvh!important;overflow-y:auto!important;border-radius:22px!important;margin:0 auto!important;} .campaign-popup-discount{font-size:52px!important;} .campaign-popup-visual{padding:24px 20px!important;} .campaign-popup-content{padding:22px 20px 26px!important;} } /* ====== "KAMPANYA POPUP EK CSS" — admin panelden renk özelleştirme (--cp-* custom property'leri campaign-popup.js tarafından JS ile box.style.setProperty(...) ile set edilir; burada sadece fallback değerler var) ====== */ .campaign-form-row{margin-bottom:10px;} .campaign-form-row input{width:100%;padding:11px 14px;border:1px solid #D1D5DB;border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;box-sizing:border-box;transition:border-color .2s,box-shadow .2s;} .campaign-form-row input:focus{outline:none;border-color:#8B1E3F;box-shadow:0 0 0 3px rgba(139,30,63,.12);} .campaign-popup-box{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;max-width:420px!important;width:100%!important;max-height:96vh!important;overflow-y:auto!important;} .campaign-popup-visual{position:relative!important;padding:0!important;display:block!important;overflow:hidden!important;background:linear-gradient(135deg,var(--cp-bg-start,#8B1E3F) 0%,var(--cp-bg-end,#5A0F26) 100%)!important;flex-shrink:0!important;} #campaign-image{display:none;position:static!important;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:unset!important;margin:0!important;vertical-align:middle!important;border-radius:0!important;} .campaign-visual-caption{position:absolute;left:0;right:0;bottom:0;top:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;padding:14px 16px 16px;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.72) 100%);} .campaign-popup-badge{color:var(--cp-accent,#F0D584)!important;background:transparent!important;border:none!important;font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-size:10.5px!important;padding:0!important;} .campaign-popup-discount{color:var(--cp-accent,#F0D584)!important;} .campaign-popup-discount-label{color:var(--cp-accent,#F0D584)!important;opacity:.85;} .campaign-popup-content{text-align:center!important;padding:18px 22px 16px!important;} #campaign-title{color:var(--cp-title,#1A1F36)!important;margin-bottom:6px!important;font-size:21px!important;font-weight:600!important;letter-spacing:-0.02em!important;} #campaign-desc{color:var(--cp-desc,#6b6b72)!important;margin-left:auto!important;margin-right:auto!important;margin-bottom:8px!important;font-size:13.5px!important;line-height:1.55!important;} .campaign-popup-features{align-items:center!important;gap:5px!important;margin-bottom:10px!important;} .cpf{justify-content:center!important;font-size:12.5px!important;color:#6b6b72!important;} .campaign-popup-countdown{display:none;margin-bottom:12px;background:none!important;border:none!important;padding:0!important;} .cd-row{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;} .cd-box{background:var(--cp-cd-bg,#8B1E3F);border-radius:10px;padding:7px 9px 6px;min-width:44px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 12px rgba(20,24,40,.16);} .cd-num{font-family:'Inter',sans-serif;font-weight:600;font-size:18px;color:var(--cp-cd-num,#fff);line-height:1;letter-spacing:-0.01em;} .cd-label{font-family:'Inter',sans-serif;font-weight:500;font-size:8px;letter-spacing:.07em;color:var(--cp-cd-label,#F0D584);margin-top:3px;text-transform:uppercase;} .cd-sep{font-weight:600;font-size:15px;color:#c7c7cc;align-self:flex-start;margin-top:9px;} #campaign-offer-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;} #campaign-offer-buttons #campaign-close-btn{grid-column:1 / -1!important;padding:8px!important;font-size:11.5px!important;background:transparent!important;box-shadow:none!important;text-transform:none!important;border-radius:8px!important;} #campaign-offer-buttons #campaign-close-btn:hover{background:#f4f4f5!important;} #campaign-offer-buttons .campaign-popup-btn-primary,#campaign-offer-buttons .campaign-popup-btn-whatsapp{padding:12px 10px!important;font-size:13.5px!important;} .campaign-popup-btn-primary{background:var(--cp-btn-bg,#8B1E3F)!important;color:var(--cp-btn-text,#fff)!important;font-family:'Inter',sans-serif!important;font-weight:500!important;letter-spacing:normal!important;text-transform:none!important;border-radius:10px!important;box-shadow:none!important;transition:opacity .18s,transform .12s!important;} .campaign-popup-btn-primary:hover{opacity:.92!important;transform:none!important;box-shadow:none!important;} .campaign-popup-btn-primary:active{transform:scale(.97)!important;} .campaign-popup-btn-primary:focus-visible{outline:2px solid var(--cp-btn-bg,#8B1E3F)!important;outline-offset:2px!important;} .campaign-popup-btn-whatsapp{background:#fff!important;color:#1d1d1f!important;border:1.5px solid #e2e2e8!important;border-radius:10px!important;font-weight:500!important;letter-spacing:normal!important;text-transform:none!important;display:flex!important;align-items:center!important;gap:6px!important;justify-content:center!important;width:100%!important;cursor:pointer!important;font-family:'Inter',sans-serif!important;box-shadow:none!important;transition:background .18s,border-color .18s,transform .12s!important;} .campaign-popup-btn-whatsapp:hover{background:#f9f9fa!important;border-color:#d4d4d8!important;transform:none!important;box-shadow:none!important;color:#1d1d1f!important;} .campaign-popup-btn-whatsapp:active{transform:scale(.97)!important;} .campaign-popup-btn-whatsapp:focus-visible{outline:2px solid #8B1E3F!important;outline-offset:2px!important;} .campaign-popup-btn-whatsapp i{font-size:16px!important;color:#25D366!important;} #campaign-offer-buttons #campaign-close-btn{font-family:'Inter',sans-serif!important;font-weight:500!important;color:#9a9aa0!important;} @media(max-width:600px){.campaign-popup-box{max-width:92vw!important;}.cd-box{min-width:38px;padding:6px 7px 5px;}.cd-num{font-size:15px;}} /* ====== FONT SAĞLAMLAŞTIRMA (WordPress'e özel) ====== Anasayfada bu blok gerekmiyor çünkü rakip bir tema CSS'i yok. Ama WordPress sayfalarında kingster temasının kendi genel font-family kuralları (body/p/div gibi geniş seçiciler), yukarıdaki bazı kurallar !important içermediği için (miras yoluyla gelen font-family, doğrudan hedefli bir kurala her zaman kaybeder) devreye girip pop-up'ın yazı tipini eziyordu. #campaign-popup'ı kendi fontlarına kilitliyoruz — yüksek özgüllük (ID) + !important, temanın kural sırasından bağımsız olarak kazanır. ÖNEMLİ: :not(.ti) ile Tabler Icons elemanları () HARİÇ TUTULUYOR — ilk denemede bunu unuttum, ikon harfleri de Inter'e zorlanınca (tabler-icons fontu yerine) hepsi kareye döndü. BAŞLIK NOTU: Önceden burada #campaign-title için Cormorant Garamond zorlanıyordu çünkü .campaign-popup-content h2'nin TEMEL kuralı (common.css) font-family:var(--font-serif) diyor. AMA anasayfanın kendi