/* ============================================================
   Social Media Gallery — Frontend Styles  v1.1
   ============================================================ */

/* ── CSS custom properties (overridden via inline style on wrapper) ── */
.smg-wrapper {
    --smg-card-w:            280px;
    --smg-card-h:            360px;
    --smg-card-radius:       12px;
    --smg-card-gap:          16px;
    --smg-card-bg:           #ffffff;
    --smg-card-border-color: #e0e0e0;
    --smg-card-border-width: 1px;
    --smg-title-color:       #1a1a1a;
    --smg-desc-color:        #666;
    --smg-title-size:        14px;
    --smg-desc-size:         12px;
    --smg-gallery-bg:        #f8f8f8;
    --smg-gallery-padding:   32px;
    --smg-desktop-cards:     6;
    --smg-tablet-cards:      3;
    --smg-mobile-cards:      2;

    background: var(--smg-gallery-bg);
    padding: var(--smg-gallery-padding);
    border-radius: 8px;
    font-family: inherit;
    box-sizing: border-box;
    position: relative;
}

.smg-wrapper *, .smg-wrapper *::before, .smg-wrapper *::after {
    box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────── */
.smg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    padding-bottom: 20px;
}

.smg-header__title {
    font-size: clamp(13px, 2vw, 20px);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
    flex: 1 1 auto;
    line-height: 1.3;
    /* Başlık çok uzunsa kırpılsın, filter butonunu asla itmesin */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Filter bar ──────────────────────────────────────────────── */
.smg-filter-bar {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;       /* Header daraldığında bu alan asla küçülüp kaymasın */
    margin-left: auto;    /* Başlık ne kadar uzasa da sağda sabit kalsın */
}

/* Toggle button — varsayılan görünür tek ikon buton, her zaman sağda */
.smg-filter-toggle {
    background: none;
    border: 1px solid rgba(0,0,0,.14);
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 15px;
    color: #555;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}

.smg-filter-toggle:hover,
.smg-filter-toggle[aria-expanded="true"] {
    background: rgba(0,0,0,.06);
    color: #222;
    border-color: rgba(0,0,0,.22);
}

/* Açılır panel — varsayılan tamamen gizli (display:none), JS ile is-open eklenince görünür.
   Sağ kenara hizalı ve viewport genişliğini ASLA aşmaz; gerekirse ikonlar yeni satıra sarar. */
.smg-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    z-index: 30;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
}

.smg-filter-bar.is-open .smg-filter-panel {
    display: flex;
}

/* Panelin kapanmadan önce nereden açıldığını gösteren küçük ok */
.smg-filter-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 10px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid rgba(0,0,0,.10);
    border-top: 1px solid rgba(0,0,0,.10);
    transform: rotate(45deg);
}

.smg-filter-btn {
    background: none;
    border: none;
    padding: 7px 8px;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    border-radius: 6px;
    transition: transform .15s, opacity .15s, background .15s;
    opacity: .7;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.smg-filter-btn:hover  { opacity: 1; background: rgba(0,0,0,.06); transform: scale(1.08); }
.smg-filter-btn.is-active { opacity: 1; background: rgba(0,0,0,.08); }
.smg-filter-btn--all   { font-size: 16px; }

.smg-toggle-used {
    font-size: 14px !important;
    color: #888 !important;
    border-left: 1px solid #e2e2e2;
    margin-left: 2px;
}
.smg-toggle-used.is-active { color: #333 !important; }

.smg-filter-panel.only-used .smg-platform-icon[data-used="0"] { display: none; }

/* ── Mobil: panel ekrana sığsın, asla taşmasın ── */
@media (max-width: 480px) {
    .smg-filter-panel {
        right: -4px;
        max-width: calc(100vw - 16px);
    }
}

/* ── Carousel outer ──────────────────────────────────────────── */
.smg-carousel-outer {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 44px; /* room for nav buttons on each side */
}

.smg-carousel-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.95);
    box-shadow: 0 2px 10px rgba(0,0,0,.20);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
}

.smg-carousel-btn--prev { left: 0; }
.smg-carousel-btn--next { right: 0; }
.smg-carousel-btn:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.smg-carousel-btn:disabled { opacity: .25; pointer-events: none; }

/* ── Track ───────────────────────────────────────────────────── */
.smg-carousel-track-wrap {
    overflow: hidden;
    width: 100%;
}

.smg-carousel-track {
    display: flex;
    gap: var(--smg-card-gap);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
    align-items: flex-start;
}

/* ── Card ────────────────────────────────────────────────────── */
.smg-card {
    flex: 0 0 var(--smg-card-w);
    width: var(--smg-card-w);
    background: var(--smg-card-bg);
    border: var(--smg-card-border-width) solid var(--smg-card-border-color);
    border-radius: var(--smg-card-radius);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
    user-select: none;
}

.smg-wrapper.smg-shadow .smg-card {
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
}

.smg-card:hover { transform: translateY(-4px); }
.smg-wrapper.smg-shadow .smg-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.smg-card[data-hidden] { display: none; }

/* ── Card Thumbnail area ─────────────────────────────────────── */
.smg-card__thumb {
    position: relative;
    width: 100%;
    /* height driven by aspect ratio — keeps card proportional */
    aspect-ratio: 9 / 14;   /* default portrait-ish */
    overflow: hidden;
    background: #111;
    display: block;
}

/* Poster image (shown on card instead of iframe) */
.smg-card__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* fills card without distortion */
    display: block;
    transition: transform .3s;
}

.smg-card:hover .smg-card__poster { transform: scale(1.04); }

/* Platform-color gradient fallback when no poster */
.smg-card__thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255,255,255,.25);
}

/* Play-button overlay */
.smg-card__play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 54px;
    text-shadow: 0 2px 16px rgba(0,0,0,.6);
    background: rgba(0,0,0,.18);
    transition: background .2s;
    z-index: 2;
}

.smg-card:hover .smg-card__play-overlay { background: rgba(0,0,0,.32); }

/* Platform badge — bottom right corner */
.smg-card__platform-badge {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 19px;
    z-index: 4;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.55));
    line-height: 1;
    pointer-events: none;
}

/* ── Title overlay — bottom of thumb, semi-transparent gradient ── */
.smg-card__title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 32px 10px 10px 10px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.75) 100%);
    pointer-events: none;
}

.smg-card__title-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    word-break: break-word;
}

/* ── Card Info row ───────────────────────────────────────────── */
.smg-card__info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
    min-height: 62px;
}

/* ★ Avatar — always circular ───────────────────────────────── */
.smg-card__avatar {
    flex: 0 0 36px;
    width:  36px;
    height: 36px;
    border-radius: 50%;         /* ← circular */
    overflow: hidden;           /* ← clip to circle */
    object-fit: cover;
    display: block;
    border: 2px solid rgba(0,0,0,.06);
}

.smg-card__avatar--placeholder {
    flex: 0 0 36px;
    width:  36px;
    height: 36px;
    border-radius: 50%;         /* ← circular */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.smg-card__text {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.smg-card__account {
    display: block;
    font-size: var(--smg-title-size);
    font-weight: 700;
    color: var(--smg-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.smg-card__desc {
    margin: 2px 0 0;
    font-size: var(--smg-desc-size);
    color: var(--smg-desc-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.smg-no-posts {
    padding: 24px;
    text-align: center;
    color: #888;
}

/* ════════════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════════════ */
.smg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smg-lightbox[hidden] { display: none; }

.smg-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.90);
    cursor: pointer;
}

.smg-lightbox__content {
    position: relative;
    z-index: 1;
    width: min(92vw, 960px);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

/* ── Embed area ──────────────────────────────────────────────── */
.smg-lightbox__embed-wrap {
    flex: 1 1 auto;
    position: relative;
    /* 16:9 default — JS adjusts for portrait */
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

/* All embed types fill the box, keep aspect, never crop */
.smg-lightbox__embed-wrap iframe,
.smg-lightbox__embed-wrap video,
.smg-lightbox__embed-wrap embed,
.smg-lightbox__embed-wrap object,
.smg-lightbox__embed-wrap blockquote {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
}

/* Portrait (9:16) override */
.smg-lightbox__content.is-portrait {
    max-width: 420px;
    width: min(92vw, 420px);
}

.smg-lightbox__content.is-portrait .smg-lightbox__embed-wrap {
    aspect-ratio: 9 / 16;
}

/* ── Account overlay ─────────────────────────────────────────── */
.smg-lightbox__account-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px 6px 8px;
    border-radius: 40px;
    pointer-events: auto;
}

.smg-lightbox__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.4);
    display: block;
    flex: 0 0 36px;
}

.smg-lightbox__page-link {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity .15s;
}

.smg-lightbox__page-link:hover { opacity: .75; color: #fff; }

.smg-lightbox__account-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Lightbox nav/close buttons ──────────────────────────────── */
.smg-lightbox__close,
.smg-lightbox__prev,
.smg-lightbox__next {
    position: fixed;
    /* Lightbox'ın kendi z-index'inden (999999) daha yüksek olmalı —
       position:fixed elemanlar ayrı bir stacking context oluşturduğu için
       site menüsü/üst bar gibi sabit öğeler bu butonların üstünde kalabiliyordu. */
    z-index: 1000000;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background .15s, transform .15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.smg-lightbox__close { top: 16px; right: 16px; font-size: 22px; }
.smg-lightbox__prev  { left: 16px; top: 50%; transform: translateY(-50%); }
.smg-lightbox__next  { right: 16px; top: 50%; transform: translateY(-50%); }

.smg-lightbox__close:hover { background: rgba(255,255,255,.3); }
.smg-lightbox__prev:hover,
.smg-lightbox__next:hover  { background: rgba(255,255,255,.3); }

.smg-lightbox__prev:disabled,
.smg-lightbox__next:disabled { opacity: .2; pointer-events: none; }

/* Loading spinner */
.smg-lightbox__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    gap: 12px;
    background: rgba(0,0,0,.8);
    z-index: 5;
}

.smg-lightbox__spinner i { font-size: 30px; animation: smg-spin 1s linear infinite; }

@keyframes smg-spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .smg-card {
        flex-basis: calc( (100% - var(--smg-card-gap) * (var(--smg-tablet-cards) - 1)) / var(--smg-tablet-cards) );
        width:       calc( (100% - var(--smg-card-gap) * (var(--smg-tablet-cards) - 1)) / var(--smg-tablet-cards) );
    }
}

@media (max-width: 640px) {
    .smg-wrapper { padding: 16px 12px; }
    /* Başlık + filter butonu mobilde de aynı satırda kalsın, buton sağa sabit dursun */
    .smg-header  { flex-direction: row; align-items: center; flex-wrap: nowrap; }

    .smg-card {
        flex-basis: calc( (100% - var(--smg-card-gap) * (var(--smg-mobile-cards) - 1)) / var(--smg-mobile-cards) );
        width:       calc( (100% - var(--smg-card-gap) * (var(--smg-mobile-cards) - 1)) / var(--smg-mobile-cards) );
    }

    .smg-lightbox__content { width: 98vw; border-radius: 8px; }
    .smg-lightbox__prev  { left: 6px; }
    .smg-lightbox__next  { right: 6px; }
    .smg-lightbox__close { top: 8px; right: 8px; }
    .smg-carousel-outer { padding: 0 36px; }
    .smg-carousel-btn--prev { left: 0; }
    .smg-carousel-btn--next { right: 0; }
}

/* ── Focus ring ──────────────────────────────────────────────── */
.smg-card__thumb:focus-visible {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
}