/**
 * 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));
}
/* Satır: "Aç" kartı + ayrı "İndir" butonu. Tek kutu içinde iki ayrı hedef —
   birleşik çerçeve, aralarında ince ayraç. */
.product__doc-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.product__doc-row:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--color-navy) 45%, transparent);
    transform: translateY(-2px);
}
.product__docs-list .product__doc {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: var(--space-4);
    color: var(--color-navy);
    text-decoration: none;
    cursor: pointer;
}
/* İndirme butonu — ikincil eylem: sessiz durur, üzerine gelince markaya döner. */
.product__doc-dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-4);
    border-left: 1px solid var(--color-border);
    color: var(--color-text-muted, var(--color-navy));
    text-decoration: none;
    transition: background-color .18s, color .18s;
}
.product__doc-dl:hover,
.product__doc-dl:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}
.product__doc-dl .icon { font-size: 1.05rem; }
.product__doc-dl-text {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
/* 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;
    min-width: 0;
    font-weight: 600;
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;   /* uzun dosya adı kartı taşırmasın */
}
.product__docs-list .product__doc > .icon:last-child {
    flex: 0 0 auto;
    color: var(--color-primary);
    opacity: .5;
    transition: transform .18s, opacity .18s;
}
.product__doc-row:hover .product__doc > .icon:last-child { opacity: 1; transform: translate(2px, -2px); }

/* ═══════════ 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) ─────────────────────────────────────────────────
   Ürün özetinin içinde, girişin (.product__intro) hemen altında durur — kutu
   değil, satır: ortalama + "Bu ürünü değerlendirin:" + tıklanabilir yıldızlar.

   Yıldızlar ikon sprite'ı yerine saf CSS ile çizilir: tek şekil (clip-path),
   dolgu oranı --fill ile verilir → yarım yıldız ek varlık gerektirmez.

   Her yıldız yuvası İKİYE bölünür: sol yarı X.5, sağ yarı X puan. Yarım yıldız
   desteği bu yüzden radio+label ile değil butonlarla kuruldu.

   Blok `hidden` başlar; JS (main.js) veriyi çektikten sonra açar — sunucu
   önbelleğe kişiye özel durum basmasın diye (bkz. inc/rating.php başlığı). */
.rating {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.rating[hidden] { display: none; }

/* Yıldız gövdesi — dolgu oranı --fill */
.rating__star,
.rating__slot-star {
    --fill: 0%;
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    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%);
}

/* Ortalama satırı */
.rating__avg {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.rating__avg[hidden] { display: none; }
.rating__stars { display: inline-flex; gap: 2px; font-size: 1.1rem; }
.rating__value { font-size: var(--text-lg); color: var(--color-navy); }
.rating__count { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Oy alanı */
.rating__vote[hidden] { display: none; }
.rating__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.rating__pick { display: flex; gap: 3px; }

/* Yuva: görünen yıldız + üstünde iki görünmez yarım buton */
.rating__slot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1.35rem;
}
.rating__slot-star { pointer-events: none; }
.rating__half {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.rating__half--l { left: 0; }
.rating__half--r { right: 0; }
.rating__half:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }

.rating__hint {
    display: inline-block;
    margin-top: var(--space-1);
    min-height: 1.2em;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-star);
}

/* Honeypot — ekran okuyucudan da uzak tutulur; sr-only DEĞİL (bot onu okur). */
.rating__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rating__msg { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.rating__msg[hidden] { display: none; }
.rating__msg--ok  { color: var(--color-primary); font-weight: 600; }
.rating__msg--err { color: #b42318; font-weight: 600; }