/* Site fontu — Bricolage Grotesque (değişken, 200–800), tanım css/style.css
   başında. Tüm ara kesitler gerçek; sentetik kalınlaştırma yok. */
body { font-family: var(--font-display); color: #333; }

.product-container {
    max-width: 1200px;
    margin: 40px auto 15px;   /* alt boşluk da bölüm arası 15px'e eşit */
    padding: 0 20px;
}

/* METİN SEÇİMİ — yalnız bu sayfada açık.
   css/style.css:2'deki evrensel `* { user-select: none }` tüm sitede seçimi
   kapatıyor; ürün detayda bileşen adı, yorum, açıklama gibi metinlerin
   kopyalanabilmesi gerekiyor. #product-container * özgüllüğü (1,0,0) olduğu
   için .wishlist-icon / .ca-opt gibi kapsamlı `none` kurallarını da ezer.
   Sayfanın tüm içeriği (yorumlar, tartışmalar dahil) bu kabın içinde. */
#product-container, #product-container * {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* Son bölüm ile footer arası da 15px olsun. `.site-footer`ın genel 40px üst
   marjı (css/style.css) TÜM sayfaları etkilediği için doğrudan değiştirilmiyor;
   kardeş seçiciyle yalnız ürün detayında sıfırlanıyor (.product-container
   sadece urun.html'de var). */
.product-container ~ .site-footer { margin-top: 0; }

/* ── İLK YÜKLEME İSKELETİ (urun.html içinde statik durur) ──
   Kap boşken footer ekranın tepesine çıkıyordu. Kutu ölçüleri gerçek
   düzenle (.hero-box padding 40px / mobilde 20px) eşleşsin diye elle
   verildi. Parıltı .skeleton sınıfından geliyor (css/style.css). */
.pd-sk-hero {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    padding: 40px;
    display: flex;
    gap: 50px;
    margin-bottom: 15px;
}
.pd-sk-img { flex: 0 0 350px; height: 320px; border-radius: 16px; }
.pd-sk-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.pd-sk-line { border-radius: 6px; }
.pd-sk-pills { display: flex; gap: 10px; }
.pd-sk-pill { width: 110px; height: 32px; border-radius: 20px; }
.pd-sk-btn { width: 200px; height: 48px; border-radius: 10px; margin-top: 8px; }
/* Alttaki bölüm kutularını temsil eden grid */
.pd-sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.pd-sk-box { height: 220px; border-radius: 12px; }

@media (max-width: 768px) {
    /* Gerçek kutular gibi ekranın kenarına kadar (bkz. .compat-box vb.) */
    .pd-skeleton { margin-left: -20px; margin-right: -20px; }
    .pd-sk-hero { flex-direction: column; padding: 20px; gap: 18px; margin-bottom: 10px; }
    .pd-sk-img { flex: none; width: 100%; height: 260px; }
    .pd-sk-info { gap: 10px; }
    .pd-sk-pill { width: 88px; height: 28px; }
    .pd-sk-btn { width: 160px; height: 44px; }
    .pd-sk-grid { grid-template-columns: 1fr; gap: 10px; }
    .pd-sk-box { height: 170px; }
}

/* ── Bölüm kartları ──
   Sayfadaki altı ana bölüm aynı kart görünümünü paylaşır. Bu değerler eskiden
   js/urun.js içinde satır-içi yazılıydı; medya sorgusuyla yönetilemedikleri
   (mobilde tam genişlik / eşit boşluk) için buraya taşındı.
   Bölümler arası boşluk: HEPSİ 10px. */
.hero-box, .ratings-attrs-box, .compat-box, .analysis-superbox,
.pd-noanalysis-box, .muadiller-section, #reviews-section, .discussions-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 15px;
}

/* Öneri şeritleri de artık kart: başlığı ve ürünleri birlikte kapsayan çerçeve.
   Ayrı bir `margin: 15px 0` YOK — üstündeki boşluk önceki kartın alt marjından
   geliyor; iki marj birlikte verilirse aralar 15px'ten sapıyor. */
.muadiller-section { padding: 30px 40px; }

/* ── BÖLÜM BAŞLIK STANDARDI ──
   Sayfadaki TÜM bölüm başlıkları tek yerden yönetilir: aynı font, punto, ağırlık
   ve renk. Bu kural işe yarasın diye js/urun.js'teki satır-içi font-size /
   font-weight / color bildirimleri kaldırıldı (satır-içi stil CSS'i ezer);
   markup'ta yalnız boşluk veren margin'ler kaldı.
   Font: başlık fontu — var(--font-display) (Bricolage Grotesque, css/style.css).
   Değişken fontta 700 gerçek kesit; sentetik kalınlaştırma yok.
   Ürün adı (.product-title, H1) da aynı fontta, ama punto/renk ayrı kuralda. */
.product-container .attrs-title,
.product-container .section-head,
.product-container .pd-sec-title,
.product-container .pr-title,
.product-container .pd-title,
.product-container .pd-na-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;           /* 17px — mobilde de aynı, ayrı override yok */
    font-weight: 700;
    color: #2f483c;
}
/* Uyarı başlığı kırmızı KALIR — rengi anlam taşıyor (içerik analizi yok). */
.product-container .pd-na-title { color: #e31837; }

/* Kutu 1: Intro (Üst Kısım) */
.hero-box {
    display: flex;
    gap: 50px;
    padding: 40px;
}
.hero-img-col {
    flex: 0 0 350px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero-img-col img#main-product-img {
    width: 280px;
    height: 280px;
    object-fit: contain;
    border-radius: var(--al-radius-img);
    mix-blend-mode: multiply;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GALERİ STİLLERİ */
.thumbnails-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 5px;
    width: 100%;
    margin-top: 15px;
    scrollbar-width: none; /* Firefox */
}
.thumbnails-strip::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.thumbnail-item {
    flex: 0 0 60px;
    height: 60px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.thumbnail-item img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.thumbnail-item.active { border: 2px solid #2f483c; transform: scale(1.05); }

.set-primary-btn {
    margin-top: 15px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.set-primary-btn:hover { background: #2f483c; color: #fff; border-color: #2f483c; }

.hero-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Öneri şeritlerindeki kart markasıyla (.sim-brand) BİREBİR aynı: 0.75rem/700/#888.
   Mobildeki .sim-brand daralması (0.60rem) buraya UYGULANMAZ — o daralma dar
   kartlara özgü, hero'da 9.6px marka okunaksız olurdu. */
.brand-name {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}
.product-title {
    font-size: 2rem;
    color: #111;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* Hemen Al Butonu */
.buy-button {
    background: #000;
    color: #fff;
    padding: 15px 40px;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 10px;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.buy-button:hover {
    transform: scale(1.05);
    background: #2f483c;
}

/* ── Ürün aksiyon barı: birincil (Satın Al) + hayalet ikincil (Karşılaştır / Rutine Ekle) ── */
/* margin-bottom: Satın Al / Rutine Ekle ile kutunun alt kenarı arasına pay */
.act-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; margin-bottom: 16px; }
/* space-between + caret düzeni kalktı: açılır menü yok. Düğmenin içi soldan sağa:
   çanta ikonu + "Satın Al" + ince chevron. İkisi de statik inline SVG — eski
   Lottie yükleyicisi kaldırıldı (lottie-web sayfadan çıkarılmıştı, kod hep
   yedeğe düşüyordu). Aralarındaki boşluk .act-primary'nin gap'inden gelir. */
.act-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: #2f483c; color: #fff; border: none; border-radius: 10px;
    padding: 13px 24px; font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    cursor: pointer; box-shadow: 0 6px 16px rgba(47,72,60,0.20); transition: background 0.18s;
}
.act-primary:hover { background: #24382e; color: #fff; box-shadow: 0 9px 22px rgba(47,72,60,0.30); transform: translateY(-1px); }
.act-primary svg { width: 18px; height: 18px; }
.act-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: #2f483c; border: none; border-radius: 10px;
    padding: 11px 14px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
    cursor: pointer; transition: background 0.18s, color 0.18s;
}
.act-ghost:hover { background: #eef2ef; }
.act-ghost svg { width: 18px; height: 18px; }
.act-ghost:disabled { opacity: 0.5; cursor: default; }
.act-added {
    display: inline-flex; align-items: center; gap: 8px;
    color: #2f483c; font-weight: 700; font-size: 0.95rem; padding: 11px 14px;
    animation: actPop 0.25s ease;
}
.act-added svg { width: 18px; height: 18px; }
@keyframes actPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.act-fade-out { opacity: 0 !important; transition: opacity 0.5s ease; }
@media (max-width: 768px) {
    .act-primary, .act-ghost, .act-added { font-size: 0.9rem; }
    .act-primary { padding: 11px 18px; }
}

/* Adresses These Concerns */
.concerns-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 30px;
}
.concerns-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; }
.concerns-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.c-pill {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Ratings & Attributes */
.ratings-attrs-box {
    padding: 30px 40px;
    display: flex;
    flex-wrap: wrap;      /* satır-içiyle aynı davranış — dar ekranda sütunlar alt alta */
    gap: 40px;
    align-items: flex-start;
}

/* ── "İçerik Analizi Mevcut Değil" bölümü ──
   İçerik listesi elde edilemeyen ürünlerde .analysis-superbox'ın yerine geçer.
   Kart görünümü (zemin/köşe/gölge/marj) yukarıdaki paylaşılan bölüm kuralından,
   mobil tam-genişlik de aşağıdaki medya sorgusundan geliyor — burada yalnız
   bölüme özgü kırmızı vurgu var. Palet uydurulmadı: #e31837 (--al-red),
   #fdecef zemin ve #f6c9d2 kenar üçlüsü .prof-glow'dan (css/style.css) alındı. */
.pd-noanalysis-box { padding: 30px 40px; }
.pd-na-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pd-na-icon {
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fdecef; border: 1px solid #f6c9d2; color: #e31837;
}
.pd-na-title { font-size: 1.1rem; font-weight: 700; color: #e31837; margin: 0; }
.pd-na-text { margin: 0 0 18px; color: #555; font-size: 0.92rem; line-height: 1.6; max-width: 620px; }
.pd-na-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fdecef; color: #e31837; border: 1px solid #f6c9d2; border-radius: 10px;
    padding: 10px 18px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: background 0.18s, border-color 0.18s;
}
.pd-na-btn:hover { background: #e31837; color: #fff; border-color: #e31837; }

/* Sana Özel Uyum kutusu — position/overflow, üye olmayan kullanıcıya gösterilen
   blurlu kilit katmanının (inset:0 ile konumlanıyor) çalışması için ŞART. */
.compat-box {
    position: relative;
    overflow: hidden;
    padding: 30px;
}
.ratings-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.r-score { font-size: 3rem; font-weight: 700; color: #111; line-height: 1; margin-bottom: 8px; }
.r-stars { color: #f39c12; font-size: 1.2rem; letter-spacing: 2px; }
.r-count { font-size: 0.85rem; color: #888; margin-top: 5px; }

.attrs-col {
    flex: 1;
}
.attrs-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; }
.attrs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.a-pill {
    border: 1px solid #eef0f2;
    padding: 6px 14px;
    border-radius: 15px;
    font-size: 0.8rem;
    color: #666;
    background: #fdfdfd;
}

/* Picky Analysis Widget */
.analysis-superbox {
    padding: 30px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.a-left { flex: 1; min-width: 350px; }
.a-right { flex: 1; min-width: 300px; }

.section-head { font-size: 1.1rem; font-weight: 700; margin-bottom: 5px; }
.section-sub { font-size: 0.85rem; color: #888; margin-bottom: 25px; }

.donut-flex {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* SVG DOUGHNUT */
.svg-donut {
    width: 160px;
    height: 160px;
    transform: rotate(-90deg);
}
.donut-ring { stroke: #f0f0f0; stroke-width: 17; fill: transparent; }
.donut-segment {
    stroke-width: 17;
    fill: transparent;
    transition: stroke-dashoffset 1s ease-in-out;
}
.d-green { stroke: #4caf50; }
.d-teal { stroke: #14b8a6; }
.d-yellow { stroke: #ffc107; }
.d-red { stroke: #f44336; }
.d-grey { stroke: #eceff0; }

/* ── Risk kutucukları (donut'un sağında 2×2) ──
   Eski `.legend-list` / `.lg-*` dikey açılır listesinin yerini aldı: o liste
   grubu açınca maddeleri virgülle ayrılmış tek blok olarak veriyordu.
   Kutucuklar aynı zamanda "İçinde Ne Var?" listesinin filtresi. */
.ing-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.ing-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    color: #444;
    text-align: left;
    cursor: pointer;
    transition: opacity .18s, border-color .18s, box-shadow .18s;
}
.ing-tile-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* MASAÜSTÜ: nokta → sayı → etiket tek satır (sarmal satır-içi kalır).
   MOBİL: aşağıdaki medya sorgusunda sarmal üste, etiket alta geçer. */
.ing-tile-top { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ing-tile-num { font-weight: 800; color: #111; }
.ing-tile-lbl { font-weight: 600; color: #333; min-width: 0; overflow-wrap: anywhere; }
.ing-tile:disabled { cursor: default; opacity: .45; }
/* Bir kutucuk seçiliyken diğerleri soluklaşır (seçili olan "parlak" kalır). */
.ing-tiles.has-filter .ing-tile { opacity: .45; }
.ing-tiles.has-filter .ing-tile.is-on {
    opacity: 1;
    border-color: #2f483c;
    box-shadow: 0 2px 10px rgba(47,72,60,0.12);
}

/* ── "İçinde Ne Var?" — madde madde açılan liste ── */
.iv-box { margin-top: 22px; border-top: 1px solid #f0f0f0; padding-top: 14px; }
.iv-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 6px 0;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #111;
}
.iv-caret { transition: transform .2s ease; flex-shrink: 0; color: #9aa5a0; }
.iv-box.open > .iv-toggle .iv-caret { transform: rotate(90deg); }
.iv-body { display: none; }
/* padding-top: açılınca ilk madde başlığa yapışıyordu — aradaki tek boşluk
   .iv-toggle'ın 6px'lik dolgusuydu. */
.iv-box.open .iv-body { display: block; padding-top: 10px; }

.iv-row { border-bottom: 1px solid #f0f2f1; }
/* İki ayrı gizleme sebebi, iki ayrı sınıf:
     .iv-off  → risk filtresi dışında kaldı
     .iv-clip → "ilk 5" sınırının ötesinde
   Kırpma CSS'te `nth-child` ile YAPILAMAZ: nth-child filtreyle gizlenmiş
   satırları da sayar, o yüzden 6. sıradan sonraki bir filtre sonucu (ör. 37.
   sıradaki orta riskli madde) hiç görünmezdi. Sayım js/urun.js ivGorunur(). */
.iv-row.iv-off, .iv-row.iv-clip { display: none; }
.iv-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 2px;
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--font-display);
}
.iv-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.iv-name { font-size: 0.95rem; font-weight: 700; color: #111; overflow-wrap: anywhere; }
.iv-risk { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; }
/* İçi BOŞ halka (ekran görüntüsündeki gibi) — dolu daire değil. */
.iv-dot { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid currentColor; flex-shrink: 0; }
.iv-note {
    display: none;
    padding: 0 2px 12px; margin-top: -2px;
    font-size: 0.82rem; line-height: 1.55; color: #667;
}
.iv-row.open .iv-note { display: block; }
.iv-row.open .iv-head .iv-caret { transform: rotate(90deg); }
.iv-more, .attr-more {
    display: block; width: 100%; margin-top: 12px; padding: 10px 0;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: #8a9a92;
}
.iv-more:hover, .attr-more:hover { color: #2f483c; }

/* "İçerik Bilgileri": kapalıyken ilk 3 rozet (tipik ekranda bir satır).
   KIRPMA YALNIZ MOBİLDE — masaüstünde yer bol, rozetlerin tamamı açık gelir ve
   "Tümünü Gör" gereksizleşir. Kural `display` ezmek yerine medya sorgusuyla
   sınırlandı: `.a-pill` flex öğesi olduğu için doğru `display` değerini tahmin
   etmek gerekmiyor. JS'teki .attr-more işleyicisi (js/urun.js) mobilde çalışmaya
   devam eder, masaüstünde düğme zaten gizli. */
@media (max-width: 768px) {
    .attrs-list:not(.open) .a-pill:nth-child(n+4) { display: none; }
}
@media (min-width: 769px) {
    .attr-more { display: none; }
}
.attr-more { border-top: 1px solid #f0f0f0; margin-top: 14px; }

/* Üstteki "Özellikler" ızgarası: endişe etiketleri ve öne çıkan içerik rozetleri
   AYNI kutuda; ikisi de sade `.c-pill`, düzen farkı satır içi stille değil burada. */
.concerns-list .c-pill {
    justify-content: center;
    text-align: center;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}

/* Compatibility Accordions */
.compat-acc { display: flex; flex-direction: column; gap: 10px; }
.ca-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px 20px;
    cursor: pointer;
}
.ca-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ca-title {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ca-icon { font-size: 1.2rem; }
.ca-badges { display: flex; gap: 10px; }
.bdg { font-size: 0.8rem; padding: 4px 10px; border-radius: 12px; font-weight: 600; }
.bdg.good { color: #0d6efd; background: #e6f2ff; }
.bdg.bad { color: #dc3545; background: #fceced; }

.ca-body {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eaeaea;
    font-size: 0.9rem;
}
.ca-item.open .ca-body { display: block; }

.ing-row { margin-bottom: 10px; }
.ing-row strong { display: block; margin-bottom: 4px; }
.ing-r-good { color: #0d6efd; }
.ing-r-bad { color: #dc3545; }

/* ── Öneri kartları (marka ürünleri / benzer içerikli) ──
   Eskiden js/urun.js'te satır-içi stil + onmouseover/onmouseout ile yapılıyordu;
   satır-içi stil medya sorgusuyla ezilemediği için buraya taşındı. Hover artık
   CSS — JS'in sabit değerlere geri dönmesi de böylece ortadan kalktı. */
.sim-strip { display: flex; gap: 20px; }
.sim-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sim-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #ccc;
}
.sim-imgwrap {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    /* NOT: eskiden justify-content:flex-start idi (resim, altındaki yazının
       başladığı yerle hizalansın diye). Artık çerçevenin kendi zemini var; sola
       yaslı resim 85% genişlikte sağda boş gri bırakıp hata gibi görünüyordu,
       bu yüzden ortalandı. Çerçeve görünür olduğu için hizalama referansı da o. */
    justify-content: center;
    margin-bottom: 12px;
    /* Bu çerçevede radius ve zemin HİÇ yoktu — şerit görselleri keskin köşeliydi. */
    border-radius: var(--al-radius-img);
    background: var(--al-img-bg);
    overflow: hidden;
}
.sim-imgwrap img { max-width: 85%; max-height: 85%; object-fit: contain; mix-blend-mode: multiply; }
.sim-brand { font-size: 0.75rem; font-weight: 700; color: #888; text-transform: uppercase; margin-bottom: 4px; }
.sim-name {
    font-size: 0.9rem; font-weight: 600; color: #111; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    /* Ad alanı HER kartta iki satır kaplasın: uzun adlar zaten line-clamp ile
       2 satırda kesiliyordu, ama kısa adlar 1 satır kalıp kartların alt hizasını
       kaydırıyordu. `em` (px/rem değil) şart — mobil blok font-size'ı 0.8rem'e
       düşürüyor; em elemanın kendi font-size'ına bağlı olduğu için iki
       breakpoint'te de tam 2 satır eder (2 × line-height 1.3). */
    min-height: 2.6em;
}

/* Horizontal Scrollbar Styling */
.horizontal-scroll::-webkit-scrollbar {
    height: 4px;
}
.horizontal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.horizontal-scroll::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}
.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* ── TABLET / DAR MASAÜSTÜ (768–1200px): risk kutucukları ───────────────────
   Bu aralıkta HİÇBİR medya sorgusu yoktu, masaüstünün tek satırlı kutucuğu
   geçerliydi ama sığmıyordu: .a-left 324–460px'e iniyor, kutucuğun iç genişliği
   ~40–100px kalıyor ve "Yüksek Risk" .ing-tile-lbl'deki `overflow-wrap:
   anywhere` yüzünden kelime ortasından kırılıyordu ("Yükse / k Risk").
   Mobildeki iki satırlı düzen buraya da taşındı; sağdaki akordeona da biraz
   daha dar pay verildi.

   ÜST SINIR 1200 (1120 DEĞİL) — tarayıcıda ölçüldü: tek satır düzeni sayı iki
   haneliyken 1160px'e, üç haneliyken 1200px'e kadar taşıyor. .product-container
   zaten max-width:1200px olduğu için 1200 üstünde hiçbir ölçü değişmiyor →
   masaüstü görünümü (1366/1440/1920) aynen duruyor.
   ALT SINIR 768.02 (769 DEĞİL) — kesirli görünüm genişliğinde (tarayıcı
   yakınlaştırma, dpr 1.25) 768.8px ölçüldü: orada ne mobil blok (max-768) ne de
   min-769 tutuyor, iki kolon masaüstü kuralıyla alt alta sarıyordu. */
@media (min-width: 768.02px) and (max-width: 1199.98px) {
    /* js/urun.js:521,529 satır-içi flex/min-width basıyor → !important şart */
    .a-left  { flex: 1.45 1 0 !important; min-width: 0 !important; }
    .a-right { flex: 1 1 0 !important; min-width: 240px !important; }
    /* aurascan.html de aynı .analysis-superbox / .donut-flex sınıflarını
       kullanıyor ama orada kutu TAM GENİŞLİK (.a-left yok) ve tek satırlı
       kutucuk rahat sığıyor → onu bozmamak için:
       · gap yerine SADECE column-gap (aurascan'de kutu sarmalı olduğu için
         görünen boşluk satır aralığıdır, o 40px kalır),
       · padding aurascan'de satır-içi 30px ile zaten korunuyor,
       · donut ve kutucuk kuralları .a-left altına kapsandı. */
    .analysis-superbox { column-gap: 28px; padding: 26px 24px; }
    .a-left .donut-flex { gap: 18px !important; }   /* satır-içi gap:24px'i ezer */
    .a-left .svg-donut { width: 130px; height: 130px; flex-shrink: 0; }

    .a-left .ing-tiles { gap: 6px; }
    .a-left .ing-tile {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 9px 10px;
    }
    .a-left .ing-tile-num { font-size: 0.95rem; line-height: 1; }
    .a-left .ing-tile-lbl {
        font-size: 0.74rem;
        font-weight: 700;
        line-height: 1.25;
        white-space: nowrap;
    }
}

@media(max-width: 768px) {
    .product-container {
        overflow-x: hidden !important;
    }
    .hero-box, .ratings-attrs-box, .analysis-superbox {
        flex-direction: column;
        padding: 20px !important;
        gap: 20px !important;
    }
    /* "X Markasının Diğer Ürünleri" / "Benzer İçerikli Ürünler" şeritlerinin
       ALTINDAKİ kaydırma çubuğu mobilde gizlenir — parmakla kaydırıldığı için
       göstergeye gerek yok. Kaydırma işlevi aynen sürer.
       (Aynı kalıp .thumbnails-strip'te de kullanılıyor.) */
    .horizontal-scroll { scrollbar-width: none; }            /* Firefox */
    .horizontal-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */

    /* Öneri kartları: ince-uzun. Görsel öncelikli — kutu daralır, foto uzar ve
       kenarlara yaklaşır, yazılar buna göre küçülür. */
    .sim-strip { gap: 10px; }
    /* Kart sağa-sola ve aşağı-yukarı biraz tombullaştı: 150→165px, dolgu 8→12px.
       Dolgu tek değer olduğu için üst boşluk yan boşlukla eşit. */
    .sim-card { flex: 0 0 165px; padding: 12px; }
    .sim-imgwrap { height: 190px; margin-bottom: 10px; }
    .sim-imgwrap img { max-width: 100%; max-height: 100%; }
    .sim-brand { font-size: 0.60rem; }   /* bir kademe küçüldü (0.66 → 0.60) */
    .sim-name { font-size: 0.8rem; }
    /* Donut ve risk kutucukları mobilde de yan yana kalsın */
    .donut-flex {
        flex-direction: row !important;
        align-items: center;
        gap: 14px !important;
        justify-content: flex-start !important;
    }
    /* "Sana Özel" uyum halkasıyla aynı çap: bölüm ona benzer, dolgun dursun. */
    .svg-donut {
        width: 118px !important;
        height: 118px !important;
        flex-shrink: 0;
    }
    /* Kutucuklar İKİ SATIRLI: üstte ● + sayı, altında etiket. Tek satırda
       "Yüksek Risk" ancak okunmaz bir puntoyla sığıyordu; iki satır hem daireye
       yer bırakıyor hem de kutuları dolgun gösteriyor. */
    /* Yatay dolgu/aralık 360px'de ölçülerek belirlendi: "Yüksek Risk" tek satırda
       kalsın diye (daha genişinde alt satıra kaçıp tüm kutuları uzatıyordu). */
    .ing-tiles { gap: 4px; }
    .ing-tile {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 9px 7px;
    }
    .ing-tile-dot { width: 9px; height: 9px; }
    .ing-tile-num { font-size: 0.95rem; line-height: 1; }
    .ing-tile-lbl { font-size: 0.72rem; font-weight: 700; line-height: 1.25; }
    .a-left {
        min-width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    /* "İçerik & Cilt Uyumluluğu" akordeonu MOBİLDE KALKTI: aynı bilgiyi
       "Sana Özel Uyum" bölümündeki 2×2 .pd-skinfit ızgarası veriyor.
       Masaüstünde ve karsilastir.html'de olduğu gibi duruyor. */
    .a-right { display: none; }
    
    .hero-img-col { flex: 0 0 auto; width: 100%; height: auto; margin-bottom: 20px; }
    
    .concerns-col, .attrs-col {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Yalnız ŞERİDİN kendisi — eskiden `> div` ile başlık satırına da flex
       zorluyordu. Başlık satırı artık .pd-head (kendi flex düzeni var) ve
       tam-genişlik/çizgi kurallarını bozmaması için kapsam daraltıldı. */
    .muadiller-section > .horizontal-scroll {
        display: flex !important;
    }

    /* Eskiden mobil alt menü arkasına gizlenmesin diye 100px dolgu vardı; ürün
       detayında alt menü artık hiç basılmıyor (js/bottom-nav.js sadece 5 ana
       sayfada çalışıyor) ve menü olan sayfalarda boşluğu `body.has-tab-bar`
       veriyor. Kalan 100px ölü boşluktu — son bölüm ile footer arasını 130px'e
       çıkarıyordu. */
    .product-container {
        padding-bottom: 0 !important;
    }

    /* Rating popup mobil tab bar üstünde olsun */
    #rating-popup {
        z-index: 10001 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   YORUM SİSTEMİ (product_reviews)
   ═══════════════════════════════════════════════════════════ */

/* margin-top:40px ve padding-top:40px KALDIRILDI: bu bölüm artık diğerleriyle
   aynı kart (yukarıdaki paylaşılan kural) ve dolgusunu `#reviews-section,
   .discussions-section { padding: 30px 40px }` veriyor. Kalan 40px üst marj
   bölümler arası eşit 15px boşluğu tek başına bozuyordu. */
#reviews-section {
    border-top: 1px solid #eee;
}

.rv-section-inner { max-width: 860px; }

.rv-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.rv-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

/* ── Özet çubukları ── */
.rv-summary {
    display: flex;
    gap: 32px;
    align-items: center;
    background: #fafafa;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.rv-avg-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}

.rv-avg-num {
    font-size: 2.6rem;
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.rv-avg-stars { display: flex; gap: 2px; }

.rv-avg-count { font-size: 0.82rem; color: #888; }

.rv-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }

.rv-bar-row { display: flex; align-items: center; gap: 8px; }

.rv-bar-label { font-size: 0.8rem; color: #555; width: 22px; text-align: right; flex-shrink: 0; }

.rv-bar-track {
    flex: 1;
    height: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}

.rv-bar-fill {
    height: 100%;
    background: #f5a623;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.rv-bar-pct { font-size: 0.78rem; color: #888; width: 32px; text-align: right; flex-shrink: 0; }

/* ── Sıralama çubuğu ── */
.rv-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rv-sort-label { font-size: 0.85rem; color: #888; margin-right: 4px; }

.rv-sort-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 0.82rem;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
}

.rv-sort-btn:hover { border-color: #aaa; color: #111; }

.rv-sort-btn.rv-sort-active {
    background: #2f483c;
    border-color: #2f483c;
    color: #fff;
}

/* ── Yorum kartı ── */
.rv-list { display: flex; flex-direction: column; gap: 16px; }

.rv-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 22px 24px;
}

.rv-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.rv-avatar {
    flex-shrink: 0;
    display: flex;
}

.rv-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.rv-meta { flex: 1; }

.rv-meta-name { font-weight: 700; font-size: 0.92rem; color: #111; }

.rv-meta-date { font-size: 0.78rem; color: #aaa; margin-top: 1px; }

.rv-card-stars { display: flex; gap: 1px; align-items: center; margin-left: auto; flex-shrink: 0; }

.rv-title { font-weight: 700; font-size: 1rem; color: #111; margin-bottom: 6px; }

.rv-body { font-size: 0.92rem; color: #444; line-height: 1.65; margin: 0 0 14px; white-space: pre-wrap; }

.rv-card-footer { display: flex; gap: 10px; align-items: center; }

/* ── Faydalı butonu ── */
.rv-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 0.82rem;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
}

.rv-helpful-btn:hover { border-color: #2f483c; color: #2f483c; }

.rv-helpful-btn.rv-voted { background: #2f483c; border-color: #2f483c; color: #fff; }

.rv-helpful-count { font-weight: 600; }

/* ── Yanıtla butonu ── */
.rv-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 0.82rem;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
}

.rv-reply-toggle:hover { border-color: #555; color: #111; }

/* ── Silme butonu ── */
.rv-delete-btn, .rv-delete-reply-btn {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #ccc;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.15s;
}

.rv-delete-btn:hover, .rv-delete-reply-btn:hover { color: #e31837; background: #fff0f0; }

/* ── Yanıt bölümü ── */
.rv-replies {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rv-replies { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; }

.rv-reply-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 2px;
}
.rv-reply-input-wrap { margin-top: 6px; }

.rv-reply-avatar { flex-shrink: 0; display: flex; }

.rv-reply-body { flex: 1; }

.rv-reply-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.82rem;
}

.rv-reply-meta strong { color: #111; font-weight: 700; }

.rv-dot { color: #ccc; }

.rv-date { color: #aaa; }

.rv-reply-text { font-size: 0.88rem; color: #444; margin: 0; line-height: 1.55; }

/* ── Yanıt yazma alanı ── */
.rv-reply-input-wrap {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 8px;
}

.rv-reply-input-avatar { flex-shrink: 0; display: flex; }

.rv-reply-form { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.rv-reply-textarea {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.rv-reply-textarea:focus { border-color: #2f483c; }

.rv-reply-submit {
    align-self: flex-end;
    padding: 6px 16px;
    border-radius: 8px;
    border: none;
    background: #2f483c;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rv-reply-submit:hover { opacity: 0.88; }

.rv-reply-submit:disabled { opacity: 0.5; cursor: default; }

/* Ürün sayfasındaki SATIR İÇİ yazma formu (başlıktaki yıldızlar buraya kaydırır).
   Kart görünümü .rv-write-card'dan miras; burada yalnız bölüme oturması için pay. */
.pr-inline-write { margin: 0 0 20px; }

/* ── Yorum yazma formu ── */
.rv-write-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 22px 24px;
    margin-bottom: 24px;
}

.rv-write-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.rv-write-avatar { flex-shrink: 0; display: flex; }

.rv-write-title { font-weight: 700; font-size: 1rem; color: #111; }

/* ── Yıldız seçici ── */
.rv-star-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}

.rv-star-pick {
    cursor: pointer;
    transition: transform 0.12s;
    display: block;
}

.rv-star-pick:hover { transform: scale(1.2); }

.rv-star-label {
    font-size: 0.85rem;
    color: #888;
    margin-left: 8px;
}

.rv-write-input {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.rv-write-input:focus { border-color: #2f483c; }

.rv-write-textarea {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    margin-bottom: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.rv-write-textarea:focus { border-color: #2f483c; }

.rv-write-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rv-write-hint { font-size: 0.78rem; color: #aaa; }

.rv-write-submit {
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    background: #2f483c;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rv-write-submit:hover { opacity: 0.88; }

.rv-write-submit:disabled { opacity: 0.5; cursor: default; }

/* ── Giriş CTA ── */
.rv-login-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 0.92rem;
    color: #555;
    flex-wrap: wrap;
}

.rv-auth-trigger {
    margin-left: auto;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid #2f483c;
    background: #fff;
    color: #2f483c;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
}

.rv-auth-trigger:hover { background: #2f483c; color: #fff; }

/* ── Boş durum ── */
.rv-empty {
    text-align: center;
    color: #aaa;
    font-size: 0.95rem;
    padding: 32px 0;
}

/* ── Mobil uyum ── */
@media (max-width: 600px) {
    .rv-summary { flex-direction: column; gap: 16px; }
    .rv-avg-block { flex-direction: row; gap: 12px; align-items: center; }
    .rv-avg-num { font-size: 2rem; }
    .rv-write-footer { flex-direction: column; align-items: flex-start; }
    .rv-write-submit { width: 100%; }
    .rv-login-cta { flex-direction: column; align-items: flex-start; }
    .rv-auth-trigger { margin-left: 0; width: 100%; }
}

@media(max-width: 480px) {
    /* Endişe damgaları dar ekranda da YAN YANA ikili kalır (biri solda, biri
       sağda). Eskiden burada tek sütuna düşürülüyorlardı; artık sadece boşluk
       daraltılıyor, uzun etiket .c-pill içinde alt satıra kırılıyor.
       Sütun sayısı js/urun.js:883'teki satır-içi grid'den (1fr 1fr) geliyor. */
    .concerns-list {
        gap: 8px !important;
    }
    .a-pill, .c-pill {
        font-size: 0.8rem !important;
        padding: 8px !important;
        overflow-wrap: anywhere;
    }
    .product-title {
        font-size: 1.5rem !important;
    }
}

@media(max-width: 400px) {
    .hero-box, .ratings-attrs-box, .analysis-superbox { padding: 16px !important; }
    .product-title { font-size: 1.32rem !important; }
    /* .attrs-title'ın 1rem !important'ı KALDIRILDI: bölüm başlıkları artık tek
       standarttan besleniyor ve bu kural onları standardın altına düşürüyordu
       (şerit başlıkları dahil). Mobil punto ortak kuralın kendi medya
       sorgusunda veriliyor. */
    .a-pill, .c-pill { font-size: 0.75rem !important; }
    /* İçerik analizi / cilt uyumu satırları taşmasın */
    .ca-title, .ca-body, .ing-r-good, .ing-r-bad, .iv-name, .iv-note, .bdg {
        overflow-wrap: anywhere; word-break: break-word;
    }
}

/* ==========================================================================
   TRENDYOL TARZI — Ürün Değerlendirmeleri (.pr-*) + Ürün Tartışması (.pd-*)
   ========================================================================== */

/* Değerlendirmeler ve Tartışma AYRI kartlar — kart kenarı zaten ayrım görevi
   gördüğü için aralarında ayrıca çizgi yok. */
#reviews-section, .discussions-section { padding: 30px 40px; }
.pr-inner { max-width: 100%; }

/* Site fontu (Bricolage) — Montserrat/kalın "garip font" görünümünü ez */
#reviews-section, .discussions-section, .pr-modal, .pd-modal,
#reviews-section button, #reviews-section input, #reviews-section textarea,
.pr-modal button, .pr-modal input, .pr-modal textarea, .pd-modal button {
    font-family: var(--font-display);
}

/* Başlık satırı (başlık solda, buton sağda) */
/* Başlığın hemen altında ince ayırıcı çizgi.
   padding-bottom = başlık ile çizgi arası, margin-bottom = çizgi ile içerik arası.
   İki bölüm (Değerlendirmeler / Tartışma) bu kuralı paylaşıyor. */
.pr-head, .pd-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
    margin-bottom: 18px;
}
/* .pr-title / .pd-title puntosu ve rengi artık ortak başlık kuralında
   (dosyanın başındaki "BÖLÜM BAŞLIK STANDARDI"). Burada yalnız düzen kaldı. */
.pr-title, .pd-title { margin: 0; }
.pr-cta, .pd-newbtn {
    flex-shrink: 0; padding: 10px 20px; border-radius: 10px; border: none;
    background: #2f483c; color: #fff; font-weight: 700; font-size: 0.9rem; cursor: pointer;
    transition: opacity 0.15s;
}
.pr-cta:hover, .pd-newbtn:hover { opacity: 0.9; }

/* Puan özet çubuğu */
.pr-summary-bar {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(90deg, #fff8ec, #fdf3df);
    border: 1px solid #f2e6c9; border-radius: 14px; padding: 14px 22px; margin-bottom: 18px;
}
.pr-sb-avg { display: flex; align-items: center; gap: 8px; }
.pr-sb-avg b { font-size: 1.4rem; color: #111; }
.pr-sb-dot { color: #caa; }
.pr-sb-count { font-size: 0.95rem; color: #555; font-weight: 600; }

/* Yatay kaydırma satırı */
.hs-wrap { position: relative; }
.pr-hscroll, .pd-hscroll {
    display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
}
.pr-hscroll::-webkit-scrollbar, .pd-hscroll::-webkit-scrollbar { display: none; }
.hs-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e5e5; background: #fff;
    color: #2f483c; font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12); transition: background 0.15s;
}
.hs-arrow:hover { background: #f4f6f4; }
.hs-left { left: -6px; }
.hs-right { right: -6px; }

/* AI özet kutusu */
.pr-ai {
    flex: 0 0 320px; max-width: 320px; height: 248px; overflow: hidden; cursor: pointer;
    scroll-snap-align: start;
    background: linear-gradient(160deg, #efe9ff, #f6ecff); border: 1px solid #e4dbff;
    border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column;
}
/* Kompakt kutuda madde listesini flex ile temiz kırp (line-clamp UL'de satırları
   üst üste bindiriyordu). min-height:0 → UL küçülüp taşan kısmı gizler, "Devamını Gör" görünür kalır. */
.pr-ai-clamp { overflow: hidden; min-height: 0; }
.pr-ai-more { margin-top: auto; padding-top: 8px; color: #6a4fa0; font-size: 0.85rem; font-weight: 600; }
/* Modal içindeki tam sürüm — sabit yükseklik yok */
.pr-ai-full { flex: none; max-width: none; width: 100%; height: auto; overflow: visible; cursor: default; margin-bottom: 20px; }
.pr-ai-para { margin: 8px 0 0; font-size: 0.9rem; color: #3d3457; line-height: 1.55; }
.pr-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pr-ai-badge {
    width: 26px; height: 26px; border-radius: 8px; background: #7a5ba6; color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pr-ai-title { font-weight: 800; color: #4a2f7a; font-size: 1rem; }
.pr-ai-info { color: #9b86c4; font-size: 0.85rem; cursor: help; }
.pr-ai-bullets { margin: 0; padding-left: 18px; color: #3d3457; font-size: 0.9rem; line-height: 1.55; flex: 1; }
.pr-ai-bullets li { margin-bottom: 6px; }
.pr-ai-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pr-ai-q { font-size: 0.82rem; color: #6a5b8c; margin-right: auto; }
.pr-ai-vote {
    display: inline-flex; align-items: center; gap: 5px;
    border: none; background: none; padding: 4px 6px;
    font-size: 0.85rem; cursor: pointer; color: #999; transition: color 0.15s;
}
.pr-ai-vote:hover:not(:disabled) { color: #555; }
.pr-ai-vote.active { color: #2f483c; }
.pr-ai-vote:disabled { cursor: default; }

/* Kompakt yorum kartı */
.pr-card {
    flex: 0 0 320px; max-width: 320px; height: 248px; overflow: hidden;
    scroll-snap-align: start; cursor: pointer;
    background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: box-shadow 0.15s, transform 0.15s;
    display: flex; flex-direction: column;
}
.pr-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-2px); }
.pr-card-scroll { flex: 1; overflow: hidden; }
.pr-card-title { font-size: 0.92rem; font-weight: 600; color: #111; margin-bottom: 5px; }
.pr-card-body {
    font-size: 0.88rem; color: #444; line-height: 1.5; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-card-foot { display: flex; align-items: center; margin-top: 10px; }
.pr-card-helpful { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: #888; }

/* Kart başlığı (tartışma kartı gibi): sol ad+yaş/cilt, sağ tarih+yıldız, ince çizgi */
.rvh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rvh-left { min-width: 0; }
.rvh-name { font-size: 0.92rem; font-weight: 600; color: #111; }
.rvh-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.rvh-age { font-size: 0.8rem; color: #555; font-weight: 500; }
.rvh-skin { font-size: 0.78rem; color: #555; font-weight: 600; background: #f0f0f0; padding: 2px 8px; border-radius: 5px; }
.rvh-right { text-align: right; flex-shrink: 0; }
.rvh-date { font-size: 0.75rem; color: #888; }
/* Kısa tarih yalnız mobil kompakt kartta açılır (aşağıdaki mobil bloğa bak). */
.rvh-d-short { display: none; }
.rvh-stars { margin-top: 3px; display: inline-flex; gap: 1px; }
.rvh-divider { height: 1px; background: #f0f0f0; margin: 10px 0 12px; }

/* Boş durum yazısı ("Henüz değerlendirme yok…" / "…henüz tartışma yok…").
   Hem Değerlendirmeler hem Tartışmalar bölümü bu sınıfı kullanır.
   Stil, içerik analizinin altındaki .ingredient-disclaimer ile birebir aynı
   (js/urun.js — "Bu içerik listesi değişebilir…"): ikisi de aynı sessiz not dili. */
.pr-empty {
    color: #999;
    padding: 24px 0;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    font-style: italic;
}

/* "Tümünü Göster" pill butonları */
.pr-showall-wrap, .pd-showall-wrap { display: flex; justify-content: center; margin-top: 8px; }
.pr-showall, .pd-showall {
    padding: 12px 34px; border-radius: 24px; border: 1px solid #ddd; background: #fff;
    color: #2f483c; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.15s;
}
.pr-showall:hover, .pd-showall:hover { border-color: #2f483c; background: #f6f8f6; }

/* ── Ürün Tartışması ── */
.pd-tabs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.pd-tabs::-webkit-scrollbar { height: 5px; }
.pd-tabs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.pd-tab {
    flex-shrink: 0; padding: 8px 16px; border-radius: 20px; border: 1px solid #e0e0e0;
    background: #fff; color: #555; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: all 0.15s;
}
.pd-tab span { color: #aaa; font-weight: 500; }
.pd-tab:hover { border-color: #2f483c; }
.pd-tab.active { background: #2f483c; border-color: #2f483c; color: #fff; }
.pd-tab.active span { color: rgba(255,255,255,0.7); }

/* Kompakt tartışma kartı (yatay geniş) */
.pd-card {
    flex: 0 0 480px; max-width: 480px; scroll-snap-align: start; cursor: pointer;
    background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 18px 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: box-shadow 0.15s, transform 0.15s;
    display: flex; flex-direction: column;
}
.pd-card:hover { box-shadow: none; transform: none; }

/* Ortak tartışma başlığı: sol ad+yaş+cilt, sağ üst tarih + altında kategori, ince çizgi */
.pd-head-row { display: flex; align-items: flex-start; gap: 10px; }
.pd-card-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pd-card-who { flex: 1; min-width: 0; }
/* Ad TEK BAŞINA bir satır (yaş artık alt satırda); uzun ad sarmak yerine kırpılır. */
.pd-card-name { font-weight: 600; font-size: 0.92rem; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-age { font-size: 0.8rem; color: #555; font-weight: 500; flex-shrink: 0; }
/* Yaş + cilt tipi YAN YANA. nowrap: cilt etiketleri kısa kodlarla sınırlı değil
   ("Karma ve Çok Hassas" gibi), sarmak yerine chip'in sonu üç noktayla kırpılır —
   .pr-card .rvh-sub'daki desenin aynısı. */
.pd-card-sub { margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.pd-skin {
    font-size: 0.78rem; color: #555; font-weight: 600; background: #f0f0f0;
    padding: 2px 8px; border-radius: 5px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-head-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pd-card-date { font-size: 0.75rem; color: #888; }
.pd-card-cat { background: #f0f2f1; color: #2f483c; font-size: 0.66rem; font-weight: 700; padding: 4px 9px; border-radius: 20px; text-transform: uppercase; }
.pd-divider { height: 1px; background: #f0f0f0; margin: 12px 0 14px; }

.pd-card-title { font-size: 1rem; font-weight: 600; color: #111; margin: 0 0 6px; line-height: 1.4; }
.pd-card-content {
    font-size: 0.9rem; color: #444; line-height: 1.5; margin: 0 0 14px; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-card .dc-actions { margin-top: auto; }
.pd-card .dc-action-btn, .pd-modal-list .dc-action-btn { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: #666; font-size: 0.85rem; padding: 4px; transition: color 0.15s; }
.pd-card .dc-action-btn svg, .pd-modal-list .dc-action-btn svg { width: 18px; height: 18px; }
.pd-card .dc-action-btn:hover, .pd-modal-list .dc-action-btn:hover { color: #2f483c; }
.pd-card .upvote-btn.upvoted, .pd-modal-list .upvote-btn.upvoted { color: #2f483c; }
.pd-card .upvote-btn.upvoted svg, .pd-modal-list .upvote-btn.upvoted svg { fill: currentColor; }

/* ── "Tümünü Göster" modalları (solda ürün, sağda liste) ── */
.pr-modal-overlay, .pd-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 12000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pr-modal, .pd-modal {
    background: #fff; border-radius: 18px; width: 100%; max-width: 1080px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.pr-modal-head, .pd-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid #eee; font-size: 1.1rem; font-weight: 800; color: #111;
}
.pr-modal-close, .pd-modal-close {
    border: none; background: none; width: 34px; height: 34px; border-radius: 50%;
    font-size: 1.5rem; line-height: 1; cursor: pointer; color: #666;
}
.pr-modal-close:hover, .pd-modal-close:hover { color: #111; }
.pr-modal-body, .pd-modal-body { display: flex; gap: 24px; padding: 22px 24px; overflow: hidden; flex: 1; min-height: 0; }
.pr-modal-product, .pd-modal-product {
    flex: 0 0 250px; align-self: flex-start; position: sticky; top: 0;
    background: #fafafa; border: 1px solid #eee; border-radius: 14px; padding: 16px;
}
.pr-mp-imgwrap, .pd-mp-imgwrap { width: 100%; aspect-ratio: 1/1; border-radius: var(--al-radius-img); overflow: hidden; background: #fff; margin-bottom: 12px; }
.pr-mp-imgwrap img, .pd-mp-imgwrap img { width: 100%; height: 100%; object-fit: contain; }
.pr-mp-brand, .pd-mp-brand { font-size: 0.75rem; color: #888; font-weight: 700; text-transform: uppercase; }
.pr-mp-name, .pd-mp-name { font-size: 0.95rem; color: #111; font-weight: 700; margin: 3px 0 8px; line-height: 1.35; }
.pr-mp-rating { font-size: 0.85rem; color: #555; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Ürün kartı alt satırı: yıldız + yuvarlak sağ-ok (Ürüne git) */
.pr-mp-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pd-mp-bottom { display: flex; align-items: center; justify-content: flex-end; margin-top: 12px; }
.pr-mp-arrow, .pd-mp-arrow {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #2f483c; color: #fff;
    display: flex; align-items: center; justify-content: center; text-decoration: none; transition: opacity 0.15s;
}
.pr-mp-arrow svg, .pd-mp-arrow svg { width: 16px; height: 16px; }
.pr-mp-arrow:hover, .pd-mp-arrow:hover { opacity: 0.88; }
.pr-modal-list, .pd-modal-list { flex: 1; overflow-y: auto; min-width: 0; padding-right: 4px; }

/* Sırala yazıları düz Inter */
.rv-sort-bar, .rv-sort-label, .rv-sort-btn { font-family: var(--font-display); font-weight: 500; }
/* Yıldız grupları: kendi içinde çok ufak aralık (flex gap'ten etkilenmesin) */
.rv-stars, .rvh-stars { display: inline-flex; gap: 1px; }

/* Modal tam kartında sil butonu sağ üstte */
.pr-modal-list .rv-card { position: relative; }
.pr-modal-list .rv-card > .rv-delete-btn { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* "Değerlendirme yapın" tetik çubuğu (modal üstü) */
.rv-write-trigger {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    border: 1px solid #e5e5e5; border-radius: 12px; background: #fafafa;
    padding: 14px 18px; color: #666; font-size: 0.95rem; margin-bottom: 16px;
    transition: border-color 0.15s, background 0.15s;
}
.rv-write-trigger:hover { border-color: #2f483c; background: #fff; color: #2f483c; }
.rv-write-wrap { margin-bottom: 16px; }

/* Modal içi tartışma başlatma formu */
.pd-write-wrap { margin-bottom: 18px; background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 16px; }
.pd-modal-input {
    width: 100%; box-sizing: border-box; margin-bottom: 10px;
    border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px 14px;
    font-family: var(--font-display); font-size: 0.92rem; outline: none; background: #fff;
}
.pd-modal-input:focus { border-color: #2f483c; }
textarea.pd-modal-input { resize: vertical; min-height: 90px; }

/* ── "Sana Özel Uyum" — uyum dairesi + profil rozetleri ──
   Blok js/urun.js'te satır-içi stille üretiliyor; düzeni belirleyen özellikler
   BİLEREK buraya taşındı, çünkü satır-içi stil medya sorgusuyla ezilemiyor ve
   mobilde rozetlerin dairenin yanına alınması gerekiyor.

   MASAÜSTÜ: büyük daire, damgalar dairenin ALTINDA ortalı.
   MOBİL (≤768px): daire solda küçük, damgalar sağında — aşağıdaki medya
   sorgusuna bak. */
.pd-compat-side { flex: 0 0 auto; text-align: center; }
/* Daire + (mobilde) 2×2 cilt tipi ızgarası sarmalayıcısı. Masaüstünde ızgara
   basılmadığı için burada yalnız daire var → düzen eskisiyle birebir aynı. */
.pd-compat-top { display: flex; align-items: center; gap: 34px; flex: 0 0 auto; }
.pd-compat-main { flex: 1; min-width: 260px; }
/* 2×2 "Cilt Tipi Uyumu" ızgarası SADECE MOBİLDE görünür; masaüstünde onun yerine
   "İçerik & Cilt Uyumluluğu" akordeonu (.a-right) duruyor. */
.pd-skinfit, .pd-skinfit-box, .pd-skinfit-wrap { display: none; }
.pd-compat-ring { position: relative; width: 180px; height: 180px; margin: 0 auto; }
/* .pd-compat-why (halkanın altındaki "Skorunu düşüren: …" satırı) KALDIRILDI:
   aynı bilgi zaten alttaki kırmızı "Dikkat" listesinde madde madde duruyor. */
/* SVG'nin width/height'ı ÖZNİTELİK olduğundan bu kural onları !important'sız ezer */
.pd-compat-ring svg { width: 100%; height: 100%; }
/* Skor puntosu satır-içi DEĞİL: daire masaüstünde 180px, mobilde 130px olduğu
   için puntonun medya sorgusuyla küçülebilmesi gerekiyor. */
.pd-compat-score { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.pd-compat-scorelabel { font-size: 0.78rem; font-weight: 700; color: #8a9a92; margin-top: 2px; }
/* .pd-compat-pills / .pd-pill / .pd-pill-break KALDIRILDI: dairenin yanındaki
   profil damgaları ("18 yaş altı", "Karma", "Gözenek") artık basılmıyor. */

/* Boş-durum metni ("Özel bir kullanım notu gerekmiyor…") — italik gri not. */
.pd-compat-empty {
    color: #999;
    font-size: 0.78rem;
    line-height: 1.5;
    font-style: italic;
}

/* "İyi Yönler" / "Kullanım Önerisi" alt başlıkları. Renkleri (yeşil/amber)
   anlam taşıdığı ve ikisinde farklı olduğu için satır içi kalıyor; punto ve
   ağırlık burada. */
/* 14px: satır başlıklarıyla (.pd-ci-title) aynı punto — ikisini renk ayırıyor. */
.pd-compat-subhead { font-size: 0.875rem; font-weight: 600; }   /* 14px semibold */

/* Uyum satırı: başlık ("Cildi nemlendirir", "Normal cildine uygun") + açıklaması */
.pd-ci-title  { font-size: 0.875rem; font-weight: 600; color: #1e332a; }  /* 14px semibold */
.pd-ci-reason { font-size: 0.8125rem; font-weight: 500; color: #667;   }  /* 13px medium — madde adı 14px'te kalır, yalnız açıklama 1px büyüdü */
/* Bileşen adı: faydanın YANINDA ikincil bilgi, bu yüzden .pd-ci-reason'dan da
   açık. Asıl okunacak şey ürünün ne işe yaradığı. */
.pd-ci-ing    { font-size: 0.8125rem; font-weight: 500; color: #9aa5a0; }

/* İyi Yönler / Kullanım Önerisi — maddeler arası ince gri çizgi */
.pd-compat-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.pd-compat-item:first-child { padding-top: 0; }
/* Son maddenin çizgisi yalnız "Tümünü Gör" YOKKEN kalkar — düğme varken
   istenen, düğmenin son gri çizginin ALTINDA durması. */
.pd-compat-list:not(.has-more) .pd-compat-item:last-child { border-bottom: none; }
.pd-compat-hidden { display: none; }
.pd-compat-list.open .pd-compat-hidden { display: flex; }
.pd-compat-more {
    display: block; width: 100%; text-align: center;
    background: none; border: none; padding: 14px 0 2px;
    color: #9aa0a6;                 /* soluk gri */
    font-weight: 600; font-size: 0.84rem;
    cursor: pointer; font-family: inherit;
}
.pd-compat-more:hover { color: #6b7280; }
/* "Daha Fazla →" — temel katmanda "Tümünü Gör"ün yerini alır. Aç/kapa DEĞİL,
   cilt/saç testine giden bir bağlantı (js/urun.js testUrl). Aynı konum ve ölçü,
   ama marka yeşili: gri bir bağlantı "kapalı içerik" değil "pasif" okunuyordu. */
.pd-compat-upsell {
    display: block; width: 100%; text-align: center;
    padding: 14px 0 2px;
    color: #2f483c; text-decoration: none;
    font-weight: 700; font-size: 0.84rem;
}
.pd-compat-upsell:hover { text-decoration: underline; }

/* Tüm tıklanabilir alanlar buton hissi */
.pr-ai-more, .pr-card-helpful, .pd-card, .pr-card, .pr-ai,
.hs-arrow, .pd-tab, .pr-showall, .pd-showall, .pr-cta, .pd-newbtn,
.rv-sort-btn, .pr-ai-vote, .rv-write-trigger { cursor: pointer; }
.pr-ai-more:hover { text-decoration: underline; }

/* ── Mobil ── */
@media (max-width: 768px) {
    /* Değerlendirme ve tartışma şeritlerindeki sağ/sol oklar mobilde gizlenir —
       parmakla kaydırılıyor, ok gereksiz ve kartların üstünü kapatıyordu.
       !important ŞART: wireHScroll() (js/yorumlar.js, js/urun.js) kaydırma
       konumuna göre satır-içi display:flex/none yazıyor. Kaydırma işlevi
       aynen sürer (.pr-hscroll/.pd-hscroll overflow-x:auto). */
    .hs-arrow { display: none !important; }

    /* Bölüm başlıkları için mobil punto override'ı YOK: 24px her ekranda aynı.
       Ölçüldü — 390px ve 360px genişlikte en uzun başlık 2 satıra sarıyor,
       küçültülmüş hâliyle de 2 satırdı; taşma veya yatay kaydırma oluşmuyor. */
    .pr-cta, .pd-newbtn { padding: 8px 14px; font-size: 0.82rem; }
    .pr-ai { flex-basis: 82vw; max-width: 82vw; }
    /* ── Tartışma kartı başlığı: yaş + cilt tipi YAN YANA sığsın ──
       Ölçüldü (351px): kart içi 251px idi ve bunun 131px'ini sağdaki kategori
       rozeti yiyordu ("Saç & Vücut Bakımı"); kullanıcı bloğuna 58px kalıyor, ad
       satırı bile üç satıra sarıyordu. Aşağıdaki kazançlar bloğu ~155px'e çıkarır.

       Kart 84vw KALIR: şerit (.pd-hscroll) bölüm dolgusu düşünce 296px oluyor ve
       84vw tam ona denk geliyor. 92vw denendi — kart 323px'e çıkıp şeridi taşırdı,
       tarih ve rozet kesildi. Yer bu yüzden dolgu/boşluk/rozetten açılıyor. */
    .pd-card { flex-basis: 84vw; max-width: 84vw; padding: 14px 10px; }
    .pd-head-row { gap: 6px; }
    /* Rozet ARTIK KIRPILMIYOR — tarih+rozet bloğu KENDİ SATIRINA iniyor.
       Eskiden .pd-card-cat'e max-width:62px vardı; kategori listesinin
       (js/urun.js DISC_CATS) ALTI ÜYESİ de 62px'e sığmadığı için rozet her
       zaman "ÜRÜN BİLG…" gibi kesiliyor, yani hiçbir bilgi vermiyordu.
       Sağ sütunu genişletmek ad/yaş/cilt bloğundan yer çalardı; bunun yerine
       .pd-head-right tam genişlikte alt satıra alındı: rozet solda, tarih
       sağda. Kart içi ~276px (84vw − 20px dolgu); en uzun rozet
       "CİLT BAKIMI YARDIMI" ~134px + tarih ~63px = ~197px → rahat sığıyor.
       Kapsam .pd-card: masaüstünde kart 480px, modal tam ekran — oralarda
       eski (tarih üstte, rozet altında, sağa yaslı) düzen sürüyor. */
    .pd-card .pd-head-row { flex-wrap: wrap; }
    .pd-card .pd-head-right {
        flex: 0 0 100%;            /* kendi satırına iner */
        flex-direction: row; align-items: center; justify-content: space-between;
        text-align: left; margin-top: 8px; gap: 8px;
    }
    .pd-card .pd-card-cat { font-size: 0.62rem; padding: 4px 9px; }
    .pd-age { font-size: 0.72rem; }
    .pd-card-sub { gap: 4px; }
    .pd-skin { font-size: 0.72rem; padding: 2px 5px; }

    /* ── Sarı puan çubuğu: tek satıra sığsın ──
       Ölçüldü (351px görünüm alanı): içerik 317px, yer 294px → iki satıra taşıyordu.
       Aşağıdaki küçültmeler ~60px kazandırıyor. Kapsam .pr-summary-bar ile sınırlı;
       modaldeki ürün kartı yıldızları (.pr-mp-rating) etkilenmez. */
    .pr-summary-bar { gap: 14px; padding: 12px 14px; }
    /* CSS width/height, renderStars'ın yazdığı width="22" sunum niteliğini ezer →
       yıldız boyutu için JS'e dokunmak gerekmiyor. */
    .pr-summary-bar .rv-stars svg { width: 17px; height: 17px; }
    .pr-sb-avg { gap: 6px; }
    .pr-sb-avg b { font-size: 1.15rem; }
    .pr-sb-count { font-size: 0.85rem; }

    /* ── Kompakt yorum kartı: yaş + cilt tipi YAN YANA ──
       profiles.skin_type dört kısa kodla sınırlı değil ("Karma ve Çok Hassas",
       "Kuru ve Hassas" …). Yan yana 197px'e kadar yer istiyorlar, kartta 127px
       vardı → satır sarıyordu. Kart genişletilir, tarih kısaltılır, sarma kapatılır;
       yine de sığmazsa cilt etiketi üç noktayla kırpılır (asla alt satıra geçmez).
       Tüm kurallar .pr-card ile kapsanır — "Tüm Yorumları Göster" modalindeki
       .rv-card'lar cardHeaderHTML'i paylaştığı için aynen kalmalı. */
    .pr-card { flex-basis: 88vw; max-width: 88vw; }
    .pr-card .rvh-d-long { display: none; }
    .pr-card .rvh-d-short { display: inline; }
    .pr-card .rvh-sub { flex-wrap: nowrap; min-width: 0; }
    .pr-card .rvh-age { flex-shrink: 0; }
    .pr-card .rvh-skin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pr-card .rvh-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pr-modal-overlay, .pd-modal-overlay { padding: 0; }
    .pr-modal, .pd-modal { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    /* Tam ekran modal: başlık durum çubuğunun, gövde ana ekran çizgisinin altında kalmasın. */
    .pr-modal-head, .pd-modal-head { padding-top: calc(18px + var(--sat, 0px)); }
    /* Mobilde: ürün ÜSTTE, liste ALTTA */
    .pr-modal-body, .pd-modal-body { flex-direction: column; gap: 16px; overflow-y: auto; padding: 16px; }
    .pr-modal-body, .pd-modal-body { padding-bottom: calc(16px + var(--sab, 0px)); }
    .pr-modal-product, .pd-modal-product { position: static; width: 100%; flex: none; display: flex; gap: 14px; align-items: center; }
    .pr-mp-imgwrap, .pd-mp-imgwrap { width: 84px; height: 84px; margin-bottom: 0; flex-shrink: 0; }
    .pr-modal-list, .pd-modal-list { overflow: visible; }

    /* Bölümler ekranın EN KENARINA kadar. .product-container mobilde 0 20px
       dolgu veriyor; -20px tam olarak kabın kenarına denk geldiği için taşma
       ve yatay kaydırma OLUŞMAZ. Köşe yuvarlaklığı (12px) KALIR. */
    .hero-box, .ratings-attrs-box, .compat-box, .analysis-superbox,
    .pd-noanalysis-box, .muadiller-section, #reviews-section, .discussions-section {
        margin-left: -20px;
        margin-right: -20px;
        padding: 20px !important;
    }
    /* "İçerik Analizi Mevcut Değil" — dar ekranda başlık sığsın, düğme genişlesin */
    .pd-na-head { gap: 10px; }
    .pd-na-icon { width: 34px; height: 34px; }
    .pd-na-icon svg { width: 19px; height: 19px; }
    /* .pd-na-title puntosu ortak mobil başlık kuralından geliyor (yukarıda) */
    .pd-na-text { font-size: 0.88rem; max-width: none; }
    .pd-na-btn { width: 100%; justify-content: center; }
    /* Alt marj 0: mobilde kapta `overflow-x:hidden` olduğu için blok formatlama
       bağlamı oluşuyor ve son bölümün 15px alt marjı DIŞARI SIZMIYOR. Kabın
       kendi marjı da eklenince footer arası 30px oluyordu; 0 yapınca içerideki
       15px tek başına kalıyor ve boşluk diğer bölüm aralarıyla eşitleniyor. */
    .product-container { margin: 15px auto 0; }   /* sayfa üst boşluğu da 15px */

    /* Daire mobilde SOLA yaslanır (eskiden tam genişlikte ortalanıyor, sağında
       koca bir boşluk kalıyordu) ve o boşluğa 2×2 cilt tipi ızgarası girer. */
    .pd-compat-side { width: auto; text-align: left; }
    .pd-compat-ring { width: 118px; height: 118px; margin: 0; }
    .pd-compat-score { font-size: 1.7rem; }   /* 118px dairenin içine sığsın */
    .pd-compat-scorelabel { font-size: 0.68rem; }
    .pd-compat-top { display: flex; align-items: center; gap: 14px; width: 100%; }
    .pd-compat-main { min-width: 100%; }

    /* ── 2×2 "Cilt Tipi Uyumu" — dairenin sağında (mobil) ──
       Kullanıcının kendi cilt tipi (ve hassasiyeti varsa Hassas) net; diğerleri
       silik ama okunur. Ölçüler .ing-tile ile aynı aileden. */
    /* Sarmalayıcı flex öğesi; ızgara ve altındaki açıklama birlikte taşınır. */
    .pd-skinfit-wrap {
        display: block;
        flex: 1;
        min-width: 0;
    }
    .pd-skinfit {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    /* Kutuların ürüne, yüzdenin kişiye ait olduğunu söyleyen satır. Bu cümle
       olmadan ikisi aynı şeyi anlatıyor sanılıyor ve ayrıştıklarında hata
       sanılıyor ("Hassas: Çok Uygun yazıyor ama skorum kırmızı"). */
    .pd-skinfit-note {
        margin: 8px 0 0;
        font-size: 0.7rem;
        line-height: 1.5;
        color: #7b8781;
    }
    .pd-skinfit-note b { color: #5c6b64; }
    .pd-skinfit-box { display: block; }
    .pd-skinfit-tile {
        display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
        padding: 8px 9px;
        background: #fff;
        border: 1px solid #eef0f2;
        border-radius: 12px;
        opacity: .45;
        transition: opacity .18s, border-color .18s, box-shadow .18s;
    }
    .pd-skinfit-tile.is-me {
        opacity: 1;
        border-color: #2f483c;
        box-shadow: 0 2px 10px rgba(47,72,60,0.12);
    }
    .pd-skinfit-name { font-size: 0.74rem; font-weight: 700; color: #1e332a; }
    .pd-skinfit-state { font-size: 0.68rem; font-weight: 700; }
}