/* ═══════════════════════════════════════════
   LIS DE JUIN, Product Detail Page Styles
═══════════════════════════════════════════ */

/* ── Product Page ── */
.product-page {
    padding-top: 100px;
}

/* ── Breadcrumb ── */
.breadcrumb {
    padding: 20px 0 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.breadcrumb a {
    color: var(--clr-text-dim);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--clr-rose);
}

.breadcrumb-sep {
    color: var(--clr-text-dim);
    opacity: 0.5;
    font-size: 14px;
}

.breadcrumb-current {
    color: var(--clr-rose);
}

/* ── Product Hero ── */
.product-hero {
    padding-bottom: var(--section-padding);
}

.product-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* ── Gallery ── */
/* SUTUN TASMASI (2026-08-08): kucuk resim seridi tek satirda 9 x 80px + bosluk
   = 816px yer kapliyordu. .product-gallery bir grid ogesi ve varsayilan
   min-width: auto ile duruyordu; grid ogesinin otomatik minimumu min-content
   oldugu icin 1.1fr sutunu 816px'in altina INEMIYORDU. Seritteki
   overflow-x: auto hic devreye girmiyordu (clientWidth = scrollWidth = 816),
   sutun sisiyor ve sagdaki bilgi sutunu 224px'e eziliyordu. 12 urunun 11'i
   etkileniyordu, tek istisna tek fotografli Luce Bralet.
   min-width: 0 kilit satir: sutun kucululebilir olunca serit gercekten kayar. */
.product-gallery {
    min-width: 0;
    /* Buyuk gorselin genisligi tek kaynaktan: serit de ayni sinira uyuyor,
       boylece serit fotografin altinda kaliyor, sutunun degil. */
    --galeri-w: calc(min(78vh, 780px) * 2 / 3);
}

.gallery-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Cerceve sabit kalir (thumbnail'lar arasi gecerken ziplamasin), gorsel
       icine SIGDIRILIR. Fotograflar tek oranda degil, cover kirpiyordu. */
    aspect-ratio: 2 / 3;
    background: var(--clr-noir-card);
    /* YUKSEKLIK SINIRI (2026-08-02): sinirsizken cerceve sutun genisligine
       gore buyuyup 1086px'e cikiyordu, yani tek fotograf ekrandan tasiyordu.
       Sinir GENISLIGE cevriliyor (2:3 orandan): yalnizca max-height verilseydi
       oran bozulur, gorselin iki yaninda mektup kutusu boslugu kalirdi. */
    max-height: min(78vh, 780px);
    max-width: var(--galeri-w);
    margin-inline: auto;
}

.gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* cover degil: oran ne olursa olsun kirpma sifir */
    transition: transform var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
    .gallery-main:hover .gallery-main-img {
        transform: scale(1.04);
    }
}

.gallery-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-rose);
    background: rgba(14, 14, 14, 0.8);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border);
}

.gallery-thumbnails {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* Serit ASLA buyuk gorselden genis olmasin: sutun ~545px olsa da fotograf
       416-520px arasinda ve ortali duruyor, serit de onunla hizalaniyor. */
    max-width: var(--galeri-w);
    margin-inline: auto;
    /* Snap'lenen ve klavyeyle odaklanan kart solma bolgesinin altinda kalmasin. */
    scroll-padding-inline: 24px;
    /* Kaydirilabilirlik ipucu: yalnizca o yonde devam varsa kenar soluyor.
       Sinifi product.js scroll konumuna gore takiyor. Yarim gorunen kart
       birincil ipucu, bu ikincil; serit alti scrollbar veya ikinci bir ok
       cifti bu sayfanin sakin diline gurultu katardi. */
    --solma-sol: 0px;
    --solma-sag: 0px;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 var(--solma-sol),
        #000 calc(100% - var(--solma-sag)), transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0, #000 var(--solma-sol),
        #000 calc(100% - var(--solma-sag)), transparent 100%);
}

.gallery-thumbnails.solma-sol { --solma-sol: 24px; }
.gallery-thumbnails.solma-sag { --solma-sag: 24px; }

.gallery-thumbnails::-webkit-scrollbar {
    display: none;
}

.gallery-thumb {
    /* div -> button oldu, tarayici varsayilanlarini sifirla */
    appearance: none;
    background: none;
    padding: 0;
    font: inherit;
    display: block;
    flex: 0 0 auto;
    width: 80px;
    height: 120px;   /* 2:3 */
    scroll-snap-align: start;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    /* 0.5 porselen zeminde "devre disi" okunuyordu; 0.65'te secili olan hala
       net baskin ama digerleri pasif degil, secilebilir gorunuyor. */
    opacity: 0.65;
}

.gallery-thumb.active {
    border-color: var(--clr-rose);
    opacity: 1;
}

.gallery-thumb:hover {
    opacity: 0.9;
}

/* Odak halkasi yoktu: klavyeyle gezen kullanici seritte nerede oldugunu
   goremiyordu. Sitenin geri kalaniyla ayni dil (bkz. .product-category a). */
.gallery-thumb:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: 2px;
    opacity: 1;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

/* ── Product Info ── */
.product-info {
    position: sticky;
    top: 120px;
}

.product-category {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--clr-rose-text);
    display: block;
    margin-bottom: 16px;
}

.product-title {
    font-family: var(--font-heading);
    font-size: clamp(26px, 2.6vw, 36px);   /* feemuse referansi: dev baslik yerine orta boy */
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-ink);   /* koyu tema kalintisi --clr-cream idi */
    margin-bottom: 12px;
    line-height: 1.2;
}

.product-tagline {
    font-family: var(--font-body);
    font-size: 20px;
    font-style: italic;
    color: var(--clr-text-muted);
    font-weight: 300;
}

.product-price {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--clr-ink);   /* rose 2,59:1 idi */
    margin-top: 20px;
}

.product-divider {
    width: 60px;
    height: 1px;
    background: var(--clr-rose);
    margin: 32px 0;
    opacity: 0.5;
}

.product-description {
    margin-bottom: 36px;
}

.product-description p {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--clr-text-muted);
    line-height: 1.8;
    margin-bottom: 16px;
}

.product-description p:last-child {
    margin-bottom: 0;
}

/* ── Details Accordion ── */
.product-details-accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 36px;
}

@media (max-width: 600px) {
    .product-details-accordion {
        grid-template-columns: 1fr;
    }
}

.detail-card {
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    overflow: hidden;
}

.detail-card[open] {
    border-color: var(--clr-rose);
    background: rgba(14, 14, 14, 0.04);
    grid-column: 1 / -1;
}

.detail-card:hover {
    border-color: var(--clr-border-hover);
}

.detail-card summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.detail-card summary::-webkit-details-marker,
.detail-card summary::marker {
    display: none;
}

.detail-icon {
    color: var(--clr-rose);
    font-size: 12px;
    flex-shrink: 0;
}

.detail-card-head {
    flex: 1;
    min-width: 0;
}

.detail-card-head strong {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-cream);
    display: block;
    margin-bottom: 3px;
}

.detail-card-head p {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-text-muted);
    line-height: 1.4;
}

.detail-chev {
    color: var(--clr-rose);
    transition: transform 0.3s var(--ease-out);
    flex-shrink: 0;
    display: inline-flex;
}

.detail-card[open] .detail-chev {
    transform: rotate(180deg);
}

.detail-card-body {
    padding: 0 16px 16px 44px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-text-muted);
    line-height: 1.7;
    border-top: 1px solid var(--clr-border);
    padding-top: 14px;
    margin-top: 4px;
}

/* ── Size Chart ── */
.size-chart-section {
    padding: var(--section-padding) 0;
    background: var(--clr-noir);
    border-top: 1px solid var(--clr-border);
}

.size-chart-wrap {
    margin: 40px auto 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-noir-card);
}

.size-chart {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-family: var(--font-body);
}

.size-chart th,
.size-chart td {
    padding: 16px 18px;
    text-align: center;
    border-bottom: 1px solid var(--clr-border);
    font-size: 14px;
    color: var(--clr-text-muted);
}

.size-chart thead th {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-rose);
    font-weight: 400;
    background: var(--clr-noir-deep);
}

.size-chart tbody th {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--clr-cream);
    font-weight: 400;
    background: rgba(14, 14, 14, 0.04);
}

.size-chart tbody tr:last-child th,
.size-chart tbody tr:last-child td {
    border-bottom: none;
}

.size-chart tbody tr:hover td,
.size-chart tbody tr:hover th {
    background: rgba(14, 14, 14, 0.06);
}

.size-measure-guide {
    max-width: 780px;
    margin: 0 auto;
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 28px 32px;
}

.measure-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-rose);
    margin-bottom: 18px;
}

.size-measure-guide ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.size-measure-guide li {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--clr-text-muted);
    line-height: 1.7;
    padding: 8px 0;
    border-bottom: 1px dashed var(--clr-border);
}

.size-measure-guide li:last-child {
    border-bottom: none;
}

.size-measure-guide li strong {
    color: var(--clr-cream);
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    margin-right: 8px;
}

.size-note {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    color: var(--clr-text-dim);
    text-align: center;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .size-measure-guide {
        padding: 22px 20px;
    }
}

/* ── Features ── */
.product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}

.feature-tag {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-rose);
    border: 1px solid rgba(14, 14, 14, 0.2);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    transition: all var(--transition-fast);
}

.feature-tag:hover {
    background: rgba(14, 14, 14, 0.08);
    border-color: var(--clr-rose);
}

/* ── Variant Controls (Size + Qty) ── */
.product-variant-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
    padding: 20px;
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
}

.size-selector {
    border: none;
    padding: 0;
    margin: 0;
}

.variant-label {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-cream);
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.variant-hint {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--clr-text-dim);
    font-weight: 300;
}

.variant-hint.selected {
    color: var(--clr-rose-text);
}

/* Beden secilmeden Sepete Ekle'ye basildiginda. Bilgiyi METIN tasir
   (WCAG 1.4.1), renk yalnizca destekler. --clr-danger (#A32B2B) porselende
   6,11:1; eskiden --clr-rose kullaniliyordu ve 2,59:1 ile okunmuyordu. */
.variant-hint.error {
    color: var(--clr-danger);
    font-style: normal;
    font-weight: 500;
}

.size-selector.lj-attention {
    animation: ljSizeNudge 0.4s ease;
}

@keyframes ljSizeNudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .size-selector.lj-attention { animation: none; }
}

.size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.size-chip {
    position: relative;
    min-width: 52px;
    height: 44px;
    padding: 0 14px;
    background: var(--clr-noir-deep);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color: var(--clr-cream);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.size-chip:hover:not(:disabled) {
    border-color: var(--clr-rose);
    color: var(--clr-rose);
}

/* rose zeminde porselen metin 2,59:1 veriyordu; secili beden satin alma
   kararinin tam ortasindaki oge. Plum zemin + acik metin 15,09:1. */
.size-chip.active {
    background: var(--clr-ink);
    border-color: var(--clr-ink);
    color: var(--clr-on-dark);
}

.size-chip:disabled,
.size-chip[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

.size-chip .size-low {
    position: absolute;
    top: -8px;
    right: -6px;
    background: var(--clr-ink);
    color: var(--clr-on-dark);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0;
    padding: 2px 5px;
    border-radius: 8px;
    white-space: nowrap;
}

.qty-selector-wrap {
    display: flex;
    flex-direction: column;
}

.qty-selector {
    display: inline-flex;
    align-items: center;
    background: var(--clr-noir-deep);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: fit-content;
}

.qty-selector .qty-btn {
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
    color: var(--clr-cream);
    font-size: 18px;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.qty-selector .qty-btn:hover {
    color: var(--clr-rose);
    background: rgba(14, 14, 14, 0.08);
}

.qty-input {
    width: 50px;
    height: 42px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--clr-border);
    border-right: 1px solid var(--clr-border);
    color: var(--clr-cream);
    font-family: var(--font-heading);
    font-size: 14px;
    text-align: center;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input:focus {
    /* outline: none idi ve yerine hicbir sey konmamisti: adet alanina
       odaklaninca ekranda tek bir isaret olmuyordu (WCAG 2.4.7). Global
       :focus-visible kurali devreye girsin diye kaldirildi. */
    outline-offset: 2px;
}

/* ── Actions ── */
.product-actions {
    margin-top: 8px;
}

/* Gercek disabled = tum bedenler tukendi. pointer-events:none KALDIRILDI:
   cursor:not-allowed'i bile gorunmez yapiyordu ve product.js'teki "once beden
   secin" dalini ulasilamaz koda cevirmisti (2026-07-27 denetimi). Beden
   secilmemis hali artik aria-disabled ile yonetiliyor, buton tiklanabilir. */
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Product Story ── */
.product-story {
    padding: var(--section-padding) 0;
    background: var(--clr-noir);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

/* Sag sutundaki "Teknik Detaylar" kaldirilinca grid'e gerek kalmadi.
   600px, 17px Cormorant'ta satir basina ~70 karakter: editoryal okuma
   genisligi. Blok ortali, paragraf metni sola hizali kaliyor (uzun
   paragrafi ortalamak okumayi zorlastirir). */
.story-layout {
    max-width: 600px;
    margin-inline: auto;
}

.story-text p {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--clr-text-muted);
    line-height: 1.8;
    margin-bottom: 16px;
    /* Baslik ortali, metin sola yaslidi ve tek cumlelik hikayelerde blok
       sagdan bosluklu duruyordu. Mevcut hikayeler 1-2 cumle, ortali dengeli
       duruyor. Ileride uzun bir hikaye yazilirsa (4-5 satiri gecerse)
       ortali metin okumayi zorlastirir, o zaman buraya donulmeli. */
    text-align: center;
}


/* ── Related Section ── */
.related-section {
    padding: var(--section-padding) 0;
    background: var(--clr-noir-deep);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.related-card {
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-medium);
    text-decoration: none;
    display: block;
}

.related-card:hover {
    border-color: var(--clr-border-hover);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(14, 14, 14, 0.05);
}

.related-card-img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
    .related-card:hover .related-card-img {
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-main-img,
    .related-card-img {
        transition: none;
    }
    .gallery-main:hover .gallery-main-img,
    .related-card:hover .related-card-img {
        transform: none;
    }
    /* Serit aktif karta kayarken de animasyon olmasin (JS tarafinda da
       kontrol var, bu ikinci emniyet). */
    .gallery-thumbnails {
        scroll-behavior: auto;
    }
}

.related-card-img-wrapper {
    overflow: hidden;
}

.related-card-info {
    padding: 24px;
}

.related-card-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-cream);
    margin-bottom: 6px;
}

.related-card-price {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--clr-rose);
    margin-bottom: 4px;
    display: block;
}

.related-card-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-text-muted);
}

/* ── Animations ── */
.product-gallery {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInLeft 0.8s var(--ease-out) 0.2s forwards;
}

.product-info {
    opacity: 0;
    transform: translateX(30px);
    animation: slideInRight 0.8s var(--ease-out) 0.4s forwards;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .product-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .product-info {
        position: static;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .product-page {
        padding-top: 80px;
    }

    .product-details-grid {
        grid-template-columns: 1fr;
    }

    .related-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .gallery-thumbnails {
        padding-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .gallery-thumb {
        /* 60x75 (4:5) idi: ana cerceve 2:3 oldugu icin kucuk resim ayni
           fotografi farkli kirpiyordu. 60x90 ile oran her ekranda ayni. */
        width: 60px;
        height: 90px;
    }
}

/* ═══════════════════════════════════════════
   Size Finder Box
═══════════════════════════════════════════ */
.size-finder-box {
    max-width: 780px;
    margin: 40px auto 32px;
    padding: 32px;
    background: rgba(14, 14, 14, 0.04);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
}

.size-finder-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-rose);
    margin-bottom: 10px;
}

.size-finder-desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--clr-text-muted);
    margin-bottom: 24px;
    font-style: italic;
}

.size-finder-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.size-finder-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.size-finder-field label {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.size-finder-field input[type="number"] {
    width: 110px;
    padding: 12px 14px;
    background: var(--clr-noir-deep);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color: var(--clr-cream);
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
    -moz-appearance: textfield;
    transition: border-color var(--transition-fast);
}

.size-finder-field input[type="number"]::-webkit-outer-spin-button,
.size-finder-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.size-finder-field input[type="number"]:focus {
    outline: none;
    border-color: var(--clr-rose);
}

.size-finder-btn {
    padding: 12px 28px;
    background: var(--clr-rose);
    border: none;
    border-radius: var(--radius-pill);
    color: var(--clr-cream);
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    height: 46px;
}

.size-finder-btn:hover {
    background: var(--clr-cream);
    color: var(--clr-noir);
}

.size-finder-result {
    margin-top: 24px;
    padding: 20px;
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    animation: fadeSlideUp 0.3s var(--ease-out) both;
}

.sf-result-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.sf-result-size {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 200;
    color: var(--clr-rose);
    letter-spacing: 2px;
    line-height: 1;
    flex-shrink: 0;
}

.sf-result-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-confidence {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-cream);
}

.sf-stock {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    display: inline-block;
    width: fit-content;
}

.sf-stock--ok  { background: rgba(100, 180, 120, 0.15); color: var(--clr-success); border: 1px solid rgba(100, 180, 120, 0.3); }
.sf-stock--out { background: rgba(14, 14, 14, 0.12); color: var(--clr-rose); border: 1px solid var(--clr-border); }

.sf-result-note {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-text-muted);
    font-style: italic;
    line-height: 1.5;
}

.sf-select-btn {
    margin-top: 4px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--clr-rose);
    border-radius: var(--radius-pill);
    color: var(--clr-rose);
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    align-self: flex-start;
}

.sf-select-btn:hover {
    background: var(--clr-rose);
    color: var(--clr-cream);
}

.sf-error {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-rose);
    font-style: italic;
}

/* ── Auto Size Recommendation Banner ── */
.size-auto-rec {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(14, 14, 14, 0.07);
    border: 1px solid rgba(14, 14, 14, 0.22);
    border-radius: 4px;
}

.sar-icon {
    color: var(--clr-rose);
    font-size: 9px;
    flex-shrink: 0;
}

.sar-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-text-muted);
}

.sar-size {
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--clr-cream);
}

.sar-select-btn {
    margin-left: auto;
    padding: 5px 14px;
    background: transparent;
    border: 1px solid var(--clr-rose);
    border-radius: 2px;
    color: var(--clr-rose);
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.sar-select-btn:hover {
    background: var(--clr-rose);
    color: var(--clr-noir);
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .sf-result-inner { flex-direction: column; gap: 12px; }
    .sf-result-size  { font-size: 36px; }
    .size-finder-inputs { flex-direction: column; }
    .size-finder-field input[type="number"] { width: 100%; }
    .size-finder-btn { width: 100%; }
}

/* ═══════════════════════════════════════════
   Product Look Banner (PLB)
═══════════════════════════════════════════ */
.product-look-section {
    padding: var(--section-padding) 0;
    background: var(--clr-noir-deep);
    border-top: 1px solid var(--clr-border);
}

.product-look-cards {
    margin-top: 48px;
}

.product-look-banner {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 60px;
    align-items: center;
    background: var(--clr-noir-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.plb-image {
    position: relative;
    height: 480px;
    background: var(--clr-noir-deep);
}

.plb-image picture,
.plb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;   /* yuzu ve korseyi koru, kirpma alttan gitsin */
    display: block;
}

.plb-col-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(14, 14, 14, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(14, 14, 14, 0.2);
    color: var(--clr-rose);
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}

.plb-info {
    padding: 40px 48px 40px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.plb-look-label {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-rose);
}

.plb-look-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--clr-cream);
    line-height: 1.2;
}

.plb-look-desc {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--clr-text-muted);
    line-height: 1.7;
    font-style: italic;
}

.plb-pieces {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.plb-piece {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--clr-border);
}

.plb-piece:last-child {
    border-bottom: none;
}

.plb-piece--current {
    background: rgba(14, 14, 14, 0.06);
}

.plb-piece-role {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    width: 70px;
    flex-shrink: 0;
}

.plb-piece-link {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-cream);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.plb-piece-link:hover { color: var(--clr-rose); }

.plb-piece--current .plb-piece-link {
    color: var(--clr-rose);
    pointer-events: none;
}

.plb-piece-price {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--clr-rose);
    letter-spacing: 1px;
}

.plb-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--clr-border);
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.plb-total span {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--clr-cream);
}

.plb-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.plb-btn {
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.plb-btn--primary {
    background: var(--clr-rose);
    border: none;
    color: var(--clr-cream);
}

.plb-btn--primary:hover {
    background: var(--clr-cream);
    color: var(--clr-noir);
}

.plb-btn--secondary {
    background: transparent;
    border: 1px solid var(--clr-border);
    color: var(--clr-text-muted);
}

.plb-btn--secondary:hover {
    border-color: var(--clr-rose);
    color: var(--clr-cream);
}

/* Related card partner badge */
.related-card--partner {
    border-color: rgba(14, 14, 14, 0.4);
}

.related-card-img-wrapper {
    position: relative;
}

.related-partner-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(14, 14, 14, 0.8);
    backdrop-filter: blur(6px);
    color: var(--clr-rose);
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(14, 14, 14, 0.2);
}

@media (max-width: 900px) {
    .product-look-banner {
        grid-template-columns: 1fr;
    }
    .plb-image {
        /* Sabit 320px yukseklik dar ekranda fotografin %68'ini kirpiyordu:
           modelin ne basi ne ayaklari goruunuyordu. */
        height: auto;
        aspect-ratio: 4 / 5;
        max-height: 560px;
    }
    .plb-info {
        padding: 0 24px 32px;
    }
}

@media (max-width: 600px) {
    .plb-info {
        padding: 0 16px 24px;
    }
    .plb-actions {
        flex-direction: column;
    }
    .plb-btn {
        justify-content: center;
    }
}

/* ── Renk varyanti secici (color variant) ── */
.color-selector { margin-bottom: 24px; }
.color-selector .variant-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-label);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: 12px;
}
.color-options { display: flex; gap: 10px; flex-wrap: wrap; }
.color-chip {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px 22px;
    border: 1px solid rgba(34, 24, 28, 0.25);
    background: transparent;
    color: var(--clr-ink);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.color-chip:hover { border-color: var(--clr-ink); }
.color-chip.active {
    background: var(--clr-ink);
    color: var(--clr-on-dark);
    border-color: var(--clr-ink);
}


/* ═══════════════════════════════════════════
   Galeri okları + sayaç (2026-08-02)

   Asıl sorun burada DEĞİLDİ: .gallery-main zaten sabit 2:3 çerçeve +
   object-fit: contain ile doğru kurulmuştu. Sorun, masaüstünde küçük
   resim şeridini gizleyip (min-width:901px -> display:none) yerine
   bütün fotoğrafları tam boy alt alta dizen .gallery-stack idi; ürün
   sayfasını scroll etmek bitmiyordu. Yığın kaldırıldı, şerit her ekranda
   görünür oldu, ana görsele ileri/geri okları eklendi.
═══════════════════════════════════════════ */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Dokunma hedefi 44px. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 24, 28, 0.12);
    border-radius: 50%;
    background: rgba(247, 244, 238, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--clr-ink);
    cursor: pointer;
    /* HER ZAMAN GORUNUR. Ilk surumde hover'da beliriyordu; bulunamayan bir
       buton is gormez, dokunmatikte hover da yok. Sakin dursun diye hafif
       saydam, uzerine gelince tam belirginlesiyor. */
    opacity: 0.75;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.gallery-nav--prev { left: 14px; }
.gallery-nav--next { right: 14px; }

.gallery-main:hover .gallery-nav,
.gallery-nav:hover,
.gallery-nav:focus-visible { opacity: 1; }

.gallery-nav:hover { background: var(--clr-noir-deep); }

.gallery-counter {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 24, 28, 0.55);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    z-index: 2;
}

/* Koleksiyon satiri artik link */
.product-category a {
    color: inherit;
    text-decoration: none;
}
.product-category a:hover { text-decoration: underline; }
.product-category a:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: 2px;
}

/* Bakim karti tek sutunda tam genislik */
.detail-card--wide { grid-column: 1 / -1; }

/* Acilir olmayan detay karti (bakim). Govdesi bos oldugu icin ok isareti
   ve isaretci yaniltici olurdu. */
.detail-card--static > summary {
    cursor: default;
}
.detail-card--static .detail-chev {
    display: none;
}
.detail-card--static > summary::marker,
.detail-card--static > summary::-webkit-details-marker {
    display: none;
    content: '';
}

/* KALDIRILDI (2026-08-02): burada masaüstü için
       .gallery-main    { aspect-ratio: auto; }
       .gallery-main-img{ height: auto; }
   vardı, yani ana görsel doğal boyunda açılıyordu. Dikey yığın
   tasarımının parçasıydı ve tek bir fotoğrafın ekranı kaplamasının ikinci
   sebebiydi. Artık her ekranda sabit 2:3 çerçeve + contain: görsel
   kırpılmıyor ama sayfayı da yutmuyor. */

/* ═══════════════════════════════════════════
   Degerlendirmeler (reviews.js)
   Yalnizca dogrulanmis alici yazar, admin onayindan sonra yayinlanir.
═══════════════════════════════════════════ */
.reviews-section { padding: var(--section-padding) 0; }

.lj-stars { display: inline-flex; gap: 2px; color: var(--clr-field-border); font-size: 16px; line-height: 1; }
.lj-stars.sm { font-size: 13px; }
.lj-star.on { color: var(--clr-ink); }

.product-rating-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--clr-text-muted);
}
.product-rating-inline a { color: inherit; text-decoration: underline; }

.review-summary { text-align: center; margin-bottom: 24px; }
.review-score {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-heading);
}
.review-score strong { font-size: 26px; font-weight: 400; color: var(--clr-text); }
.review-count { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--clr-text-muted); }
.review-empty {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--clr-text-muted);
    margin: 0;
}

.review-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.review-note {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-text-muted);
    text-align: center;
    max-width: 520px;
    margin: 0;
}

.review-form-panel {
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 28px;
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
}
.review-form { display: flex; flex-direction: column; gap: 18px; }
.review-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.review-form label > span,
.review-rating-field legend {
    display: block;
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: 6px;
}
.review-form input,
.review-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--clr-bg);
    border: 1px solid var(--clr-field-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--clr-text);
}
.review-form input:focus-visible,
.review-form textarea:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: 1px;
}
.review-rating-field { border: none; padding: 0; margin: 0; }
.review-stars { display: flex; gap: 6px; }
.review-star-btn {
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: 1px solid var(--clr-field-border);
    border-radius: var(--radius-sm);
    font-size: 20px;
    line-height: 1;
    color: var(--clr-field-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.review-star-btn.on { color: var(--clr-ink); border-color: var(--clr-ink); }
.review-star-btn:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 2px; }

.review-form-msg {
    min-height: 18px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-style: italic;
}
.review-form-msg[data-kind="error"]   { color: var(--clr-danger); }
.review-form-msg[data-kind="success"] { color: var(--clr-success); }

.review-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.review-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--clr-border);
}
.review-item:last-child { border-bottom: none; }
.review-item-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--clr-text-muted);
}
.review-author { color: var(--clr-text); font-weight: 500; }
.review-badge {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--clr-ink);
    color: var(--clr-on-dark);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}
.review-title {
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--clr-text);
    margin: 0 0 6px;
}
.review-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    color: var(--clr-text);
    margin: 0;
}

@media (max-width: 640px) {
    .review-form-row { grid-template-columns: 1fr; }
    .review-form-panel { padding: 20px 16px; }
}

/* ═══════════════════════════════════════════
   TAM EKRAN BUYUTEC (2026-08-09)

   Musteri kumasin dokusunu, dikisi ve islemeyi yakindan gorebilsin diye
   ana gorsele tiklayinca tam ekran acilan katman. Fotograflar zaten
   2000x3000 yukleniyor (admin paneli IMG_MAX_WIDTH = 2000 ile kaydediyor)
   ve galeri o dosyanin TA KENDISINI gosteriyor, yani buyutec acilirken
   yeni bir ag istegi yok, bitmap tarayicida hazir.

   Kalip look-size-modal'in ucuncu uyesi: ayni odak tuzagi, ayni scroll
   kilidi, ayni kapanista odagi geri verme. Zemin SIYAH DEGIL: site acik
   temali, siyaha ani gecis luks dilde sert bir flas olurdu. Porselen
   scrim %98, arkadaki sayfa belli belirsiz hissediliyor.
═══════════════════════════════════════════ */

/* ── Tetikleyici: ana gorsel artik buton ── */
.gallery-main-zoom {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: zoom-in;
}

.gallery-main-zoom picture {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-main-zoom:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: 2px;
}

/* Sol altta buyutec rozeti. Sayacla (sag alt) simetrik, badge'e
   (sol ust) dokunmuyor. Tiklama alani butonun tamami, rozet dekoratif. */
.gallery-zoom-hint {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 24, 28, 0.12);
    border-radius: 50%;
    background: rgba(247, 244, 238, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--clr-ink);
    opacity: 0.75;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.gallery-main:hover .gallery-zoom-hint { opacity: 1; }

/* ── Katman ── */
.ljbx-wrap {
    position: fixed;
    inset: 0;
    /* ljsm 1200'un ustunde; ozel imlec (9998/9999) ve preloader (10000)
       hala ustte kaliyor. */
    z-index: 1300;
    display: none;
}

.ljbx-wrap.open { display: block; }

.ljbx-overlay {
    position: absolute;
    inset: 0;
    background: rgba(240, 237, 229, 0.98);
    opacity: 0;
    transition: opacity 280ms var(--ease-out);
}

.ljbx-wrap.gorunur .ljbx-overlay { opacity: 1; }

/* Sahne tum ekrani kapliyor; gorsel ortada, contain ile sigiyor.
   touch-action: none olmadan iOS sayfanin kendisini pinch'liyor. */
.ljbx-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: contain;
    cursor: zoom-in;
}

.ljbx-stage.zoomlu { cursor: grab; }
.ljbx-stage.suruklenirken { cursor: grabbing; }

.ljbx-img {
    display: block;
    max-width: min(92vw, 1100px);
    max-height: calc(100dvh - 104px);
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform;
    /* Yakinlastirinca tarayici bulanik ara kare uretmesin. */
    image-rendering: auto;
}

@media (max-width: 640px) {
    .ljbx-img {
        max-width: 100vw;
        max-height: 100dvh;
    }
}

/* ── Kontroller ── */
.ljbx-close,
.ljbx-nav {
    position: absolute;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 24, 28, 0.12);
    border-radius: 50%;
    background: rgba(247, 244, 238, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--clr-ink);
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.ljbx-close:hover,
.ljbx-nav:hover,
.ljbx-close:focus-visible,
.ljbx-nav:focus-visible { opacity: 1; background: var(--clr-noir-deep); }

.ljbx-close:focus-visible,
.ljbx-nav:focus-visible {
    outline: 2px solid var(--clr-ink);
    outline-offset: 2px;
}

/* Centikli ekranda kontroller cizginin altina girmesin. Sayfada
   viewport-fit=cover yok, o yuzden env() sifir donerse max()/calc()
   guvenli degere dusuyor. */
.ljbx-close {
    top: max(16px, env(safe-area-inset-top));
    right: 16px;
}

.ljbx-nav { top: 50%; transform: translateY(-50%); }
.ljbx-nav--prev { left: 24px; }
.ljbx-nav--next { right: 24px; }

/* 640px altinda ok yok: 88px'i oklara vermek israf, kaydirma ve sayac
   gezinmeyi zaten anlatiyor. */
@media (max-width: 640px) {
    .ljbx-nav { display: none; }
}

.ljbx-counter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom));
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(34, 24, 28, 0.55);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    z-index: 2;
    pointer-events: none;
}

/* Yavas sebekede komsu fotografa gecerken: sitenin kendi bekleme dili
   (preloader'daki ince kayan cizgi), yeni bir spinner icat edilmiyor. */
.ljbx-bekleme {
    position: absolute;
    left: 50%;
    bottom: calc(64px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: 50px;
    height: 1px;
    overflow: hidden;
    background: rgba(34, 24, 28, 0.15);
    display: none;
    z-index: 2;
}

.ljbx-bekleme.acik { display: block; }

.ljbx-bekleme::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--clr-ink);
    animation: preloaderSlide 1.2s var(--ease-in-out) infinite;
}

/* ── Hareket azaltma ── */
@media (prefers-reduced-motion: reduce) {
    .ljbx-overlay { transition: none; }
    .ljbx-img { transition: none !important; }
    .ljbx-bekleme::after { animation: none; left: 0; }
}