/* ============================================================
   MODERN BASE — Beyaz Gülüş 2026
   Inter font · clean white · Aqua/Mint/Gold accents
   Ortak base; tüm sayfalar bu dosyayı kullanır.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* === DijiWOW Aqua-Indigo Palette === */
    --m-aqua: #0891b2;           /* aqua ana */
    --m-aqua-dark: #0e7490;      /* deep aqua */
    --m-aqua-soft: #f0f9ff;      /* very soft cyan */
    --m-indigo: #6366f1;         /* indigo accent */
    --m-indigo-dark: #4f46e5;    /* deep indigo */
    --m-indigo-soft: #faf5ff;    /* very soft lavender */
    --m-pink: #ec4899;           /* pembe vurgu */
    --m-pink-dark: #db2777;
    --m-pink-soft: #fdf2f8;
    --m-mint: #10b981;           /* check/success için */
    --m-mint-dark: #059669;
    --m-mint-soft: #d1fae5;
    --m-gold: #f59e0b;
    --m-gold-dark: #d97706;
    --m-gold-soft: #fef3c7;
    --m-ink: #0f172a;
    --m-ink-2: #1e293b;
    --m-text: #334155;
    --m-mute: #64748b;
    --m-line: #e2e8f0;
    --m-soft: #f8fafc;
    --m-soft-2: #f1f5f9;
    /* WOW gradient (DijiWOW signature) */
    --m-grad: linear-gradient(135deg, #0891b2 0%, #6366f1 60%, #ec4899 100%);
    --m-grad-aqua-indigo: linear-gradient(135deg, #0891b2 0%, #6366f1 100%);
    --m-grad-indigo-pink: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    --m-grad-gold: linear-gradient(135deg, var(--m-gold) 0%, #ec4899 100%);
    --m-shadow: 0 1px 3px rgba(15,23,42,0.05), 0 4px 12px rgba(15,23,42,0.04);
    --m-shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 12px 32px rgba(15,23,42,0.06);
    --m-shadow-lg: 0 16px 40px rgba(15,23,42,0.1), 0 32px 80px rgba(15,23,42,0.08);
}

body.bg-modern { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--m-text); background: #fff; -webkit-font-smoothing: antialiased; }
body.bg-modern h1, body.bg-modern h2, body.bg-modern h3, body.bg-modern h4 { font-family: inherit; color: var(--m-ink); }

.m-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   COMMON: section, eyebrow, headings, buttons
   ============================================================ */
.m-section { padding: 100px 0; }
.m-section-soft { background: var(--m-soft); }

.m-sec-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.m-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; background: linear-gradient(135deg, #f0f9ff, #faf5ff); color: var(--m-aqua-dark); border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 20px; border: 1px solid rgba(99,102,241,0.12); }
.m-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--m-indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
.m-eyebrow-light { background: rgba(255,255,255,0.15); color: #fff; backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.2); }
.m-eyebrow-light span { background: #ec4899; box-shadow: 0 0 0 3px rgba(236,72,153,0.3); }

.m-sec-title { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 18px; color: var(--m-ink); }
.m-sec-sub { font-size: 17px; line-height: 1.7; color: var(--m-mute); }

.m-grad { background: var(--m-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.m-grad-gold { background: var(--m-grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.m-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: 15px; transition: all .25s ease; line-height: 1; border: none; cursor: pointer; font-family: inherit; }
.m-btn i { font-size: 16px; }
.m-btn-primary { background: var(--m-grad); background-size: 150% 150%; background-position: 0% 0%; color: #fff; box-shadow: 0 8px 24px rgba(99,102,241,0.4); transition: all .35s; }
.m-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(236,72,153,0.5); color: #fff; background-position: 100% 100%; }
.m-btn-ghost { background: var(--m-soft); color: var(--m-ink); border: 1px solid var(--m-line); }
.m-btn-ghost:hover { background: #fff; border-color: var(--m-aqua); color: var(--m-aqua-dark); }
.m-btn-outline { background: #fff; color: var(--m-ink); border: 1.5px solid var(--m-line); padding: 14px 28px; }
.m-btn-outline:hover { border-color: var(--m-aqua); color: var(--m-aqua-dark); transform: translateY(-2px); }
.m-btn-gold { background: var(--m-gold); color: var(--m-ink); box-shadow: 0 8px 24px rgba(245,158,11,0.4); }
.m-btn-gold:hover { background: var(--m-gold-dark); transform: translateY(-2px); color: #fff; }
.m-btn-wpp { background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(37,211,102,0.35); }
.m-btn-wpp:hover { background: #1ebe5d; transform: translateY(-2px); color: #fff; }

/* ============================================================
   FINAL CTA SECTION
   ============================================================ */
.m-cta-final { padding: 100px 0; background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%); color: #fff; position: relative; overflow: hidden; }
.m-cta-final::before { content: ''; position: absolute; top: -200px; right: -150px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,0.35), transparent 70%); pointer-events: none; }
.m-cta-final::after { content: ''; position: absolute; bottom: -200px; left: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(236,72,153,0.28), transparent 70%); pointer-events: none; }

.m-cta-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.m-cta-title { font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; color: #fff; margin-bottom: 18px; }
.m-cta-sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.8); margin-bottom: 32px; max-width: 540px; }
.m-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.m-cta-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.m-cs-card { background: rgba(255,255,255,0.07); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 24px 20px; text-align: center; }
.m-cs-card .m-cs-num { font-size: 32px; font-weight: 800; background: linear-gradient(135deg, #67e8f9 0%, #a5b4fc 50%, #f9a8d4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 8px; letter-spacing: -1px; }
.m-cs-lbl { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .m-section { padding: 60px 0; }
    .m-sec-head { margin-bottom: 40px; }
    .m-sec-title { font-size: 28px; letter-spacing: -1px; }
    .m-sec-sub { font-size: 15px; }
    .m-cta-grid { grid-template-columns: 1fr; gap: 40px; }
    .m-cta-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .m-container { padding: 0 16px; }
    .m-section { padding: 48px 0; }
    .m-sec-head { margin-bottom: 32px; padding: 0 4px; }
    .m-eyebrow { font-size: 11.5px; padding: 6px 14px; margin-bottom: 14px; }
    .m-sec-title { font-size: 26px; line-height: 1.15; letter-spacing: -0.8px; margin-bottom: 12px; }
    .m-sec-sub { font-size: 14.5px; line-height: 1.6; }

    .m-btn { padding: 13px 22px; font-size: 14px; }

    .m-cta-final { padding: 60px 0; }
    .m-cta-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .m-cs-card { padding: 18px 14px; }
    .m-cs-card .m-cs-num { font-size: 26px; }
    .m-cs-lbl { font-size: 10.5px; }
    .m-cta-title { font-size: 28px; line-height: 1.15; }
    .m-cta-sub { font-size: 14.5px; }
    .m-cta-actions { flex-direction: column; gap: 10px; }
    .m-cta-actions .m-btn { width: 100%; justify-content: center; }
}