/* ── Pagination — Sayfaya Git ────────────────────────────── */
.fi-pagination-goto {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 4px;
}

.fi-pagination-goto-label,
.fi-pagination-goto-total {
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
    white-space: nowrap;
}

.dark .fi-pagination-goto-label,
.dark .fi-pagination-goto-total {
    color: rgb(var(--gray-400));
}

.fi-pagination-goto-wrapper {
    width: 4rem !important;
}

.fi-pagination-goto-wrapper input {
    text-align: center;
    -moz-appearance: textfield;
}

.fi-pagination-goto-wrapper input::-webkit-outer-spin-button,
.fi-pagination-goto-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Member Col (tek blade) ──────────────────────────────── */
.mc-wrap {
    width: 100%;
    padding: 16px 0;
}

/* Skeleton */
.mc-skeleton {
    display: flex;
    gap: 16px;
    padding: 8px 0;
}

.mc-skeleton__photos {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.mc-skeleton__photo {
    flex: 1;
    max-width: 378px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #e5e7eb;
}

.mc-skeleton__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding-top: 8px;
}

.mc-skeleton__line {
    height: 12px;
    border-radius: 4px;
    background: #e5e7eb;
}

/* Grid ana layout */
.mc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

/* Sütun 1: Fotoğraflar */
.mc-company {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

.mc-photos {
    display: flex;
    gap: 6px;
}

.mc-photo-wrap {
    flex: 1;
    min-width: 0;
}

.mc-photo {
    width: 100%;
    max-width: 378px;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.mc-photo--gallery {
    cursor: zoom-in;
}

/* Sütun 2: Bilgi */
.mc-col-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mc-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-name-row__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mc-fullname {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.mc-meta {
    font-size: 13px;
    color: #6b7280;
}

/* Sosyal linkler */
.mc-social-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 2px;
}

/* Özellikler + Düzenle alt satır */
.mc-bottom-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
}

.mc-resources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.mc-resource-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.mc-links-btn {
    margin-top: 8px;
}

.mc-static-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

/* Linkler overlay */
.mc-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.mc-overlay__card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 320px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
}

.mc-overlay__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mc-overlay__title {
    font-weight: 600;
    font-size: 15px;
}

.mc-overlay__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 4px;
    line-height: 1;
}

.mc-overlay__close svg {
    width: 18px;
    height: 18px;
}

.mc-overlay__loading {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.mc-overlay__spinner {
    width: 24px;
    height: 24px;
}

.mc-overlay__links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-overlay__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    transition: background 0.1s;
}

.mc-overlay__link:hover {
    background: #f9fafb;
}

.mc-overlay__link--google {
    color: #9ca3af;
}

.mc-overlay__icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Sütun 3: Yıldızlar + Aksiyonlar */
.mc-col-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Proje Karakterleri */
.mc-chars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.mc-char-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-char-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: #6b7280;
}

.mc-char-label.is-selected {
    color: #920c16;
    font-weight: 600;
}

.mc-char-desc {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.3;
}

.mc-char-checkbox {
    width: 14px;
    height: 14px;
    accent-color: #920c16;
    cursor: pointer;
    flex-shrink: 0;
}

.mc-char-approves {
    display: flex;
    gap: 12px;
    padding-left: 20px;
}

.mc-char-approve {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #9ca3af;
    cursor: pointer;
}

/* Responsive: tablet — fotoğraflar + bilgi yan yana, aksiyonlar alt satır */
@media (min-width: 640px) {
    .mc-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mc-col-right {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;
    }
}

/* Responsive: desktop — 2 sütun layout */
@media (min-width: 1200px) {
    .mc-grid {
        grid-template-columns: 762px 1fr;
    }
}

/* ── end Member Col ───────────────────────────────────────── */

/* ── Member Stars Column ─────────────────────────────────── */
.ms-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

.ms-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    color: #6b7280;
    transition: color .15s;
}

.ms-checkbox-label input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #920c16;
    cursor: pointer;
    flex-shrink: 0;
}

.ms-checkbox-label.is-selected {
    color: #920c16;
    font-weight: 600;
}

.ms-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.ms-stars.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.ms-stars button {
    background: none;
    border: none;
    padding: 1px;
    cursor: pointer;
    line-height: 1;
    display: flex;
}

.ms-stars button svg {
    width: 22px;
    height: 22px;
    fill: #d1d5db;
    transition: fill .1s;
}

.ms-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.ms-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ms-skeleton-check {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background: #e5e7eb;
    flex-shrink: 0;
}

.ms-skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: #e5e7eb;
    width: 110px;
}

.ms-stars button.is-active svg,
.ms-stars button.is-hover svg {
    fill: #f59e0b;
}

/* ── end Member Stars Column ─────────────────────────────── */

.ratings {
    position: relative;
    z-index: 1;
}

.ratings textarea.form-control {
    height: 80px;
    font-size: 14px;
}

.ratings .stars {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDcvMDMvMTNJ3Rb7AAACnklEQVRoge2XwW3bMBSGPxa9NxtIGzTAW8DdRL7o3A0qb+BrdNIm9QAm0G7gbJBMwB5MoVJNUSRFIXGqHwhkmXr68hOPNH9ljOEt9OlNqBs4RlrrSmtdpdZ/Ti0EGnvtUoqTHFunBVCkuk6d6mbi83rggdteSa5THDeB3+UDO9z2inatXFum1roESuAReAB29vp15n2/gRfgZK+/gIuIXLxgrfUO+Bnzn0fom4ic+pvRVNuB/QrQ/RB6A7bwLjN8b985krO5MsKd0ElwJvgk1AteCPdCYWI5/SutddQxRUTU3DOzG4hd01EKqQnZuaLBITUh4F0CeLYm5CDw6PjuFTjaz9+BLwE1I8VO9StwAEoRaUSkseMHO+aqcWq2qwcdfQCOIvIy8dwDV/c/YL6zvWDbnQ3QuH5hltQEreM1dH/n6g28gT8eWLVUqqVKrb+vtGidFkCR6vp+0uLAba8k1/eRFh1ue0W7dv4sqpaSjGnR1Fy8YNWyY8W0aGpO/c1oqu3AKmlxCL0BW3iXGb637xzJ2VwZ4U7oJDgTfBLqBS+Ee6EQeMpULVFHUVOzPC3aNR2lkJotLbr0vtKiqWlMTcNaaXHQ0QfgaGqcaVG1jNLibGcbYyb/eDIlT6bjyZS+51JqtrS4gTfw/wzWqkKrKrU8fQPR6gKAmDKlPM3x1WkBFKmu0xxf3fZR5jnFdbzjv257JbmOdzx22yvadZzjW7e9ol27HWtVkjEtIubiB2u1Y8W0iJhTfzOe6uvAKmlxCL0FX+FdZvjevnMkd3Plgzuh0+A88EmoH7wM7oVC6AaiVdwuI2Z5WrRrOk4BNVtadOl9pUXENIhpWCstDjr6ABwR40yLaDVKi7Od7U1/Z0pzpjNngtNiaM2WFj8++A+motm0NTqjmwAAAABJRU5ErkJggg==") repeat-x 0 0;
    width: 150px;
}

.ratings .stars:before,
.ratings .stars:after {
    display: table;
    content: "";
}

.ratings .stars:after {
    clear: both;
}

.ratings .stars input[type=radio] {
    position: absolute;
    opacity: 0;
}

.ratings .stars input[type=radio].star-5:checked ~ span {
    width: 100%;
}

.ratings .stars input[type=radio].star-4:checked ~ span {
    width: 80%;
}

.ratings .stars input[type=radio].star-3:checked ~ span {
    width: 60%;
}

.ratings .stars input[type=radio].star-2:checked ~ span {
    width: 40%;
}

.ratings .stars input[type=radio].star-1:checked ~ span {
    width: 20%;
}

.ratings .stars label {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: -99999rem;
    float: left;
    position: relative;
    z-index: 10;
    background: transparent !important;
    cursor: pointer;
}

.ratings .stars label:hover ~ span {
    background-position: 0 -30px;
}

.ratings .stars label.star-5:hover ~ span {
    width: 100% !important;
}

.ratings .stars label.star-4:hover ~ span {
    width: 80% !important;
}

.ratings .stars label.star-3:hover ~ span {
    width: 60% !important;
}

.ratings .stars label.star-2:hover ~ span {
    width: 40% !important;
}

.ratings .stars label.star-1:hover ~ span {
    width: 20% !important;
}

.ratings .stars span {
    display: block;
    width: 0;
    position: relative;
    top: 0;
    left: 0;
    height: 30px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDcvMDMvMTNJ3Rb7AAACnklEQVRoge2XwW3bMBSGPxa9NxtIGzTAW8DdRL7o3A0qb+BrdNIm9QAm0G7gbJBMwB5MoVJNUSRFIXGqHwhkmXr68hOPNH9ljOEt9OlNqBs4RlrrSmtdpdZ/Ti0EGnvtUoqTHFunBVCkuk6d6mbi83rggdteSa5THDeB3+UDO9z2inatXFum1roESuAReAB29vp15n2/gRfgZK+/gIuIXLxgrfUO+Bnzn0fom4ic+pvRVNuB/QrQ/RB6A7bwLjN8b985krO5MsKd0ElwJvgk1AteCPdCYWI5/SutddQxRUTU3DOzG4hd01EKqQnZuaLBITUh4F0CeLYm5CDw6PjuFTjaz9+BLwE1I8VO9StwAEoRaUSkseMHO+aqcWq2qwcdfQCOIvIy8dwDV/c/YL6zvWDbnQ3QuH5hltQEreM1dH/n6g28gT8eWLVUqqVKrb+vtGidFkCR6vp+0uLAba8k1/eRFh1ue0W7dv4sqpaSjGnR1Fy8YNWyY8W0aGpO/c1oqu3AKmlxCL0BW3iXGb637xzJ2VwZ4U7oJDgTfBLqBS+Ee6EQeMpULVFHUVOzPC3aNR2lkJotLbr0vtKiqWlMTcNaaXHQ0QfgaGqcaVG1jNLibGcbYyb/eDIlT6bjyZS+51JqtrS4gTfw/wzWqkKrKrU8fQPR6gKAmDKlPM3x1WkBFKmu0xxf3fZR5jnFdbzjv257JbmOdzx22yvadZzjW7e9ol27HWtVkjEtIubiB2u1Y8W0iJhTfzOe6uvAKmlxCL0FX+FdZvjevnMkd3Plgzuh0+A88EmoH7wM7oVC6AaiVdwuI2Z5WrRrOk4BNVtadOl9pUXENIhpWCstDjr6ABwR40yLaDVKi7Od7U1/Z0pzpjNngtNiaM2WFj8++A+motm0NTqjmwAAAABJRU5ErkJggg==") repeat-x 0 -60px;
    -webkit-transition: width 0.5s;
    -o-transition: width 0.5s;
    transition: width 0.5s;
}


/* Toolbar tam ekran overlay - butonları özgürce konumlandırmak için */
.viewer-toolbar {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    background: none !important;
    transform: none !important;
}

.viewer-toolbar > ul {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ortak buton stili */
.viewer-toolbar > ul > li {
    position: absolute !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: background-color .2s, transform .15s !important;
    float: none !important;
    overflow: hidden !important;
}

.viewer-toolbar > ul > li:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.viewer-toolbar > ul > li::before {
    transform: scale(1.3) !important;
    transform-origin: center !important;
    margin: 0 !important;
    display: block !important;
}

/* prev: sol kenar, dikey orta */
.viewer-toolbar > ul > li.viewer-prev {
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 52px !important;
}
.viewer-toolbar > ul > li.viewer-prev:hover {
    transform: translateY(-50%) scale(1.08) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* next: sağ kenar, dikey orta */
.viewer-toolbar > ul > li.viewer-next {
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 52px !important;
}
.viewer-toolbar > ul > li.viewer-next:hover {
    transform: translateY(-50%) scale(1.08) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Sağ üst grup: zoom+, zoom-, reset, play — close butonunun soluna yatay sıra */
.viewer-toolbar > ul > li.viewer-zoom-in,
.viewer-toolbar > ul > li.viewer-zoom-out,
.viewer-toolbar > ul > li.viewer-reset,
.viewer-toolbar > ul > li.viewer-play {
    top: 0.6rem !important;
    transform: none !important;
}
.viewer-toolbar > ul > li.viewer-zoom-in:hover,
.viewer-toolbar > ul > li.viewer-zoom-out:hover,
.viewer-toolbar > ul > li.viewer-reset:hover,
.viewer-toolbar > ul > li.viewer-play:hover {
    transform: scale(1.08) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* viewerjs close butonu sağ üstte ~40px yarıçaplı daire, köşede */
.viewer-toolbar > ul > li.viewer-play   { right: calc(42px + 0.75rem) !important; }
.viewer-toolbar > ul > li.viewer-reset  { right: calc(42px + 0.75rem + 44px + 0.5rem) !important; }
.viewer-toolbar > ul > li.viewer-zoom-out { right: calc(42px + 0.75rem + (44px + 0.5rem) * 2) !important; }
.viewer-toolbar > ul > li.viewer-zoom-in  { right: calc(42px + 0.75rem + (44px + 0.5rem) * 3) !important; }

/* viewer-large (play) normal boyut */
.viewer-toolbar > ul > .viewer-large {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
}
.viewer-toolbar > ul > .viewer-large::before {
    margin: 0 !important;
}

.viewer-one-to-one, .viewer-rotate-left, .viewer-rotate-right, .viewer-flip-horizontal, .viewer-flip-vertical {
    display: none !important;
}


#paginate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(0, 0, 0, 0.08);
    align-items: center;
    justify-content: center;
}

#paginate-overlay.active {
    display: flex;
}

#paginate-overlay .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid red;
    border-top-color: white;
    border-radius: 50%;
    animation: paginate-spin 0.7s linear infinite;
}

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


/*
.fi-ta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
}*/

/* Erkek: Elektrik Maviden Camgöbeğine (Çok Canlı) */
.text-gradient-male {
    background: linear-gradient(to right, #0072ff, #00c6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 25px;
    display: inline-block;
}

/* Kadın: Canlı Pembeden Mora (Çok Canlı) */
.text-gradient-female {
    background: linear-gradient(to right, #ec4899, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 25px;
    display: inline-block;
}

/* Cinsiyet seçilmemişse standart koyu renk */
.text-gradient-default {
    color: #1f2937;
    font-weight: 800;
    display: inline-block;
    font-size: 25px;
}

/* Karakter adı cinsiyet renkleri — AdminPanelProvider gender_blue / gender_pink hex */
.mc-char-name-male   { color: #347dc1; font-weight: 600; }
.mc-char-name-female { color: #c4679a; font-weight: 600; }