.social-section {
    margin: 20px 0;
}

.social-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.social-section-header .social-section-title {
    margin-bottom: 0;
}

.social-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 16px;
    align-items: start;
    width: 100%;
}

/* Sol dolu, sağ boş: sağ kolon yer kaplamasın, grid 6 kolon */
.social-layout--grid-only {
    grid-template-columns: 1fr;
}

.social-layout--grid-only .social-grid {
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
}

/* Sağ dolu, sol boş: featured ortala */
.social-layout--featured-only {
    grid-template-columns: 1fr;
    justify-items: center;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 90%;
}

.social-grid .social-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    cursor: pointer;
    background: var(--surface-800);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--surface-700);
    padding: 0;
    transition: all 0.2s ease-in-out;
    height: 100%;
}

.social-grid .social-card:hover {
    background: var(--card-bg);
    border-color: var(--surface-600);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.social-grid .social-card-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-900);
    border-radius: 0;
    flex-shrink: 0;
}

.social-grid .social-card-thumb-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 75% 55% at 0% 0%, rgba(0, 0, 0, 0.4) 0%, transparent 58%),
        radial-gradient(ellipse 75% 55% at 100% 0%, rgba(0, 0, 0, 0.4) 0%, transparent 58%),
        radial-gradient(ellipse 65% 45% at 0% 100%, rgba(0, 0, 0, 0.28) 0%, transparent 52%),
        radial-gradient(ellipse 65% 45% at 100% 100%, rgba(0, 0, 0, 0.28) 0%, transparent 52%),
        linear-gradient(to top, rgba(7, 36, 54, 0.9) 0%, rgba(7, 36, 54, 0.25) 38%, transparent 72%);
}

.social-grid .social-card-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.35s ease, filter 0.25s ease;
}

.social-grid .social-card:hover .social-card-thumb {
    transform: scale(1.05);
    filter: brightness(0.92);
}

/* Fotoğrafı olmayan Telegram (vb.) postlar — site logosu */
.social-grid .social-card-thumb-wrap.is-logo-fallback {
    background:
        radial-gradient(ellipse 80% 70% at 50% 40%, rgba(34, 158, 217, 0.18) 0%, transparent 65%),
        linear-gradient(160deg, var(--surface-800) 0%, var(--surface-900) 100%);
}

.social-grid .social-card-thumb-wrap.is-logo-fallback::after {
    background: linear-gradient(to top, rgba(7, 36, 54, 0.75) 0%, transparent 55%);
}

.social-grid .social-card-thumb-wrap.is-logo-fallback .social-card-thumb {
    width: 52%;
    height: auto;
    max-height: 62%;
    left: 50%;
    top: 46%;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.social-grid .social-card--logo-fallback:hover .social-card-thumb {
    transform: translate(-50%, -50%) scale(1.04);
    filter: none;
}

.social-grid .social-card-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 4;
    background: rgba(0, 0, 0, 0.85);
    color: var(--text-light);
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.social-grid .play-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    pointer-events: none;
    background-color: rgba(5, 5, 5, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.social-grid .play-overlay i {
    font-size: 20px;
    color: var(--text-light);
    line-height: 1;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.social-grid .social-card:hover .play-overlay {
    opacity: 1;
}

.social-grid .social-card:hover .play-overlay i {
    opacity: 1;
    transform: scale(1);
}

.social-grid .social-card-info {
    padding: 8px 10px 10px;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.social-grid .social-card-title {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary, #dce7ee);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.social-card-time {
    font-size: 0.62rem;
    color: var(--text-gray, #4b5563);
    margin-left: 4px;
}

.social-featured-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ig {
    position: relative;
    width: 200px;
    height: 308px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ig__stage {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 800px;
}

.ig__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform, opacity, filter;
}

.ig__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.ig__card.is-logo-fallback {
    background:
        radial-gradient(ellipse 70% 55% at 50% 38%, rgba(34, 158, 217, 0.2) 0%, transparent 62%),
        linear-gradient(165deg, var(--surface-800) 0%, var(--surface-900) 100%);
}

.ig__card.is-logo-fallback img {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 48%;
    height: auto;
    max-height: 42%;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.ig__card--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0) scale(0.5);
}

.ig__card--far-prev {
    opacity: 0.2;
    transform: translateX(-65%) scale(0.6) rotateY(15deg);
    filter: brightness(0.3);
    z-index: 1;
    pointer-events: none;
}

.ig__card--prev {
    opacity: 0.6;
    transform: translateX(-35%) scale(0.8) rotateY(10deg);
    filter: brightness(0.6);
    z-index: 2;
    cursor: pointer;
}

.ig__card--active {
    opacity: 1;
    transform: translateX(0) scale(1) rotateY(0deg);
    filter: brightness(1);
    z-index: 5;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
}

.ig__card--next {
    opacity: 0.6;
    transform: translateX(35%) scale(0.8) rotateY(-10deg);
    filter: brightness(0.6);
    z-index: 2;
    cursor: pointer;
}

.ig__card--far-next {
    opacity: 0.2;
    transform: translateX(65%) scale(0.6) rotateY(-15deg);
    filter: brightness(0.3);
    z-index: 1;
    pointer-events: none;
}

.ig__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 12, 22, 0.95) 0%, rgba(5, 12, 22, 0.05) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 12px;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.3s;
}

.ig__card--active .ig__card-overlay {
    opacity: 1;
}

.ig__card-icon {
    font-size: 1.3rem;
    color: var(--brand-red);
}

.ig__card-info p {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-light);
    line-height: 1.35;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ig__card-info span {
    font-size: 0.62rem;
    color: var(--text-gray);
    font-weight: 500;
}

.ig__nav {
    position: absolute;
    bottom: -42px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 10;
}

.ig__nav-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.ig__nav-btn:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: var(--text-light);
}

@media (max-width: 1100px) {
    .social-layout,
    .social-layout--grid-only,
    .social-layout--featured-only {
        grid-template-columns: 1fr;
    }

    .social-layout--grid-only .social-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .social-featured-card {
        flex-direction: row;
        overflow: hidden;
        justify-content: center;
    }

    .social-featured-item {
        flex-shrink: 0;
        width: 160px;
    }
}

@media (max-width: 1024px) {
    .social-grid,
    .social-layout--grid-only .social-grid {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .social-grid .social-card:nth-child(n + 5) {
        display: none;
    }

    .social-layout--grid-only .social-grid .social-card:nth-child(n + 5) {
        display: flex;
    }

    .social-layout--grid-only .social-grid .social-card:nth-child(n + 7) {
        display: none;
    }

    .social-grid .social-card-info {
        padding: 6px 8px 8px;
    }

    .social-grid .social-card-title {
        font-size: 0.62rem;
        -webkit-line-clamp: 2;
    }
}

/* Quick Actions Section */
.qa-section {
    margin: 20px 0;
}

.qa {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

.qa__card {
    background: var(--surface-900, #0d0d0d);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.qa__card:hover {
    background: var(--surface-800);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.qa__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.qa__lottie {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qa__lottie--gift,
.qa__lottie--gift .gift-box-svg {
    --gift-shadow: var(--bg-color);
    --gift-box: var(--brand-red);
    --gift-box-dark: var(--brand-red-dark);
    --gift-box-mid: var(--brand-red-mid);
    --gift-bow-dark: var(--brand-red-dark);
    --gift-bow-light: var(--brand-red-hover);
    --gift-ribbon: var(--text-on-dark);
    --gift-ribbon-tint: var(--brand-red-pale);
    --gift-sparkle: var(--text-light);
    --gift-shine: var(--surface-800);
    --gift-stripe-pale: var(--brand-red-pale);
    --gift-stripe-soft: var(--brand-red-soft);
}

.qa__lottie--gift {
    overflow: visible;
    animation: gift-box-float 3.6s ease-in-out infinite;
}

.qa__lottie--gift .gift-box-svg,
.qa__lottie--gift > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: none;
}

.qa__lottie--gift .gift-sparkle {
    display: block;
    pointer-events: none;
    transform-box: view-box;
    transform-origin: var(--ox) var(--oy);
    animation: gift-sparkle-twinkle 5s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
}

.qa__lottie--gift .gift-sparkle--star {
    animation-duration: 4.8s;
}

.qa__lottie--gift .gift-sparkle--rev {
    animation-name: gift-sparkle-twinkle-rev;
}

@keyframes gift-sparkle-twinkle {
    0%,
    100% {
        opacity: 0.2;
        transform: rotate(0deg) scale(0.12);
    }

    50% {
        opacity: 1;
        transform: rotate(180deg) scale(0.82);
    }
}

@keyframes gift-sparkle-twinkle-rev {
    0%,
    100% {
        opacity: 0.2;
        transform: rotate(0deg) scale(0.12);
    }

    50% {
        opacity: 1;
        transform: rotate(-180deg) scale(0.82);
    }
}

@keyframes gift-box-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.qa__lottie--wheel,
.qa__lottie--wheel .wheel-svg {
    --wheel-stand: var(--bg-color);
    --wheel-stand-deep: var(--surface-900);
    --wheel-stand-accent: var(--brand-red-dark);
    --wheel-segment-primary: var(--brand-red);
    --wheel-segment-secondary: var(--brand-red-mid);
    --wheel-segment-accent: var(--brand-red-hover);
    --wheel-segment-soft: var(--brand-red-soft);
    --wheel-segment-pale: var(--brand-red-pale);
    --wheel-segment-light: var(--brand-red-pale);
    --wheel-segment-contrast: var(--surface-700);
    --wheel-highlight: var(--text-light);
}

.qa__lottie--wheel {
    overflow: visible;
    animation: wheel-float 3.6s ease-in-out infinite;
}

.qa__lottie--wheel .wheel-svg,
.qa__lottie--wheel > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: none;
}

.qa__lottie--wheel .wheel-disc-spin {
    transform-origin: 0 0;
    animation: wheel-spin 7s linear infinite;
    will-change: transform;
}

@keyframes wheel-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes wheel-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.qa__lottie--coin {
    overflow: visible;
    perspective: 160px;
    animation: coin-float 3.6s ease-in-out infinite;
}

.qa__lottie--coin img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-style: preserve-3d;
    animation: coin-turn 4.2s ease-in-out infinite;
    will-change: transform;
}

@keyframes coin-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes coin-turn {
    0%,
    100% {
        transform: rotateY(-14deg) scale(1);
    }

    50% {
        transform: rotateY(14deg) scale(1.06);
    }
}

.qa__lottie svg,
.qa__lottie img {
    width: 100%;
    height: 100%;
}

.qa__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.qa__text b {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 700;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa__text span {
    font-size: 12px;
    color: var(--text-gray);
    font-weight: 500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa__btn {
    background: var(--brand-red);
    color: var(--text-light);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42%;
    flex: 0 0 auto;
}

.qa__btn:hover {
    background: var(--brand-red-hover);
    box-shadow: 0 4px 12px rgba(var(--primary), 0.3);
}

.qa__btn.is-claimed,
.qa__btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-gray, #888);
    cursor: not-allowed;
    box-shadow: none;
}

.qa__btn.is-claimed:hover,
.qa__btn:disabled:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.qa__btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

a.qa__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

/* Ticket / event / coin — kutu & çark ile aynı root renk dili */
.qa__lottie--ticket,
.qa__lottie--ticket .qa-ticket-svg {
    --qa-ticket-light: var(--brand-red-hover);
    --qa-ticket-dark: var(--brand-red-dark);
    --qa-ticket-shadow: var(--bg-color);
    --qa-ticket-dash: var(--text-on-dark);
    --qa-ticket-line: var(--text-on-dark);
    --qa-ticket-dot: var(--text-on-dark);
}

.qa__lottie--ticket {
    overflow: visible;
    animation: gift-box-float 3.6s ease-in-out infinite;
}

.qa__lottie--event,
.qa__lottie--event .qa-event-svg {
    --qa-event-top: var(--brand-red);
    --qa-event-top-dark: var(--brand-red-dark);
    --qa-event-body: var(--surface-800);
    --qa-event-pin: var(--text-light);
    --qa-event-cell: var(--brand-red);
    --qa-event-cell-soft: var(--brand-red-soft);
    --qa-event-accent: var(--brand-red-pale);
    --qa-event-shadow: var(--bg-color);
}

.qa__lottie--event {
    overflow: visible;
    animation: gift-box-float 3.6s ease-in-out infinite;
}

.qa__lottie--event .qa-event-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: gift-sparkle-twinkle 4.8s ease-in-out infinite;
}

.qa__lottie--coin .qa-coin-svg {
    --qa-coin-light: var(--brand-red-pale);
    --qa-coin-mid: var(--brand-red);
    --qa-coin-dark: var(--brand-red-dark);
    --qa-coin-rim: var(--brand-red-dark);
    --qa-coin-ring: var(--text-on-dark);
    --qa-coin-core: var(--brand-red-mid);
    --qa-coin-mark: var(--text-on-dark);
    --qa-coin-shadow: var(--bg-color);
}

.qa__lottie--coin .qa-coin-disc {
    transform-origin: 32px 30px;
    transform-box: view-box;
    animation: wheel-spin 7s linear infinite;
}

.qa__lottie--ticket > svg,
.qa__lottie--event > svg,
.qa__lottie--coin > svg.qa-coin-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Site sayfası ikonları — kutu/çark float + brand renkler */
.qa__lottie--page {
    overflow: visible;
    animation: gift-box-float 3.6s ease-in-out infinite;
    --qa-page-fill: var(--brand-red);
    --qa-page-dark: var(--brand-red-dark);
    --qa-page-mid: var(--brand-red-mid);
    --qa-page-light: var(--text-on-dark);
    --qa-page-shadow: var(--bg-color);
}

.qa__lottie--page > svg,
.qa__lottie--page .qa-page-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Sosyal medya — statik, marka renkli, animasyonsuz */
.qa__lottie--social {
    overflow: visible;
    animation: none;
}

.qa__lottie--social > svg,
.qa__lottie--social .qa-social-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    border-radius: 12px;
}

@media (max-width: 1024px) {
    .qa {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 148px;
        justify-content: stretch;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        max-width: 100%;
    }

    .qa__card {
        width: 100%;
        max-width: 100%;
        height: 148px;
        min-height: 148px;
        max-height: 148px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 10px 6px 8px;
        gap: 4px;
        background: var(--surface-800);
        box-sizing: border-box;
        overflow: hidden;
        align-self: stretch;
    }

    .qa__card:hover {
        transform: none;
    }

    .qa__left {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .qa__lottie {
        width: 48px;
        height: 48px;
        margin: 0 auto;
        flex-shrink: 0;
        overflow: hidden;
    }

    .qa__text {
        align-items: center;
        width: 100%;
        max-width: 100%;
        gap: 2px;
        min-width: 0;
        overflow: hidden;
    }

    .qa__text b,
    .qa__text span {
        display: block;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
        overflow-wrap: normal;
    }

    .qa__text b {
        font-size: 0.65rem;
        line-height: 1.2;
    }

    .qa__text span {
        font-size: 0.55rem;
        line-height: 1.2;
        color: var(--text-gray);
        opacity: 0.55;
    }

    .qa__btn,
    a.qa__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        margin-top: auto;
        padding: 6px 4px;
        font-size: 0.55rem;
        font-weight: 700;
        border-radius: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 0 auto;
        box-sizing: border-box;
    }
}

@media (max-width: 380px) {
    .qa {
        gap: 4px;
        grid-auto-rows: 148px;
    }

    .qa__card {
        padding: 8px 4px 6px;
    }

    .qa__lottie {
        width: 42px;
        height: 42px;
    }

    .qa__text b {
        font-size: 0.58rem;
    }

    .qa__text span {
        font-size: 0.5rem;
    }

    .qa__btn,
    a.qa__btn {
        font-size: 0.5rem;
        padding: 5px 3px;
    }
}
body { overflow-x: hidden; }
.social-layout { overflow-x: hidden; width: 100%; box-sizing: border-box; }