/* ============================================
   COMMERCE CORE — Product Detail (Premium)
   Styles the markup emitted by product-detail.js
   using premium.css design tokens.
   ============================================ */

.detail-page { padding-bottom: 4rem; }

/* Breadcrumbs */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; color: var(--color-text-light); padding: 1.75rem 0 1.25rem; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs span { color: var(--color-text-light); }

/* State / empty */
.state-message { text-align: center; padding: 3rem 1.5rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; }

/* ---- Main layout ---- */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }

/* Gallery */
.detail-gallery { position: sticky; top: 100px; }
.gallery-main { border-radius: 16px; overflow: hidden; background: var(--color-bg-alt); border: 1px solid var(--color-border); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: .9rem; }
.gallery-thumb { aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; background: var(--color-bg-alt); transition: border-color var(--transition-fast); }
.gallery-thumb:hover { border-color: var(--color-border); }
.gallery-thumb.active { border-color: var(--color-accent); }

/* Info column */
.detail-info { display: flex; flex-direction: column; }
.eyebrow { font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--color-accent) !important; margin-bottom: .6rem; }
.detail-heading h1 { font-family: var(--font-serif); font-size: 2.15rem; line-height: 1.2; color: var(--color-primary); margin-bottom: 1rem; }
.detail-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.detail-meta span { font-size: .78rem; color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); padding: .3rem .7rem; border-radius: 20px; }
.detail-summary { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 1.5rem; }

/* Price */
.detail-price-box { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.detail-price { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.detail-old-price { font-size: 1.1rem; color: var(--color-text-light); text-decoration: line-through; }

/* Variants */
.variant-block { margin-bottom: 1.5rem; }
.variant-options { display: flex; flex-wrap: wrap; gap: .6rem; }
.variant-btn { padding: .55rem 1.1rem !important; font-size: .88rem !important; border-radius: 8px !important; }
.variant-btn.active { background: var(--color-primary) !important; color: var(--color-surface) !important; border-color: var(--color-primary) !important; }

/* Stock */
.detail-stock { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--color-success); margin-bottom: 1.5rem; }
.detail-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.detail-stock.is-out { color: var(--color-danger); }
.detail-stock.is-out::before { background: var(--color-danger); }

/* Actions */
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.quantity-selector { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.quantity-selector button { width: 46px; height: 46px; font-size: 1.2rem; color: var(--color-primary); background: var(--color-surface); transition: var(--transition-fast); }
.quantity-selector button:hover { background: var(--color-bg-alt); color: var(--color-accent); }
.quantity-selector input { width: 48px; height: 46px; text-align: center; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); font-size: 1rem; font-weight: 600; color: var(--color-primary); outline: none; -moz-appearance: textfield; }
.quantity-selector input::-webkit-outer-spin-button, .quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-add-cart { flex: 1; min-width: 180px; height: 46px; padding: 0 1.5rem !important; }
.btn-favorite { width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-light); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
.btn-favorite:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-favorite.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ---- Tabs ---- */
.detail-tabs { margin-top: 3.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.detail-tab-buttons { display: flex; gap: .25rem; border-bottom: 1px solid var(--color-border); padding: .5rem .5rem 0; }
.detail-tab-btn { padding: .85rem 1.5rem; font-weight: 600; font-size: .92rem; color: var(--color-text-muted); border-bottom: 2px solid transparent; transition: var(--transition-fast); }
.detail-tab-btn:hover { color: var(--color-primary); }
.detail-tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.detail-tab-content { display: none; padding: 1.75rem; color: var(--color-text-muted); line-height: 1.8; }
.detail-tab-content.active { display: block; }

.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.spec-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--color-border); }
.spec-list dt { color: var(--color-text-light); font-size: .88rem; }
.spec-list dd { color: var(--color-text-main); font-weight: 600; font-size: .9rem; }

/* ---- Related products section ---- */
.store-section { padding: 3.5rem 0 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.section-heading h2 { font-family: var(--font-serif); font-size: 1.7rem; color: var(--color-primary); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ---- Product card (template used by related products) ---- */
.product-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-base); display: flex; flex-direction: column; }
.product-card:hover { box-shadow: var(--shadow-premium); transform: translateY(-4px); }
.product-card__media { position: relative; aspect-ratio: 1; background: var(--color-bg-alt); overflow: hidden; display: block; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__badge, .product-badge { position: absolute; top: 10px; left: 10px; background: var(--color-danger); color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 4px; display: none; }
.product-favorite { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); box-shadow: var(--shadow-sm); font-size: 1rem; transition: var(--transition-fast); z-index: 2; }
.product-favorite:hover { color: var(--color-accent); }
.product-favorite.active { background: var(--color-accent); color: #fff; }
.product-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.product-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.product-card__category { font-size: .74rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-light); }
.stock-pill { font-size: .72rem; color: var(--color-success); font-weight: 600; }
.stock-pill.is-out { color: var(--color-danger); }
.product-card__title { font-weight: 600; color: var(--color-primary); line-height: 1.35; margin-bottom: .6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.product-card__title:hover { color: var(--color-accent); }
.product-card__prices { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1rem; margin-top: auto; }
.product-card__current-price { font-weight: 700; font-size: 1.15rem; color: var(--color-primary); }
.product-card__old-price { color: var(--color-text-light); font-size: .85rem; text-decoration: line-through; display: none; }
.product-card__actions { display: flex; gap: .5rem; }
.product-card__actions .btn { flex: 1; padding: .6rem .5rem; font-size: .85rem; }

/* ============================================
   Reviews & Ratings
   ============================================ */
/* Star bar (fractional fill) */
.star-bar { position: relative; display: inline-block; font-size: var(--star-size, 16px); line-height: 1; letter-spacing: 1px; vertical-align: middle; }
.star-bar__empty { color: #d9cfbe; }
.star-bar__fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: #e6a817; }

/* Heading rating (under product title) */
.detail-rating { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--color-text-muted); font-size: .9rem; text-decoration: none; }
.detail-rating strong { color: var(--color-primary); }
.detail-rating:hover span { color: var(--color-accent); }
.detail-rating--empty { opacity: .8; }

/* Section wrapper */
.reviews-section { margin-top: 3rem; }

/* Summary card */
.rev-summary { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 2rem; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 1.75rem; box-shadow: var(--shadow-sm); }
.rev-summary__score { text-align: center; border-right: 1px solid var(--color-border); padding-right: 1.5rem; }
.rev-summary__avg { font-family: var(--font-serif); font-size: 3rem; font-weight: 700; color: var(--color-primary); line-height: 1; margin-bottom: .35rem; }
.rev-summary__count { margin-top: .5rem; font-size: .85rem; color: var(--color-text-muted); }
.rev-summary__dist { display: flex; flex-direction: column; gap: .45rem; }
.rev-dist__row { display: grid; grid-template-columns: 34px 1fr 34px; gap: .6rem; align-items: center; font-size: .82rem; color: var(--color-text-muted); }
.rev-dist__label { white-space: nowrap; }
.rev-dist__track { height: 8px; background: var(--color-bg-alt); border-radius: 20px; overflow: hidden; }
.rev-dist__bar { display: block; height: 100%; background: #e6a817; border-radius: 20px; }
.rev-dist__count { text-align: right; }

/* Sort tabs */
.rev-sort { display: flex; gap: .5rem; margin: 1.5rem 0 1rem; flex-wrap: wrap; }
.rev-sort__btn { padding: .5rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 20px; font-size: .82rem; cursor: pointer; color: var(--color-text-muted); transition: all var(--transition-fast); }
.rev-sort__btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.rev-sort__btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Review list */
.rev-list { display: flex; flex-direction: column; gap: 1rem; }
.rev-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.25rem; }
.rev-card__head { display: flex; align-items: center; gap: .75rem; }
.rev-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.rev-card__who { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.rev-card__name { font-weight: 600; color: var(--color-primary); }
.rev-card__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rev-card__date { font-size: .78rem; color: var(--color-text-light); white-space: nowrap; }
.rev-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; color: #157347; background: rgba(25, 135, 84, .12); padding: .15rem .5rem; border-radius: 20px; }
.rev-card__title { margin: .85rem 0 .35rem; font-size: 1rem; color: var(--color-primary); }
.rev-card__comment { color: var(--color-text-muted); line-height: 1.65; }
.rev-photos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; }
.rev-photo { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); cursor: pointer; transition: transform var(--transition-fast); }
.rev-photo:hover { transform: scale(1.05); }
.rev-card__foot { margin-top: 1rem; }
.rev-like { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 20px; padding: .4rem .85rem; cursor: pointer; transition: all var(--transition-fast); }
.rev-like:hover { border-color: var(--color-accent); color: var(--color-accent); }
.rev-like.is-liked { border-color: #e6a817; color: #b9820f; background: rgba(230, 168, 23, .1); }
.rev-like[disabled] { cursor: default; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .detail-layout { grid-template-columns: 1fr; gap: 2rem; }
    .detail-gallery { position: static; }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .detail-heading h1 { font-size: 1.6rem; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .spec-list { grid-template-columns: 1fr; }
    .btn-add-cart { min-width: 140px; }
    .rev-summary { grid-template-columns: 1fr; gap: 1.25rem; }
    .rev-summary__score { border-right: none; border-bottom: 1px solid var(--color-border); padding-right: 0; padding-bottom: 1.25rem; }
}

/* Ürün etiketleri (detay) */
.detail-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.detail-tag { font-size: .78rem; color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border); padding: .28rem .7rem; border-radius: 20px; text-decoration: none; transition: all var(--transition-fast); }
.detail-tag:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Ürün kişiselleştirme alanları (panelden ürün bazında tanımlanır) */
.customizer { margin: 24px 0 18px; padding: 22px; border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border)); border-radius: 18px; background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)); }
.customizer legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; color: var(--color-heading); font: 700 1.15rem/1.25 var(--font-heading, var(--font-serif)); }
.customizer__step { display: block; margin-bottom: 4px; color: var(--color-accent); font: 700 .68rem/1 var(--font-body, var(--font-sans)); letter-spacing: .12em; text-transform: uppercase; }
.customizer__intro { clear: both; max-width: 62ch; margin: 0 0 18px; color: var(--color-text-muted); font-size: .88rem; line-height: 1.55; }
.customizer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.customizer__field { display: grid; gap: 7px; color: var(--color-heading); font-size: .78rem; font-weight: 700; }
.customizer__field small { color: var(--color-text-muted); font-weight: 500; }
.customizer__field--wide { grid-column: 1 / -1; }
.customizer select,
.customizer input[type="text"],
.customizer textarea { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); color: var(--color-text); font: 500 .88rem/1.4 var(--font-body, var(--font-sans)); transition: border-color .2s ease, box-shadow .2s ease; }
.customizer textarea { resize: vertical; }
.customizer select:focus,
.customizer input[type="text"]:focus,
.customizer textarea:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent); }
.customizer__assurance { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--color-text-muted); font-size: .76rem; line-height: 1.4; }
.customizer__assurance svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--color-success); }

@media (max-width: 560px) {
    .customizer { padding: 18px 14px; }
    .customizer__grid { grid-template-columns: 1fr; }
    .customizer__field--wide { grid-column: auto; }
}

.detail-favorite svg,
.product-card__fav svg { width: 20px; height: 20px; display: block; }