/*
 * URUN SAYFASI DEGERLENDIRME BOLUMU (25.09.2026) — Views/Product/_Reviews.cshtml.
 * Ortak renkler/bilesenler degerlendirme.css'te (--dg-* degiskenleri, .dgf-*, .dgy-*); bu dosya yalniz
 * urun sayfasi duzeni. Mobil once: 360 px'te yatay kaydirma yok, dokunma alanlari >= 44 px.
 * Genis ekranda (>= 992 px, masaustu sekmesi) ozet solda, liste sagda.
 */
.udg { color: var(--dg-murekkep, #111726); font-size: 14px; min-width: 0; }
.udg *, .udg *::before, .udg *::after { box-sizing: border-box; }
.udg-duzen { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.udg-ozet, .udg-liste-alani { min-width: 0; }

.udg-h3 { font-size: 14px; font-weight: 700; margin: 16px 0 8px; }
.udg-soluk { color: var(--dg-soluk, #6b7280); }

/* Gonderim sonrasi tesekkur */
.udg-bildirim { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #eaf6ee; color: var(--dg-ok, #1b7f3b); font-weight: 600; }
.udg-bildirim:empty { display: none; }
.udg-bildirim:focus { outline: 3px solid rgba(27, 127, 59, .35); outline-offset: 2px; }

/* Ortalama */
.udg-ortalama { display: flex; align-items: center; gap: 12px; }
.udg-ortalama-sayi { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.5px; }
.udg-ortalama-yan { display: flex; flex-direction: column; gap: 4px; }
.udg-ortalama-yan .dgy-yildiz svg { width: 20px; height: 20px; }
.udg-ortalama-adet { color: var(--dg-soluk, #6b7280); font-size: 13px; }

/* Dagilim: her satir bir dugme (suzgec) */
.udg-dagilim { display: flex; flex-direction: column; gap: 2px; }
.udg-dagilim-satir { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.udg-dagilim-satir:hover:not(:disabled) { background: var(--dg-yumusak, #f7f7f8); }
.udg-dagilim-satir:focus-visible { outline: 3px solid rgba(255, 161, 4, .45); outline-offset: 1px; }
.udg-dagilim-satir[aria-pressed="true"] { border-color: var(--dg-ana, #ffa104); background: #fff6e5; font-weight: 600; }
.udg-dagilim-satir:disabled { cursor: default; opacity: .55; }
.udg-dagilim-etiket { white-space: nowrap; }
.udg-cubuk { display: block; height: 8px; border-radius: 4px; background: var(--dg-kenar, #e2e2e2); overflow: hidden; }
.udg-cubuk-dolu { display: block; height: 100%; background: var(--dg-ana, #ffa104); border-radius: 4px; }
.udg-dagilim-adet { text-align: right; font-variant-numeric: tabular-nums; }
.udg-ipucu { margin: 4px 0 0; font-size: 12px; color: var(--dg-soluk, #6b7280); }

.udg-bilgi-satir { margin: 12px 0 0; }

/* Bos durum */
.udg-bos-baslik { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.udg-bos p { margin: 0; }

/* Yaz / guncelle */
.udg-yaz { margin-top: 16px; }
.udg-yaz-btn { width: 100%; min-height: 48px; border: 1px solid var(--dg-ana, #ffa104); border-radius: 12px; background: var(--dg-zemin, #fff); color: var(--dg-murekkep, #111726); font-weight: 700; font-size: 15px; padding: 0 16px; cursor: pointer; }
.udg-yaz-btn[aria-expanded="true"] { background: #fff6e5; }
.udg-yaz-btn:focus-visible { outline: 3px solid rgba(255, 161, 4, .45); outline-offset: 2px; }
.udg-form { margin-top: 12px; padding: 14px; border: 1px solid var(--dg-kenar, #e2e2e2); border-radius: 12px; background: var(--dg-zemin, #fff); }
.udg-form[hidden] { display: none; }
.udg-uyari { margin-top: 16px; padding: 12px; border-radius: 10px; background: var(--dg-yumusak, #f7f7f8); line-height: 1.45; }
.udg-uyari a { color: inherit; font-weight: 700; text-decoration: underline; }
.udg-kural { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--dg-soluk, #6b7280); font-size: 13px; text-decoration: underline; }

/* Kontroller */
.udg-kontroller { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.udg-sirala-etiket { font-weight: 600; margin: 0; }
.udg-sirala { min-height: 44px; max-width: 100%; padding: 0 36px 0 12px; border: 1px solid var(--dg-kenar, #e2e2e2); border-radius: 10px; background-color: var(--dg-zemin, #fff); color: inherit; font-size: 16px; /* iOS yakinlastirmasin */ }
.udg-aktif { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 2px 2px 12px; border: 1px solid var(--dg-ana, #ffa104); border-radius: 22px; background: #fff6e5; max-width: 100%; }
.udg-aktif[hidden] { display: none; }
.udg-aktif-temizle { min-height: 40px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 20px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.udg-aktif-temizle:focus-visible { outline: 3px solid rgba(255, 161, 4, .45); }

/* Durum: hata gorunur, bilgi yalniz ekran okuyucuya */
.udg-durum { margin: 0; }
.udg-durum:not(.hata) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.udg-durum.hata { color: var(--dg-hata, #c62828); margin: 8px 0; }

/* Liste */
.udg-liste { list-style: none; margin: 0; padding: 0; }
.udg-liste:focus { outline: none; }
.udg-liste[aria-busy="true"], .udg[aria-busy="true"] .udg-liste { opacity: .6; }
.udg-oge { padding: 14px 0; border-bottom: 1px solid var(--dg-kenar, #e2e2e2); overflow-wrap: anywhere; }
.udg-oge:focus { outline: 2px solid rgba(255, 161, 4, .45); outline-offset: 2px; }
.udg-oge-bos { color: var(--dg-soluk, #6b7280); }
.udg-oge-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.udg-ad { font-weight: 700; }
.udg-oge-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.udg-tarih { color: var(--dg-soluk, #6b7280); font-size: 13px; }
.udg-metin { margin: 8px 0 0; white-space: pre-line; line-height: 1.5; }
.udg-yanit-tarih { font-weight: 400; color: var(--dg-soluk, #6b7280); margin-left: 6px; }
.udg-yanit-metin { white-space: pre-line; line-height: 1.45; }
.udg-cozum { border-left-color: var(--dg-ok, #1b7f3b); background: #f1f8f3; }
.udg-cozum .dgy-yanit-baslik { color: var(--dg-ok, #1b7f3b); }

.udg-daha { display: block; width: 100%; min-height: 48px; margin-top: 16px; border: 1px solid var(--dg-kenar, #e2e2e2); border-radius: 12px; background: var(--dg-zemin, #fff); color: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.udg-daha[hidden] { display: none; }
.udg-daha:disabled { opacity: .6; cursor: default; }
.udg-daha:focus-visible { outline: 3px solid rgba(255, 161, 4, .45); outline-offset: 2px; }

/* Genis ekran (masaustu sekmesi): ozet solda sabit genislik, liste sagda */
@media (min-width: 992px) {
    .udg-duzen { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
    .udg-duzen-bos { grid-template-columns: minmax(0, 560px); }
    .udg-daha { width: auto; min-width: 240px; margin-left: auto; margin-right: auto; padding: 0 24px; }
}

/* Mobil alt sayfa: sabit alt cubuk (z-index 1050) alt sayfanin sonunu ortmesin. Eskiden _Reviews icinde
   SITE GENELI ".offcanvas { bottom: 50px }" vardi (menuler dahil her alt sayfayi kaydiriyordu);
   artik yalniz urun sayfasinin alt sayfalari. */
@media (max-width: 991.98px) {
    #product-detail .offcanvas-bottom { bottom: 50px; }
    /* Alt sabit fiyat/sepet cubugu (~80px, "EFT/Havale" seridiyle) sayfanin altini ortuyordu: en alttaki
       "Daha fazla goster" yarim kaliyordu (25.09.2026 canary olcumu). Icerige cubuk kadar alt bosluk. */
    #offcanvasReviews .offcanvas-body { overflow-x: hidden; padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}

/* Karanlik tema: site [data-theme="dark"] kullanir */
[data-theme="dark"] .udg { color: #e5e7eb; }
[data-theme="dark"] .udg-dagilim-satir[aria-pressed="true"],
[data-theme="dark"] .udg-aktif,
[data-theme="dark"] .udg-yaz-btn[aria-expanded="true"] { background: rgba(255, 161, 4, .15); }
[data-theme="dark"] .udg-dagilim-satir:hover:not(:disabled),
[data-theme="dark"] .udg-uyari { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .udg-yaz-btn,
[data-theme="dark"] .udg-form,
[data-theme="dark"] .udg-sirala,
[data-theme="dark"] .udg-daha { background: transparent; color: #e5e7eb; border-color: rgba(255, 255, 255, .18); }
[data-theme="dark"] .udg-oge { border-bottom-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .udg-cubuk { background: rgba(255, 255, 255, .15); }
[data-theme="dark"] .udg-bildirim, [data-theme="dark"] .udg-cozum { background: rgba(27, 127, 59, .18); }