/* ---------- Base (hero / invitation / countdown ile uyumlu) ---------- */
        

        

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

        /* ---------- Title styling (matches invitation.html) ---------- */
        .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);
        }

        /* ---------- Pill cards with double-border effect ---------- */
        /* Outer wrapper = thick outer border ring
           Inner element = thin inner border ring, with a small gap between them */
        .pill-card {
            position: relative;
            border-radius: 18px;
            padding: 4px; /* gap between the two borders */
            background: transparent;
            border: 1.5px solid rgba(127, 200, 248, 0.85);
            box-shadow:
                0 0 0 1px rgba(127, 200, 248, 0.08),
                0 0 22px rgba(127, 200, 248, 0.18),
                0 18px 40px rgba(5, 11, 38, 0.45);
            transition: transform 0.35s cubic-bezier(.2,.7,.2,1),
                        box-shadow 0.35s cubic-bezier(.2,.7,.2,1),
                        border-color 0.3s ease;
        }
        .pill-card::before {
            /* subtle highlight on the outer ring */
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            background: linear-gradient(180deg,
                rgba(184, 220, 251, 0.35) 0%,
                rgba(127, 200, 248, 0.05) 50%,
                rgba(127, 200, 248, 0.25) 100%);
            -webkit-mask:
                linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            padding: 1px;
            pointer-events: none;
            opacity: 0.7;
        }
        .pill-card .pill-inner {
            position: relative;
            border-radius: 14px;
            border: 1.2px solid rgba(94, 179, 240, 0.7);
            background: linear-gradient(180deg,
                rgba(8, 16, 56, 0.55) 0%,
                rgba(5, 11, 38, 0.55) 100%);
            padding: 1.05rem 1.5rem;
            backdrop-filter: blur(2px);
            transition: background 0.3s ease, border-color 0.3s ease;
        }
        .pill-card:hover {
            transform: translateY(-2px);
            border-color: rgba(184, 220, 251, 0.95);
            box-shadow:
                0 0 0 1px rgba(127, 200, 248, 0.15),
                0 0 32px rgba(127, 200, 248, 0.32),
                0 22px 50px rgba(5, 11, 38, 0.55);
        }
        .pill-card:hover .pill-inner {
            background: linear-gradient(180deg,
                rgba(12, 22, 70, 0.7) 0%,
                rgba(8, 16, 56, 0.7) 100%);
            border-color: rgba(127, 200, 248, 0.9);
        }

        .pill-label {
            font-family: var(--font-display);
            letter-spacing: 0.01em;
            color: #ffffff;
        }

        /* ---------- Decorative dotted Q (mirrors invitation.html style) ---------- */
        .decor-q {
            position: absolute;
            right: -90px;
            top: 50%;
            transform: translateY(-46%);
            width: clamp(220px, 26vw, 460px);
            height: clamp(220px, 26vw, 460px);
            pointer-events: none;
            opacity: 0.55;
            z-index: 0;
        }
        @media (max-width: 768px) {
            .decor-q {
                width: 180px;
                height: 180px;
                right: -70px;
                opacity: 0.4;
            }
        }
        @media (max-width: 480px) {
            .decor-q {
                width: 140px;
                height: 140px;
                right: -55px;
                opacity: 0.32;
            }
        }

        /* ---------- 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); } }
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 22px rgba(127, 200, 248, 0.18); }
            50%      { box-shadow: 0 0 36px rgba(127, 200, 248, 0.32); }
        }
        .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; }
        /* Glow uygulaması: .pill-card'a doğrudan animation eklersek anim-rise ile çakışır.
           Bunun yerine inner'a after pseudo-element ile uygulayalım. */
        .pill-card .pill-inner::after {
            content: "";
            position: absolute;
            inset: -6px;
            border-radius: inherit;
            pointer-events: none;
            z-index: -1;
            box-shadow: 0 0 22px rgba(127, 200, 248, 0.2);
            animation: glow 5s ease-in-out infinite;
        }

        /* ---------- Responsive pill sizing ---------- */
        .pill-text { font-size: clamp(0.95rem, 1.8vw, 1.35rem); }