/**
 * product.css — Tekil ürün (woocommerce/single-product.php).
 *
 * Fiyatsız katalog düzeni: breadcrumb + galeri/özet + Teknik Özellikler tablosu +
 * ilgili ürünler. Genel sınıflar (.section, .container, .section-eyebrow,
 * .section-title, .btn-hero, .entry-content) yeniden tanımlanmaz.
 */

.product > .container { max-width: var(--container-xl); }

.product {
    padding-block: clamp(var(--space-8), 4vw, var(--space-16));
}

/* ── Breadcrumb ── */
.product__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.product__crumbs a { transition: color var(--duration-fast) var(--ease-default); }
.product__crumbs a:hover { color: var(--color-primary); }
.product__crumbs .icon { width: 0.7em; height: 0.7em; color: var(--color-border-strong); transform: rotate(-90deg); }
.product__crumbs [aria-current="page"] { color: var(--color-navy); font-weight: 600; }

/* ═══════════ ÜST: galeri + özet ═══════════ */
.product__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-items: start;
}

/* ── Galeri ── */
.product__gallery {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    align-self: start; /* grid hücresini uzatma → sticky çalışsın */
}
.product__stage-img[role="button"] { cursor: zoom-in; }
.product__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: transparent;
}
.product__stage-img { width: 100%; height: 100%; object-fit: contain; }
.product__stage--empty { color: var(--color-border-strong); font-size: 4rem; }

.product__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.product__thumb {
    width: 72px;
    height: 72px;
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-background);
    transition: border-color var(--duration-fast) var(--ease-default);
}
.product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product__thumb:hover { border-color: var(--color-border-strong); }
.product__thumb.is-active { border-color: var(--color-primary); border-width: 2px; }

/* ── Lightbox (basit) — siyah + blur arka plan, ürün ortada yüksek çözünürlük ── */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--space-4), 5vw, var(--space-16));
    background: rgb(0 0 0 / 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal) var(--ease-default),
                visibility var(--duration-normal) var(--ease-default);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
    max-width: min(1100px, 100%);
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
    transform: scale(0.96);
    transition: transform var(--duration-normal) var(--ease-default);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

/* Kapat (X) — btn-hero; kare/daire, hover'da ikon 90° döner (hareket animasyonu) */
.lightbox__close {
    position: absolute;
    top: clamp(var(--space-4), 3vw, var(--space-8));
    right: clamp(var(--space-4), 3vw, var(--space-8));
    width: 52px; height: 52px;
    padding: 0;
    justify-content: center;
}
.lightbox__close .icon { font-size: 1.4rem; transition: transform var(--duration-normal) var(--ease-default); }
.lightbox__close:hover .icon,
.lightbox__close:focus-visible .icon { transform: rotate(90deg); }

/* Gezinme — ‹ 1/4 › : önceki + sayaç + sonraki. Altta ortada; transform KULLANMA
   (btn-hero:hover transform:none ile kayardı) → left/right:0 + margin:auto ile ortala. */
.lightbox__nav {
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(var(--space-6), 4vw, var(--space-10));
    margin-inline: auto;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.lightbox__nav-btn {
    width: 52px; height: 52px;
    padding: 0;
    justify-content: center;
}
.lightbox__nav-btn--prev .icon { transform: rotate(180deg); }
.lightbox__count {
    min-width: 4rem;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
}

/* ── Özet ── */
.product__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.product__eyebrow .icon { color: var(--color-accent); }

.product__title {
    margin-top: var(--space-3);
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    line-height: var(--leading-tight);
    color: var(--color-navy);
}

.product__intro {
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
}

/* Öne çıkan teknik değerler (3 kart) */
.product__highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-8);
}
.product__highlight {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}
.product__highlight-value {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-primary);
}
.product__highlight-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.product__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
}
.product__actions .btn-link { color: var(--color-navy); }
.product__actions .btn-link .icon { color: var(--color-success); }

/* ═══════════ Teknik Özellikler ═══════════ */
.product__specs { margin-top: clamp(var(--space-12), 6vw, var(--space-20)); }
.product__specs-table { overflow-x: auto; }
.product__specs table {
    width: 100%;
    border-collapse: collapse;
}
.product__specs tr { border-bottom: 1px solid var(--color-border); }
.product__specs tr:first-child { border-top: 1px solid var(--color-border); }
.product__specs th,
.product__specs td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    vertical-align: top;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.product__specs th {
    width: 38%;
    font-weight: 700;
    color: var(--color-navy);
    background-color: var(--color-surface);
}
.product__specs td { color: var(--color-text); }

/* ═══════════ Model Tablosu (çok-modelli matris, meta'dan) ═══════════ */
.product__models { margin-top: clamp(var(--space-12), 6vw, var(--space-20)); }
.product__models-scroll { overflow-x: auto; margin-top: var(--space-6); }
.product__models-scroll + .product__models-scroll { margin-top: var(--space-8); }
.product__models table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.product__models th,
.product__models td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    line-height: var(--leading-normal);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}
.product__models thead th {
    font-weight: 700;
    color: var(--color-navy);
    background-color: var(--color-surface);
    position: sticky;
    top: 0;
}
.product__models tbody td { color: var(--color-text); }
.product__models tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--color-surface) 45%, transparent); }

/* ═══════════ Teknik Dokümanlar ═══════════ */
.product__docs { margin-top: clamp(var(--space-12), 6vw, var(--space-20)); }
.product__docs-list {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
/* Kart — yüksek özgüllük + reset: DearFlip'in .df-popup-button (inline-block/gri zemin) stilini ezer */
.product__docs-list .product__doc {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: auto;
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    color: var(--color-navy);
    text-decoration: none;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.product__docs-list .product__doc:hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--color-navy) 45%, transparent);
    transform: translateY(-2px);
}
.product__docs-list .product__doc.df-icon-play-popup::before { display: none; } /* DearFlip play ikonu bastır */
/* dosya ikonu — renkli yuvarlak kare rozet */
.product__docs-list .product__doc > .icon:first-child {
    flex: 0 0 auto;
    box-sizing: content-box;
    font-size: 1.3rem;
    width: 1em;
    height: 1em;
    padding: .5em;
    border-radius: 10px;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.product__docs-list .product__doc-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-weight: 600;
    line-height: var(--leading-tight);
}
.product__docs-list .product__doc > .icon:last-child {
    flex: 0 0 auto;
    color: var(--color-primary);
    opacity: .5;
    transition: transform .18s, opacity .18s;
}
.product__docs-list .product__doc:hover > .icon:last-child { opacity: 1; transform: translateX(3px); }
.product__doc-badge {
    display: inline-block;
    padding: .14em .5em .1em;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
    background: var(--color-primary);
    line-height: 1;
}

/* ═══════════ Açıklama ═══════════ */
.product__desc { margin-top: clamp(var(--space-12), 6vw, var(--space-20)); }
/* Açıklama içindeki karmaşık HTML karşılaştırma tablosu — rowspan/colspan korunur.
   Tablo display:table KALIR (span'ler için şart); .table-scroll div yatay kaydırır. */
.product__desc .table-scroll { overflow-x: auto; margin-top: var(--space-6); }
.product__desc table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: var(--text-xs);
}
.product__desc th,
.product__desc td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.product__desc thead th {
    font-weight: 700;
    color: var(--color-navy);
    background-color: var(--color-surface);
}

/* ═══════════ İlgili ürünler ═══════════ */
.product-related { margin-top: clamp(var(--space-16), 6vw, var(--space-24)); }
.product-related > .container { max-width: var(--container-xl); } /* 1200px — üstteki geniş içerikten daha dar, ortalı */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-5), 2.5vw, var(--space-8));
}
.product-card { position: relative; }
.product-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-background);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
}
.product-card__link:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.product-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: var(--space-7) var(--space-6) var(--space-6);
    background: transparent;
    overflow: visible; /* components.css'ten sızan overflow:hidden'ı geçersiz kıl — görsel kırpılmasın (kart yuvarlaması __link'te) */
}
.product-card__img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-md); }
.product-card__ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--color-border-strong); font-size: 2.5rem;
}
.product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    flex: 1 1 auto;
}
.product-card__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    color: var(--color-navy);
}

/* Kartta öne çıkan teknik değerler (attribute) */
.product-card__specs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.product-card__spec {
    display: flex;
    flex-wrap: wrap;                 /* değere yer kalmazsa alt satıra insin */
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
/* Etiket daralabilir ve kendi içinde sarabilir; sabit kalırsa değeri eziyor. */
.product-card__spec-label {
    color: var(--color-text-muted);
    flex: 0 1 auto;
    min-width: 0;
}
/* Değere aynı satırda en az ~10ch taban genişlik; sığmazsa satırı tek başına alır.
   Böylece dar kartta harf harf kırılma yerine düzgün bir alt satır oluşur. */
.product-card__spec-value {
    font-weight: 700;
    color: var(--color-navy);
    text-align: right;
    flex: 1 1 10ch;
    min-width: 10ch;
    overflow-wrap: break-word;       /* yalnız gerçekten sığmayan kelimeyi kır */
}
.product-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}
.product-card__more .icon { transition: transform var(--duration-fast) var(--ease-default); }
.product-card__link:hover .product-card__more .icon { transform: translateX(3px); }

/* ── Duyarlı ── */
@media (max-width: 900px) {
    .product__hero { grid-template-columns: 1fr; }
    .product__gallery { width: 100%; position: static; } /* tek sütunda sticky kapalı, tam genişlik */
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .product__highlights { grid-template-columns: 1fr 1fr; }
    .product__specs th { width: 45%; }
    .product-grid { grid-template-columns: 1fr; }
    .product__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Puanlama (inc/rating.php) ─────────────────────────────────────────────────
   Yalnız yıldız; yorum metni yok. Yıldızlar CSS mask'siz, saf border/clip ile
   çizilir (ikon sprite'ına yeni sembol eklemeden). Seçim radio + label ile
   çalışır → JS olmadan da kullanılabilir. */
.rating {
    margin-top: var(--space-12);
    padding: var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
}
.rating__title {
    font-size: var(--text-lg);
    color: var(--color-navy);
}

/* Yıldız gövdesi — tek bir şekil, dolgu oranı --fill ile veriliyor */
.rating__star,
.rating__pick-star {
    --fill: 0%;
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    background:
        linear-gradient(90deg, var(--color-star) var(--fill), var(--color-border-strong) var(--fill));
    clip-path: polygon(50% 0%, 61.8% 34.5%, 98% 34.5%, 68.2% 57.3%, 79.4% 91.8%,
                       50% 70%, 20.6% 91.8%, 31.8% 57.3%, 2% 34.5%, 38.2% 34.5%);
}
.rating__star.is-full { --fill: 100%; }
.rating__star.is-half { --fill: 50%; }

.rating__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.rating__stars { display: inline-flex; gap: 2px; }
.rating__value { font-size: var(--text-xl); color: var(--color-navy); }
.rating__count { font-size: var(--text-sm); color: var(--color-text-muted); }
.rating__summary--empty { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Seçim — DOM'da 5→1 sırasıyla; görsel sıra row-reverse ile 1→5 olur.
   Böylece "üzerine gelinen ve solundaki" yıldızlar ~ birleştiricisiyle boyanır. */
.rating__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.rating__pick {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
    border: 0;
    padding: 0;
    margin: 0;
}
.rating__pick-star { cursor: pointer; transition: transform var(--duration-fast) var(--ease-default); }
.rating__pick-star:hover { transform: scale(1.12); }

/* Seçili: işaretli radio'dan SONRAKİ kardeşler = o yıldız ve altındakiler
   (DOM 5→1 sıralı olduğu için "sonraki" = "daha düşük puan"). */
.rating__radio:checked ~ .rating__pick-star { --fill: 100%; }
/* Fareyle üzerine gelinen ve altındakiler */
.rating__pick-star:hover,
.rating__pick-star:hover ~ .rating__pick-star { --fill: 100%; }
/* Fare kutunun içindeyken önizleme seçimi ezsin (yarım dolu karışıklığı olmasın) */
.rating__pick:hover .rating__radio:checked ~ .rating__pick-star { --fill: 0%; }
.rating__pick:hover .rating__pick-star:hover,
.rating__pick:hover .rating__pick-star:hover ~ .rating__pick-star { --fill: 100%; }
.rating__radio:focus-visible + .rating__pick-star { box-shadow: var(--focus-ring); }

.rating__submit { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
.rating__msg { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.rating__msg--ok  { color: var(--color-primary); font-weight: 600; }
.rating__msg--err { color: #b42318; font-weight: 600; }

@media (max-width: 560px) {
    .rating { padding: var(--space-5); }
    .rating__form { flex-direction: column; align-items: flex-start; }
}