/* ---------- Base (önceki dosyalarla uyumlu) ---------- */
        

        

        /* ---------- Section background ---------- */
        .section-bg {
            background:
                radial-gradient(ellipse 60% 40% at 15% 20%, rgba(20, 35, 102, 0.5) 0%, transparent 60%),
                radial-gradient(ellipse 55% 45% at 85% 75%, rgba(30, 58, 138, 0.4) 0%, transparent 60%),
                linear-gradient(165deg, #050B26 0%, #0A1647 55%, #0B1B5C 100%);
        }

        /* ---------- Title styling ---------- */
        .title-display {
            font-family: var(--font-display);
            letter-spacing: -0.005em;
            line-height: 1;
        }
        .title-underline {
            display: inline-block;
            height: 3px;
            background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(127, 200, 248, 0.85) 40%,
                rgba(127, 200, 248, 0) 100%);
            border-radius: 2px;
            box-shadow: 0 0 18px rgba(127, 200, 248, 0.55);
        }

        /* ---------- Charter body text ---------- */
        .charter-body {
            font-family: var(--font-body);
            font-weight: 700;
            color: #FFFFFF;
            text-align: justify;
            text-justify: inter-word;
            line-height: 1.65;
            letter-spacing: 0.005em;
        }
        .charter-body p {
            margin: 0 0 0.65em 0;
        }
        .charter-body p:last-child {
            margin-bottom: 0;
        }

        /* ---------- Light pill CTA ---------- */
        .light-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--c-pill-light-bg);
            color: var(--c-pill-light-text);
            border-radius: 9999px;
            padding: 0.95rem 2rem;
            font-family: var(--font-body);
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-size: 0.78rem;
            border: 1px solid rgba(127, 200, 248, 0.6);
            box-shadow:
                0 10px 28px rgba(127, 200, 248, 0.18),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
            transition: transform 0.3s cubic-bezier(.2,.7,.2,1),
                        box-shadow 0.3s ease,
                        background 0.3s ease;
        }
        .light-pill:hover {
            transform: translateY(-2px);
            background: #CFE7FC;
            box-shadow:
                0 14px 34px rgba(127, 200, 248, 0.32),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
        }
        .light-pill:active { transform: translateY(0); }

        /* ---------- Decorative dotted Q (matches invitation / topics) ---------- */
        .decor-q {
            position: absolute;
            right: -110px;
            bottom: -90px;
            width: clamp(280px, 32vw, 520px);
            height: clamp(280px, 32vw, 520px);
            pointer-events: none;
            opacity: 0.55;
            z-index: 0;
        }
        @media (max-width: 768px) {
            .decor-q {
                width: 220px;
                height: 220px;
                right: -90px;
                bottom: -70px;
                opacity: 0.35;
            }
        }
        @media (max-width: 480px) {
            .decor-q {
                width: 160px;
                height: 160px;
                right: -65px;
                bottom: -55px;
                opacity: 0.28;
            }
        }

        /* ---------- Animations ---------- */
        @keyframes riseIn {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

        .anim-rise { opacity: 0; animation: riseIn 0.85s cubic-bezier(.2,.7,.2,1) forwards; }
        .anim-fade { opacity: 0; animation: fadeIn 1s ease forwards; }
        .anim-line { transform-origin: left center; transform: scaleX(0); animation: drawLine 0.9s cubic-bezier(.2,.7,.2,1) 0.35s forwards; }

        /* ---------- Responsive sizing ---------- */
        .title-size { font-size: clamp(1.8rem, 4.5vw, 3.75rem); }
        .body-size  { font-size: clamp(0.9rem, 1.15vw, 1.05rem); }