/**
 * Referans detay — açık zemin + koyu case panel
 */
.ref-case {
    --ref-bg: var(--theme-bg, #f5f8f8);
    --ref-bg-soft: var(--theme-card-bg, #ffffff);
    --ref-ink: var(--theme-text, #0f172a);
    --ref-muted: var(--theme-text-muted, #64748b);
    --ref-border: var(--theme-card-border, var(--theme-border, #dbe5e8));
    --ref-accent: var(--theme-primary, #2563eb);
    --ref-radius: var(--theme-card-radius, calc(var(--theme-radius, 8px) + 4px));
    background: var(--theme-bg, #f5f8f8);
    color: var(--ref-ink);
    overflow-x: clip;
    padding: var(--page-content-start-space, var(--ds-stack)) 0 var(--ds-section-y-lg);
}

.ref-case__main,
.ref-case__hero,
.ref-case__content {
    background: transparent;
}

.ref-case__wrap {
    width: var(--layout-container-wide);
    margin-inline: auto;
    background: transparent;
}

/* Ana grid */
.ref-case__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--ds-stack);
    align-items: start;
    background: transparent;
}

/* Sol: görseller + sekmeler */
.ref-case__images {
    min-width: 0;
    background: transparent;
}

.ref-case::before,
.ref-case::after,
.ref-case__wrap::before,
.ref-case__wrap::after,
.ref-case__grid::before,
.ref-case__images::before {
    content: none;
}

.ref-case__device {
    position: relative;
    min-height: clamp(320px, 42vw, 560px);
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.ref-case__cover {
    display: block;
    width: 100%;
    border-radius: var(--ref-radius);
    object-fit: cover;
    object-position: top center;
    aspect-ratio: 16 / 10;
}

.ref-case__placeholder {
    display: grid;
    place-items: center;
    min-height: clamp(280px, 38vw, 480px);
    border-radius: var(--ref-radius);
    background: color-mix(in srgb, var(--theme-card-bg, #ffffff) 78%, transparent);
    border: 1px solid var(--theme-card-border, var(--theme-border, #dbe5e8));
    color: color-mix(in srgb, var(--theme-text, #0f172a) 18%, transparent);
    font-size: 3rem;
}

/* Sekmeler */
.ref-case__tabs {
    margin-top: 0.5rem;
}

.ref-case__tab-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 34px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}

.ref-case__tab-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 18px;
    border-radius: var(--theme-button-radius, 8px);
    border: 1px solid var(--theme-card-border, var(--theme-border, #dbe5e8));
    background: color-mix(in srgb, var(--theme-card-bg, #ffffff) 76%, transparent);
    color: var(--theme-text-muted, #64748b);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ref-case__tab-btn:hover {
    color: var(--theme-text, #0f172a);
    border-color: var(--ref-accent, var(--refs-accent));
}

.ref-case__tab-btn.is-active {
    background: var(--ref-button-bg, var(--ref-accent));
    border-color: var(--ref-button-bg, var(--ref-accent));
    color: var(--ref-button-text, #fff);
}

.ref-case__tab-btn:focus-visible {
    outline: 2px solid var(--ref-accent, var(--refs-accent));
    outline-offset: 2px;
}

.ref-case__tab-panel {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.ref-case__tab-panel.is-active {
    display: flex;
}

.ref-case__tab-card {
    margin: 0;
    border-radius: var(--ref-radius);
    overflow: hidden;
    border: 1px solid var(--theme-card-border, var(--theme-border, #dbe5e8));
    background: var(--theme-card-bg, #ffffff);
    box-shadow: var(--theme-card-shadow, 0 16px 48px color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
}

.ref-case__tab-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.ref-case__tab-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.35s ease;
}

.ref-case__tab-thumb:hover img {
    transform: scale(1.02);
}

/* Premium surface — sağ panel + müşteri yorumu kartı */
.ref-case__surface,
.ref-case__panel,
.ref-testimonial__card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-radius: var(--ref-radius);
    color: var(--theme-text, #0f172a);
    background: var(--theme-card-bg, #ffffff);
    border: 1px solid var(--theme-card-border, var(--theme-border, #dbe5e8));
    box-shadow: var(--theme-card-shadow-hover, 0 28px 64px color-mix(in srgb, var(--theme-text, #0f172a) 10%, transparent));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ref-case__surface::before,
.ref-case__panel::before,
.ref-testimonial__card::before {
    content: none;
}

.ref-case__panel > *,
.ref-testimonial__card > * {
    position: relative;
    z-index: 1;
}

/* Sağ: premium sticky panel */
.ref-case__panel {
    position: sticky;
    top: calc(var(--header-height, 72px) + 1.25rem);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ref-case__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--ds-stack);
}

.ref-case__back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--theme-card-border, var(--theme-border, #dbe5e8));
    background: transparent;
    color: var(--theme-text, #0f172a);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ref-case__back:hover {
    background: var(--theme-overlay-soft, color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
    border-color: var(--theme-card-border, var(--theme-border, #dbe5e8));
}

.ref-case__brand-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.15rem;
    margin-bottom: var(--ds-stack-sm);
}

.ref-case__brand-divider {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    min-height: 52px;
    background: color-mix(in srgb, var(--theme-border, #dbe5e8) 88%, transparent);
}

.ref-case__brand-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(42%, 180px);
}

.ref-case__breadcrumb {
    flex: 1;
    min-width: 0;
}

.ref-case__breadcrumb .page-breadcrumb {
    margin-bottom: 0;
}

.ref-case__breadcrumb .page-breadcrumb__list {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
}

.ref-case__breadcrumb .page-breadcrumb__link,
.ref-case__breadcrumb .page-breadcrumb__current {
    color: var(--theme-text-muted, #64748b);
    text-decoration: none;
}

.ref-case__breadcrumb .page-breadcrumb__link:hover {
    color: var(--theme-text, #0f172a);
}

.ref-case__breadcrumb .page-breadcrumb__item:not(:last-child)::after {
    color: color-mix(in srgb, var(--theme-text-muted, #64748b) 60%, transparent);
}

.ref-case__title {
    margin: 0;
    flex: 1 1 220px;
    max-width: 11ch;
    color: var(--theme-text, #0f172a);
    font-size: clamp(30px, 3.5vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: var(--theme-heading-weight, 300);
    text-wrap: balance;
    font-feature-settings: "kern" 1, "liga" 1;
}

@media (max-width: 768px) {
    .ref-case__title {
        max-width: 100%;
    }
}

.ref-case__logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}

.ref-case__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1.35rem;
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.65rem);
    padding-bottom: clamp(1rem, 2vw, 1.35rem);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border, #dbe5e8) 88%, transparent);
}

.ref-case__meta-item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
}

.ref-case__meta-item dt,
.ref-case__meta-item dd {
    margin: 0;
    display: inline;
}

.ref-case__meta-label {
    color: var(--theme-text-muted, #64748b);
    font-weight: 500;
}

.ref-case__meta-value {
    color: var(--theme-text, #0f172a);
    font-weight: var(--theme-heading-weight, 300);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
}

.ref-case__client-name {
    color: inherit;
    overflow-wrap: anywhere;
}

.ref-case__client-sep {
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 400;
}

.ref-case__client-company {
    color: var(--theme-text-muted, #64748b);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ref-case__desc {
    margin: 0 0 clamp(1.15rem, 2.2vw, 1.5rem);
    max-width: 52ch;
    line-height: 1.65;
    color: var(--theme-text-muted, #64748b);
    font-size: 0.98rem;
    font-weight: 400;
}

.ref-case__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 0 clamp(1.35rem, 2.5vw, 1.85rem);
    padding: 0;
    list-style: none;
}

.ref-case__tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    line-height: 1;
}

.ref-case__tag-hash {
    color: var(--ref-button-bg, var(--ref-accent, var(--refs-accent)));
    font-weight: var(--theme-heading-weight, 300);
}

.ref-case__tag-text {
    color: var(--theme-text-muted, #64748b);
    font-weight: 600;
}

.ref-case__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.85rem;
    margin-top: auto;
    padding-top: 0.35rem;
}

/* Düz galeri (özel tab yokken) */
.ref-case__gallery-flat {
    margin-top: 0.5rem;
}

.ref-case__gallery-flat-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ref-case__content-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Sol kolon — mockup, galeri, müşteri yorumu */
.ref-case__main-col {
    grid-column: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ref-case__testimonial-col {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ref-testimonial {
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    width: 100%;
    max-width: 100%;
}

.ref-testimonial__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Glow HTML korunur; surface ::before ile aynı dil */
.ref-testimonial__glow {
    display: none;
}

.ref-testimonial__quote {
    position: relative;
    z-index: 1;
    margin: 0 0 clamp(0.5rem, 1.2vw, 0.85rem);
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 0.9;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    color: color-mix(in srgb, var(--theme-primary, #2563eb) 26%, transparent);
    pointer-events: none;
    user-select: none;
}

.ref-testimonial__text {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    max-width: min(52ch, 100%);
}

.ref-testimonial__text p {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
    font-style: italic;
    font-weight: 400;
    color: var(--theme-text, #0f172a);
}

.ref-testimonial__footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(0.65rem, 1.5vw, 1rem);
    margin-top: clamp(1rem, 2vw, 1.5rem);
    padding-top: 0;
    border-top: 0;
}

.ref-testimonial__logo-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-testimonial__logo {
    display: block;
    max-width: min(140px, 36vw);
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.92;
}

.ref-testimonial__divider {
    flex: 0 0 auto;
    display: block;
    width: 1px;
    height: clamp(44px, 8vw, 56px);
    margin: 0;
    background: linear-gradient(
        180deg,
        transparent,
        color-mix(in srgb, var(--theme-border, #dbe5e8) 80%, transparent),
        transparent
    );
}

.ref-testimonial__person {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
    min-width: 0;
    text-align: left;
}

.ref-testimonial__name {
    font-size: 1.02rem;
    font-weight: var(--theme-heading-weight, 300);
    color: var(--theme-text, #0f172a);
    letter-spacing: 0.01em;
}

.ref-testimonial__role,
.ref-testimonial__company {
    font-size: 0.9rem;
    color: var(--theme-text-muted, #64748b);
    line-height: 1.45;
}

/* İçerik */
.ref-case__content-box {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--ref-radius);
    background: var(--theme-card-bg, #ffffff);
    border: 1px solid var(--theme-card-border, var(--theme-border, #dbe5e8));
    line-height: 1.75;
    color: var(--theme-text-muted, #64748b);
    box-shadow: var(--theme-card-shadow, 0 16px 48px color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
}

.ref-case__content-title {
    margin: 0 0 1rem;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    font-weight: var(--theme-heading-weight, 300);
    color: var(--theme-text, #0f172a);
}

.ref-case__content-box h2,
.ref-case__content-box h3 {
    color: var(--theme-text, #0f172a);
}

.ref-case__content-box a {
    color: var(--ref-accent);
}

.ref-case__content-box img {
    max-width: 100%;
    height: auto;
    border-radius: var(--theme-radius, 8px);
}

/* Lightbox */
.ref-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.ref-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 20, 0.9);
}

.ref-lightbox__panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1.5rem;
}

.ref-lightbox__figure {
    margin: 0;
    max-width: min(1200px, 92vw);
    width: 100%;
}

.ref-lightbox__image {
    display: block;
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--theme-radius, 8px);
}

.ref-lightbox__caption {
    margin-top: 0.75rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
}

.ref-lightbox__caption[hidden] {
    display: none;
}

.ref-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}

.ref-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}

.ref-lightbox__nav--prev { left: 1rem; }
.ref-lightbox__nav--next { right: 1rem; }

/* Responsive */
@media (max-width: 1024px) {
    .ref-case__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ref-case__panel {
        position: static;
    }

    .ref-testimonial__footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ref-testimonial__person {
        align-items: center;
        text-align: center;
    }

    .ref-testimonial__divider {
        width: min(120px, 40%);
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            color-mix(in srgb, var(--theme-border, #dbe5e8) 80%, transparent),
            transparent
        );
    }
}

@media (max-width: 640px) {
    .ref-case__actions {
        flex-direction: column;
    }

    .ref-circle-btn {
        width: 100%;
        flex-basis: auto;
    }

    .ref-case__brand-divider {
        display: none;
    }

    .ref-case__brand-logo {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ref-case__tab-thumb img,
    .ref-case__tab-thumb:hover img,
    .ref-circle-btn,
    .ref-case__tab-btn {
        transition: none;
        transform: none;
    }
}