/* =====================================================================
   URUN DETAY > DEGERLENDIRMELER (yeni tasarim, Plan a4ade8cf, 02.11.2026)
   Kaynak: tasarim-uygulama/handoff_urun_degerlendirmeler (koyu masaustu 1440, acik tema, mobil 390).
   Kapsam: sekme govdesi (.udKok), davet bandi (.udDavet), yorum penceresi (.udModal); sekme seridinin mobil
   sag kenar solmasi. product-detail.blade.php bu dosyayi comments.css YERINE yukler (comments.css diger
   sayfalarda kalir). Token'lar handoff README'sinden; acik tema body.light ile yalniz token degisir.
   ===================================================================== */
.udKok, .udDavet, .udModal .modal-content {
    --udKart: #20212B; --udIc: #1C1D26; --udAlan: #111117;
    --udKenar: #333444; --udKenar2: #2A2B38; --udKenar3: #4E4F5C;
    --udMetin0: #EDEEF2; --udMetin1: #C8C9D8; --udMetin2: #ABACB5; --udMetin3: #8B8C99;
    --udAcc: #80F1B1; --udAccT: rgba(128,241,177,.12); --udAccB: rgba(128,241,177,.42); --udAccUstu: #0A2416; --udAccHover: #A8F6CE;
    --udYildiz: #E9B535; --udYildizBos: #5C5D6E; --udCubuk: #31323C;
    --udKehribar: #E8C268; --udKehribarT: rgba(232,194,104,.08); --udKehribarB: rgba(232,194,104,.38);
    --udKirmizi: #F0908A; --udKirmiziT: rgba(224,85,63,.10); --udKirmiziB: rgba(224,85,63,.55);
    --udTip: #2A2B38; --udTipGolge: 0 12px 28px rgba(0,0,0,.4); --udGolge: 0 30px 70px rgba(4,5,6,.55);
    color: var(--udMetin1);
}
body.light .udKok, body.light .udDavet, body.light .udModal .modal-content {
    --udKart: #FFFFFF; --udIc: #F5F4EE; --udAlan: #F0EEE6;
    --udKenar: #E3E1D9; --udKenar2: #E8E6DF; --udKenar3: #C7C5BC;
    --udMetin0: #1F1E1D; --udMetin1: #3D3C38; --udMetin2: #6B6A65; --udMetin3: #5F5E58;
    --udAcc: #137E4C; --udAccT: rgba(19,126,76,.10); --udAccB: rgba(19,126,76,.40); --udAccUstu: #FFFFFF; --udAccHover: #1A9A5E;
    --udYildiz: #D99A0E; --udYildizBos: #C7C5BC; --udCubuk: #ECEAE3;
    --udKehribar: #7A5F0E; --udKehribarT: #FFF8EA; --udKehribarB: #E8C47A;
    --udKirmizi: #B3402C; --udKirmiziT: rgba(196,68,47,.07); --udKirmiziB: rgba(196,68,47,.50);
    --udTip: #FFFFFF; --udTipGolge: 0 12px 28px rgba(0,0,0,.12); --udGolge: 0 24px 56px rgba(31,30,29,.14);
}
.udKok *, .udDavet *, .udModal .modal-content * { box-sizing: border-box; }
.udKok [hidden], .udDavet [hidden], .udModal [hidden] { display: none !important; }
.udKok a, .udModal a { color: var(--udAcc); text-decoration: underline; text-underline-offset: 3px; }
.udKok a:hover, .udModal a:hover { color: var(--udAcc); text-decoration-thickness: 2px; }
.udKok button:focus-visible, .udDavet button:focus-visible, .udModal button:focus-visible, .udKok a:focus-visible, .udModal a:focus-visible { outline: 2px solid var(--udAcc); outline-offset: 2px; }

/* ---- Yildiz (svg) ------------------------------------------------------ */
.udYildiz { display: block; flex: none; }
.udYildiz path { fill: none; stroke: var(--udYildizBos); }
.udYildiz.dolu path { fill: var(--udYildiz); stroke: var(--udYildiz); }
.udYildizlar { display: inline-flex; gap: 2px; vertical-align: middle; }

/* ---- Dugmeler ------------------------------------------------------------ */
.udBtnAna, .udBtnCizgi {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px;
    border-radius: 10px; font-size: 13px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; cursor: pointer;
    font-family: inherit; line-height: 1; transition: background .16s, border-color .16s, color .16s, filter .16s;
}
.udBtnAna { background: var(--udAcc); border: 1px solid var(--udAcc); color: var(--udAccUstu); }
.udBtnAna:hover:not(:disabled) { filter: brightness(1.06); color: var(--udAccUstu); }
.udBtnAna:disabled { cursor: wait; opacity: .8; }
.udBtnCizgi { background: transparent; border: 1px solid var(--udKenar3); color: var(--udMetin1); min-height: 38px; }
.udBtnCizgi:hover:not(:disabled) { border-color: var(--udMetin3); color: var(--udMetin0); }
.udBtnCizgi:disabled { cursor: wait; opacity: .7; }
.udDoner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: udDon .7s linear infinite; }
@keyframes udDon { to { transform: rotate(360deg); } }

/* ---- Govde ---------------------------------------------------------------- */
.udKok { display: flex; flex-direction: column; gap: 22px; font-size: 13.5px; line-height: 1.5; }

/* Ozet (K2/K3): puan | dagilim | eylem */
.udOzet {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) 240px; gap: 32px; align-items: center;
    padding: 18px 22px; border-radius: 12px; background: var(--udIc); border: 1px solid var(--udKenar);
}
.udOzetUst { display: contents; } /* masaustunde puan + dagilim dogrudan izgaraya; mobilde kendi izgarasi */
.udPuan { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.udPuanSayi { font-size: 40px; font-weight: 800; line-height: 1; color: var(--udMetin0); font-variant-numeric: tabular-nums; }
.udPuanAlt { font-size: 12.5px; color: var(--udMetin2); white-space: nowrap; }
.udDagilim { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.udDagRow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--udMetin2); font-variant-numeric: tabular-nums; }
.udDagEtiket { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.udDagCubuk { display: block; height: 6px; border-radius: 999px; background: var(--udCubuk); overflow: hidden; }
.udDagCubuk i { display: block; height: 100%; border-radius: 999px; background: var(--udYildiz); transition: width .3s ease; }
.udDagAdet { text-align: right; }
.udEylem { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Kriter tooltip */
.udTip { position: relative; display: inline-flex; justify-content: center; }
.udKriterDugme {
    min-height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--udMetin2); font-size: 12.5px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.udKriterDugme:hover { color: var(--udMetin0); }
.udTt {
    position: absolute; right: 0; bottom: calc(100% + 8px); width: 270px; padding: 10px 12px; border-radius: 10px;
    background: var(--udTip); border: 1px solid var(--udKenar3); box-shadow: var(--udTipGolge);
    font-size: 12.5px; line-height: 1.5; color: var(--udMetin0); text-align: left; z-index: 3;
    opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s;
}
.udTt a { display: block; margin-top: 6px; font-weight: 700; }
.udTip:hover .udTt, .udTip:focus-within .udTt, .udKriter.acik .udTt { opacity: 1; visibility: visible; }

/* Liste (K5/K6) */
.udListe { display: flex; flex-direction: column; gap: 4px; }
.udListeBas { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.udListeBaslik { margin: 0; font-size: 16px; font-weight: 800; color: var(--udMetin0); }
.udYalnizPuan { font-size: 12.5px; color: var(--udMetin3); }
.udYaziliYok { margin: 0; font-size: 13px; color: var(--udMetin2); }
.udKart { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
.udKart + .udKart { border-top: 1px solid var(--udKenar2); }
.udAvatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--udIc); border: 1px solid var(--udKenar); color: var(--udMetin2);
    display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
}
.udKartGovde { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.udKartUst { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.udKartKim { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.udKartKim b { font-size: 13.5px; font-weight: 800; color: var(--udMetin0); }
.udKartTarih { font-size: 12px; color: var(--udMetin3); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.udKartMetin { margin: 0; font-size: 14px; line-height: 1.65; color: var(--udMetin1); overflow-wrap: break-word; word-break: normal; white-space: pre-line; }
.udYanit { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--udIc); box-shadow: inset 3px 0 0 var(--udAcc); }
.udYanitEtiket { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--udAcc); }
.udYanitMetin { font-size: 13px; line-height: 1.6; color: var(--udMetin1); overflow-wrap: break-word; }
.udYanitTarih { font-size: 11.5px; color: var(--udMetin3); }
.udAlt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 6px; }
.udGosterilen { font-size: 12.5px; color: var(--udMetin3); }
.udAltHata { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--udKirmizi); }

/* Bos hal */
.udBos { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; text-align: center; }
.udBosIkon { width: 44px; height: 44px; border-radius: 12px; background: var(--udIc); border: 1px solid var(--udKenar); color: var(--udMetin3); display: flex; align-items: center; justify-content: center; }
.udBosBaslik { font-size: 14.5px; font-weight: 800; color: var(--udMetin0); }
.udBosMetin { max-width: 420px; font-size: 13px; line-height: 1.55; color: var(--udMetin2); }
.udBosEylem { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }

/* ---- Davet bandi (K11): sekme kartinin ustunde, kehribar ----------------- */
.udDavet {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
    padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--udKehribarT); border: 1px solid var(--udKehribarB);
}
.udDavetIkon { width: 36px; height: 36px; border-radius: 10px; background: var(--udKart); border: 1px solid var(--udKehribarB); display: flex; align-items: center; justify-content: center; }
.udDavetMetin { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.udDavetMetin b { font-size: 14px; font-weight: 800; color: var(--udMetin0); }
.udDavetMetin span { font-size: 12.5px; line-height: 1.5; color: var(--udMetin2); }
.udDavetKapat { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--udMetin2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.udDavetKapat:hover { color: var(--udMetin0); background: var(--udKart); }
.dtPage .reviewInviteBand, .dtPage .udDavet { margin-bottom: 12px; }

/* ---- Pencere (K9/K10): Bootstrap modal kabugu, kendi ici ------------------ */
.udModal .modal-dialog { max-width: 500px; }
.udModal .modal-content {
    background: var(--udKart); border: 1px solid var(--udKenar); border-radius: 16px; box-shadow: var(--udGolge);
    padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; max-height: 90vh;
}
.udModal.udAnim .modal-content { animation: udBelir .2s ease-out; }
@keyframes udBelir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.udModalAcik .modal-backdrop.show { background-color: #0A0B0D; opacity: .78; }
body.light.udModalAcik .modal-backdrop.show { background-color: #1F1E1D; opacity: .3; }
.udTutamac { display: none; width: 44px; height: 4px; border-radius: 999px; background: var(--udKenar3); margin: 4px auto 0; }
.udModalUst { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.udModalBaslik { margin: 0; font-size: 18px; font-weight: 800; color: var(--udMetin0); }
.udKapat { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--udMetin2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.udKapat:hover { color: var(--udMetin0); background: var(--udIc); }
.udForm { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.udBant { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--udKirmiziT); border: 1px solid var(--udKirmiziB); font-size: 13px; line-height: 1.5; color: var(--udMetin0); }
.udBantIkon { color: var(--udKirmizi); margin-top: 2px; display: flex; flex: none; }
.udYildizSec { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.udYildizSatir { display: flex; gap: 6px; }
.udYildizDugme { width: 46px; height: 46px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; }
.udYildizDugme:hover .udYildiz path { stroke: var(--udYildiz); }
.udYildizEtiket { min-height: 18px; font-size: 13px; font-weight: 800; color: var(--udMetin3); }
.udYildizEtiket.secili { color: var(--udYildiz); }
.udHata { font-size: 12.5px; font-weight: 700; color: var(--udKirmizi); }
.udAlan { display: flex; flex-direction: column; gap: 6px; margin: 0; cursor: text; }
.udAlanEtiket { font-size: 12.5px; font-weight: 700; color: var(--udMetin2); }
.udAlanNot { font-weight: 600; color: var(--udMetin3); }
.udAlanNot.zorunlu { color: var(--udKehribar); }
.udMetinAlani {
    width: 100%; min-height: 120px; padding: 10px 12px; border-radius: 10px; background: var(--udAlan); border: 1px solid var(--udKenar);
    font-size: 14px; line-height: 1.6; color: var(--udMetin0); resize: vertical; font-family: inherit; outline: none; transition: border-color .16s;
}
.udMetinAlani::placeholder { color: var(--udMetin3); }
.udMetinAlani:focus { border-color: var(--udAcc); box-shadow: none; }
.udMetinAlani.hatali { border-color: var(--udKirmizi); }
.udMetinAlani:disabled { opacity: .7; }
.udAlanAlt { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--udMetin3); }
.udSayac { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.udKvkk { margin: 0; font-size: 12px; line-height: 1.55; color: var(--udMetin2); }
.udBtnGonder { width: 100%; min-height: 46px; font-size: 13.5px; }
.udOk { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 6px; text-align: center; }
.udOkDaire { width: 56px; height: 56px; border-radius: 50%; background: var(--udAccT); border: 1px solid var(--udAccB); color: var(--udAcc); display: flex; align-items: center; justify-content: center; animation: udBuyu .3s ease; }
@keyframes udBuyu { 0% { transform: scale(.6); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.udOkMesaj { font-size: 16px; font-weight: 800; color: var(--udMetin0); }
.udOkNot { font-size: 13px; color: var(--udMetin2); }
.udOkKapat { width: 100%; min-height: 44px; margin-top: 6px; font-size: 13.5px; }

/* ---- Mobil (K12) ----------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Sekme seridi: sag kenarda 40px solma (kaydirilabilir oldugunu soyler) */
    .dtPage .detailTab { position: relative; }
    .dtPage .detailTab::after { content: ""; position: absolute; right: 0; top: 0; width: 40px; height: 49px; pointer-events: none; border-radius: 0 14px 0 0; background: linear-gradient(90deg, transparent, var(--dtCard, #20212B)); }
    .udKok { gap: 18px; }
    .udOzet { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
    .udOzetUst { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
    .udPuanSayi { font-size: 34px; }
    .udPuanAlt { white-space: normal; }
    .udDagilim { gap: 5px; }
    .udDagRow { grid-template-columns: 24px minmax(0, 1fr) 24px; }
    .udEylem { align-items: stretch; }
    .udEylem .udBtnAna { width: 100%; min-height: 44px; }
    .udKart { padding: 14px 0; }
    .udKartUst { flex-direction: column; align-items: flex-start; gap: 3px; }
    .udAlt .udBtnCizgi { width: 100%; min-height: 44px; }
    .udBos { padding: 26px 14px; }
    /* Davet: X sag ustte (1. satir), dugme 2. satirda tam genislik */
    .udDavet { grid-template-columns: 36px minmax(0, 1fr) 36px; }
    .udDavetIkon { grid-column: 1; grid-row: 1; }
    .udDavetMetin { grid-column: 2; grid-row: 1; }
    .udDavetKapat { grid-column: 3; grid-row: 1; width: 36px; height: 36px; align-self: start; }
    .udDavetBtn { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 44px; }
    .udPuan { max-width: 120px; } /* alt metin iki satira sarar, cubuklara yer kalir */
}
@media (max-width: 575.98px) {
    /* Pencere alttan acilan sayfa: 390 cerceveye sabit, en cok %88, tutamac */
    .udModal .modal-dialog { --bs-modal-margin: 0px; margin: 0; max-width: 100%; align-items: flex-end; min-height: 100%; }
    .udModal .modal-content { border-radius: 20px 20px 0 0; border-bottom: 0; max-height: 88vh; padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
    .udModal.udAnim .modal-content { animation: udYukari .22s ease-out; }
    @keyframes udYukari { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
    .udTutamac { display: block; }
    .udKapat { width: 40px; height: 40px; }
    .udYildizSatir { gap: 4px; }
    .udYildizDugme { width: 48px; height: 48px; }
    .udYildizDugme .udYildiz { width: 36px; height: 36px; }
    .udMetinAlani { font-size: 16px; } /* iOS zum onlemi */
    .udBtnGonder, .udOkKapat { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .udModal.udAnim .modal-content, .udOkDaire, .udDoner { animation: none; }
}