/* =====================================================================
   DETAY SAYFALARI — yeni tasarım (e-pin / gold bar / ilan / CS skin)
   Kaynak: tasarim-uygulama/handoff_detay_sayfalari (koyu masaüstü 1600 ana
   kaynak, açık tema, mobil 390). Tek CSS; tüm kurallar .dtPage kökü altında,
   bileşen push stilleriyle çakışmaz (hızlı bakış penceresi etkilenmez).
   Açık tema: body.light — yalnız tokenlar değişir, DOM aynı.
   ===================================================================== */

.dtPage {
    --dtCard: #20212B;
    --dtInset: #1C1D26;
    --dtDeep: #111117;
    --dtMuted: #272834;
    --dtDivider: #2A2B38;
    --dtBorder: #333444;
    --dtBorderStrong: #4E4F5C;
    --dtText1: #EDEEF2;
    --dtText2: #C8C9D8;
    --dtText3: #ABACB5;
    --dtText4: #8B8C99;
    --dtAccent: #80F1B1;
    --dtAccentHover: #A8F6CE;
    --dtAccentRgb: 128, 241, 177;
    --dtOnAccent: #181820;
    --dtPurple: #343891;
    --dtPurpleBorder: #484CA8;
    --dtPurpleHover: #3F44A8;
    --dtOnPurple: #EDEEF6;
    --dtGold: #E8B24C;
    --dtGoldRgb: 232, 178, 76;
    --dtDanger: #E0553F;
    --dtDangerRgb: 224, 85, 63;
    --dtBadgeRed: #A8321F;
    --dtBadgeRedBorder: #C4442F;
    --dtShadow: none;
    --dtZoomBg: rgba(24, 24, 32, 0.72);
    --dtZoomText: #C8C9D8;
    --dtSoldWash: rgba(24, 24, 32, 0.62);
    --dtMarkerRing: rgba(24, 24, 32, 0.6);
    --dtScroll: #4E4F5C;
    --dtBarBottom: 0px; /* mobilde sabit alt menü yüksekliği; detay.js günceller */

    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--dtText2);
}
body.light .dtPage {
    --dtCard: #FFFFFF;
    --dtInset: #F5F4EE;
    --dtDeep: #F5F4EE;
    --dtMuted: #F0EEE6;
    --dtDivider: #E8E6DF;
    --dtBorder: #E3E1D9;
    --dtBorderStrong: #C7C5BC;
    --dtText1: #1F1E1D;
    --dtText2: #1F1E1D;
    --dtText3: #6B6A65;
    --dtText4: #5F5E58;
    --dtAccent: #137E4C;
    --dtAccentHover: #1A9A5E;
    --dtAccentRgb: 19, 126, 76;
    --dtOnAccent: #FFFFFF;
    --dtPurpleHover: #4A4FB8;
    --dtOnPurple: #FFFFFF;
    --dtGold: #B07A1A;
    --dtGoldRgb: 176, 122, 26;
    --dtDanger: #C4442F;
    --dtDangerRgb: 196, 68, 47;
    --dtShadow: 0 1px 2px rgba(31, 30, 29, 0.05);
    --dtZoomBg: rgba(255, 255, 255, 0.86);
    --dtZoomText: #1F1E1D;
    --dtSoldWash: rgba(250, 249, 245, 0.62);
    --dtMarkerRing: rgba(31, 30, 29, 0.2);
    --dtScroll: #C7C5BC;
}

.dtPage *, .dtPage *::before, .dtPage *::after { box-sizing: border-box; }
.dtPage a { color: var(--dtAccent); text-decoration: none; transition: color .16s; }
.dtPage a:hover { color: var(--dtAccentHover); }
.dtPage p { margin: 0; }
.dtNum { font-variant-numeric: tabular-nums; }
.dtIcon { display: block; flex: none; }

/* ---------- Üst satır: sol kart + sağ panel (eşit yükseklik) ---------- */
.dtTop { display: flex; gap: 16px; align-items: stretch; }
.dtLeft { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dtLeft > .customAlert { margin: 0; }
.dtSide { flex: none; width: 376px; display: flex; flex-direction: column; gap: 12px; }

.dtCard {
    background: var(--dtCard);
    border: 1px solid var(--dtBorder);
    border-radius: 16px;
    box-shadow: var(--dtShadow);
}

/* ---------- Sol kart ---------- */
.dtMain {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}
.dtMainRow { flex: 1; display: flex; gap: 22px; align-items: stretch; }

/* Görsel kolonu */
.dtMedia {
    flex: none;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.dtMediaTop { display: flex; flex-direction: column; gap: 10px; }
.dtMediaBox { position: relative; width: 100%; }
.dtPage .productImage {
    position: relative;
    width: 100%;
    flex: none;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    border: 1px solid var(--dtBorder);
    background: var(--dtDeep);
    overflow: hidden;
    box-shadow: none;
}
.dtPage .productImage img#detailProductImage,
.dtPage .productImage > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.dtPage .productImage img.centered { padding: 0 24px; }
.dtPage .productImage.hasGallery img { cursor: zoom-in; }
.dtPage .productImage.hasItemCard { aspect-ratio: auto; height: auto; min-height: 340px; background: transparent; display: flex; align-items: center; }
/* Büyüt */
.dtPage .productImageZoom {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--dtZoomBg);
    border: 1px solid var(--dtBorderStrong);
    color: var(--dtZoomText);
    font-size: 14px;
    z-index: 2;
    transition: background .16s, border-color .16s, color .16s;
}
.dtPage .productImageZoom:hover { background: var(--dtMuted); border-color: var(--dtAccent); color: var(--dtText2); }
/* Çoklu görsel okları + sayaç */
.dtPage .productImageNav {
    width: 36px; height: 36px; position: absolute; top: 50%; transform: translateY(-50%); padding: 0;
    background: var(--dtZoomBg); border: 1px solid var(--dtBorderStrong); border-radius: 999px; color: var(--dtZoomText);
    font-size: 13px; display: flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer;
    transition: background .16s, border-color .16s;
}
.dtPage .productImageNav.is-prev { left: 10px; }
.dtPage .productImageNav.is-next { right: 74px; }
.dtPage .productImageNav:hover { background: var(--dtMuted); border-color: var(--dtAccent); }
.dtPage .productImageCounter {
    position: absolute; top: 10px; left: 10px; padding: 3px 10px; background: var(--dtZoomBg);
    border: 1px solid var(--dtBorderStrong); border-radius: 999px; color: var(--dtZoomText); font-size: 12px; line-height: 1.4; z-index: 2;
}
/* Tükendi karartması + rozet */
.dtSoldWash { position: absolute; inset: 0; background: var(--dtSoldWash); z-index: 1; }
.dtSoldBadge {
    position: absolute; top: 14px; left: 14px; height: 26px; padding: 0 11px; display: flex; align-items: center;
    border-radius: 7px; background: var(--dtBadgeRed); font-size: 10.5px; font-weight: 800; letter-spacing: .8px; color: #FFFFFF; z-index: 2;
}
/* Dış bağlantılar (skin) */
.dtExtRow { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; }
.dtExtBtn {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 9px;
    border-radius: 10px; border: 1px solid var(--dtBorder); background: var(--dtCard);
    font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--dtText3); text-align: left;
    transition: background .16s, border-color .16s, color .16s;
}
.dtExtBtn:hover { background: var(--dtMuted); border-color: var(--dtAccent); color: var(--dtText2); }
.dtExtBtn span { min-width: 0; }
/* Güven / teslimat bandı */
.dtBand {
    display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 11px;
    background: rgba(var(--dtAccentRgb), 0.06); border: 1px solid rgba(var(--dtAccentRgb), 0.24); color: var(--dtAccent);
    font-size: 12.5px; font-weight: 700; line-height: 1.35;
}
.dtBand b, .dtBand strong { font-weight: 700; color: var(--dtText2); }
.dtBand span { font-weight: 500; color: var(--dtText3); }
.dtBand.is-neutral { background: var(--dtInset); border-color: var(--dtBorder); color: var(--dtText4); }
.dtBand.is-neutral b { color: var(--dtText3); }
.dtBand.is-neutral span { color: var(--dtText4); }
a.dtBand:hover { background: rgba(var(--dtAccentRgb), 0.1); color: var(--dtAccent); }

/* Detay kolonu */
.dtInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.dtHead { display: flex; flex-direction: column; gap: 7px; }
.dtCategory { font-size: 12.5px; font-weight: 600; color: var(--dtAccent); width: fit-content; }
.dtTitle {
    font-size: 28px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; color: var(--dtText1);
    margin: 0; padding: 0; text-shadow: none; overflow-wrap: anywhere;
}
.dtTitle .dtWear { font-size: 18px; font-weight: 700; color: var(--dtText3); letter-spacing: 0; margin-left: 6px; white-space: nowrap; }
.dtRating { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dtRatingGroup { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dtText3); }
.dtRatingGroup span { color: var(--dtText4); }
.dtRatingGroup.is-empty { color: var(--dtText4); }
.dtStars { display: flex; align-items: center; gap: 2px; color: var(--dtGold); }
.dtStars svg { display: block; }
.dtStars.is-empty svg { fill: none !important; }
.dtDesc { font-size: 13.5px; line-height: 1.6; color: var(--dtText3); }
.dtAdvertNo { font-size: 11.5px; color: var(--dtText3); }
.dtAdvertNo b { color: var(--dtText2); font-weight: 700; }

/* ---------- Fiyat kartı ---------- */
.dtPrice {
    display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 14px;
    background: var(--dtInset); border: 1px solid var(--dtBorder);
}
.dtPriceTop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dtPriceCol { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dtPriceLabel { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: var(--dtText3); text-transform: uppercase; }
.dtPriceLabel.is-gold { color: var(--dtGold); }
.dtPriceRow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dtPriceVal { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--dtAccent); font-variant-numeric: tabular-nums; }
.dtPriceVal.is-gold { color: var(--dtGold); }
.dtPriceVal.is-muted { color: var(--dtText4); }
.dtPriceUsd { font-size: 14px; font-weight: 600; color: var(--dtText3); font-variant-numeric: tabular-nums; }
.dtPriceSide { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
.dtPriceSideRow { display: flex; align-items: center; gap: 8px; }
.dtOldPrice { font-size: 15px; font-weight: 600; color: var(--dtText4); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.dtBadgeRed {
    height: 24px; padding: 0 9px; display: flex; align-items: center; border-radius: 6px; white-space: nowrap;
    background: var(--dtBadgeRed); border: 1px solid var(--dtBadgeRedBorder); font-size: 11px; font-weight: 800; color: #FFFFFF;
}
.dtBadgeNeutral {
    height: 24px; padding: 0 9px; display: flex; align-items: center; border-radius: 6px; white-space: nowrap;
    background: var(--dtMuted); border: 1px solid var(--dtBorderStrong); font-size: 10.5px; font-weight: 800; color: var(--dtText3);
}
.dtBadgeSteam { height: 24px; padding: 0 9px; display: flex; align-items: center; border-radius: 6px; white-space: nowrap; background: rgba(var(--dtAccentRgb), 0.1); border: 1px solid rgba(var(--dtAccentRgb), 0.3); font-size: 11px; font-weight: 800; color: var(--dtAccent); }
.dtSaving { font-size: 11.5px; color: var(--dtText4); }
.dtSaving b { color: var(--dtText2); font-weight: 700; }
.dtDivider { height: 1px; background: var(--dtDivider); }
.dtVDivider { width: 1px; background: var(--dtDivider); align-self: stretch; }
.dtPriceDual { display: flex; align-items: stretch; gap: 14px; }
.dtPriceDual .dtPriceCol { flex: 1; }
.dtPriceDual .dtPriceVal { font-size: 34px; letter-spacing: -.8px; }
.dtMeta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dtMetaItem { display: flex; align-items: center; gap: 8px; color: var(--dtText4); font-size: 12px; min-width: 0; }
.dtMetaItem span, .dtMetaItem .dtMetaText { color: var(--dtText3); }
.dtMetaItem b, .dtMetaItem strong { color: var(--dtText2); font-weight: 700; }
.dtMetaItem.is-muted b { color: var(--dtText4); }
.dtMetaItem a { color: inherit; }

/* Değişken tutar (baremli) kutusu fiyat kartının altında */
.dtPage .variableAmountBox { margin-top: 0; }

/* ---------- Float kartı (skin) ---------- */
.dtFloat { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--dtInset); border: 1px solid var(--dtBorder); }
.dtFloatHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dtSectionLabel { font-size: 11px; font-weight: 800; letter-spacing: .9px; color: var(--dtText3); text-transform: uppercase; }
.dtFloatVal { font-size: 13px; font-weight: 800; color: var(--dtText2); font-variant-numeric: tabular-nums; }
.dtFloatVal span { font-size: 11.5px; font-weight: 600; color: var(--dtText3); }
.dtFloatBarWrap { position: relative; padding: 3px 0; }
.dtFloatBar { position: relative; height: 8px; border-radius: 999px; overflow: hidden; display: flex; }
.dtFloatBar i { display: block; height: 100%; }
.dtFloatBar .fn { width: 7%; background: #4CAF50; }
.dtFloatBar .mw { width: 8%; background: #8BC34A; }
.dtFloatBar .ft { width: 23%; background: #E8B24C; }
.dtFloatBar .ww { width: 7%; background: #E08A3F; }
.dtFloatBar .bs { width: 55%; background: #C4442F; }
.dtFloatMarker { position: absolute; top: 0; width: 3px; height: 14px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--dtMarkerRing); transform: translateX(-50%); }
.dtFloatScale { position: relative; height: 14px; }
.dtFloatScale span { position: absolute; top: 0; font-size: 10px; color: var(--dtText4); white-space: nowrap; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.dtFloatScale span:first-child { left: 0; transform: none; }
.dtFloatScale span:last-child { right: 0; left: auto; transform: none; }
.dtFloatExtra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--dtText3); }
.dtFloatExtra b { color: var(--dtAccent); font-weight: 700; }

/* ---------- Öne çıkan özellikler ---------- */
.dtFeat { display: flex; flex-direction: column; gap: 8px; }
.dtFeatGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dtFeatGrid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dtFeatBox { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; background: var(--dtInset); border: 1px solid var(--dtBorder); min-width: 0; position: relative; }
.dtFeatBox .dtFeatLabel { font-size: 10px; font-weight: 600; color: var(--dtText4); }
.dtFeatBox .dtFeatVal { font-size: 12.5px; font-weight: 700; color: var(--dtText2); overflow-wrap: anywhere; }
/* Sticker/charm galerili kutular (mevcut x-detail-skill) */
.dtPage .dtFeatBox .skillCard { padding: 0; border: 0; background: transparent; gap: 3px; }
.dtPage .dtFeatBox .skillCardTitle { font-size: 10px; font-weight: 600; color: var(--dtText4); }
.dtPage .dtFeatBox .skillCardVal, .dtPage .dtFeatBox .skillGalleryMoreButton { font-size: 12.5px; font-weight: 700; color: var(--dtText2); }

/* ---------- Adet + toplam (x-basket-nav-editable-price yeniden giydirildi) ---------- */
/* Üç grup (ADET kutusu, TOPLAM · ALIŞ, TOPLAM · HEMEN SAT) aynı kalıp: 10.5px etiket + 6px + 48px kutu;
   satır alttan hizalanır, ipucu bloğu da kutuların alt kenarına oturur (tasarım: height 68, flex-end). */
.dtQtyRow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.dtQtyGroup { display: flex; flex-direction: column; }
.dtQtyLabel { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; color: var(--dtText3); }
.dtPage .priceQuantityEditor { display: flex; flex-direction: row !important; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.dtPage .priceQuantityEditor > .formGroup {
    position: relative; display: flex; align-items: center; height: 48px; margin: 19px 0 0; border-radius: 11px;
    border: 1px solid var(--dtBorder); background: var(--dtDeep); width: auto;
}
.dtPage .priceQuantityEditor > .formGroup::before {
    content: attr(data-label); position: absolute; left: 0; bottom: calc(100% + 6px);
    font-size: 10.5px; font-weight: 800; letter-spacing: .9px; line-height: 1.2; color: var(--dtText3); white-space: nowrap;
}
.dtPage .priceQuantityEditor .detailBasketNavButton {
    width: 44px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--dtText3) !important;
    font-size: 15px; cursor: pointer; transition: background .16s, color .16s;
}
.dtPage .priceQuantityEditor .detailBasketNavButton[data-role="minus"] { border-radius: 10px 0 0 10px !important; }
.dtPage .priceQuantityEditor .detailBasketNavButton[data-role="plus"] { border-radius: 0 10px 10px 0 !important; }
.dtPage .priceQuantityEditor .detailBasketNavButton:hover { background: var(--dtMuted) !important; color: var(--dtText2) !important; }
.dtPage .priceQuantityEditor .productNavigateInput {
    width: 62px; max-width: 62px; height: 46px; padding: 0 !important; margin: 0; text-align: center !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 15px; font-weight: 700; color: var(--dtText2); font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.dtPage .priceQuantityEditor .productNavigateInput::-webkit-outer-spin-button,
.dtPage .priceQuantityEditor .productNavigateInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dtPage .priceQuantityEditor .productNavigateInput:focus { outline: none; }
.dtPage .priceCounter { display: flex !important; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dtPage .priceCounter.d-none { display: flex !important; }
.dtPage .editablePriceWrapper {
    position: relative; display: flex; flex-direction: column; gap: 6px; font-size: 19px; font-weight: 800; line-height: 1;
}
.dtPage .editablePriceWrapper::before {
    content: attr(data-label); font-size: 10.5px; font-weight: 800; letter-spacing: .9px; color: var(--dtAccent); line-height: 1.2; white-space: nowrap;
}
.dtPage .editablePriceWrapper.totalBuyPrice::before { color: var(--dtGold); }
.dtPage .editablePriceWrapper .editablePriceText {
    display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 44px 0 14px; border-radius: 11px;
    background: var(--dtInset); border: 1px solid var(--dtBorder); cursor: pointer; transition: border-color .16s;
    color: var(--dtAccent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dtPage .editablePriceWrapper.totalBuyPrice .editablePriceText { color: var(--dtGold); }
.dtPage .editablePriceWrapper:hover .editablePriceText { border-color: var(--dtAccent); }
.dtPage .editablePriceWrapper.totalBuyPrice:hover .editablePriceText { border-color: var(--dtGold); }
.dtPage .editablePriceWrapper .priceEditButton {
    position: absolute; right: 12px; bottom: 15px; width: 18px; height: 18px; padding: 0; border: 0; background: transparent;
    color: var(--dtText4); font-size: 13px; opacity: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dtPage .editablePriceWrapper .priceEditButton:hover { transform: none; color: var(--dtText2); }
.dtPage .editablePriceWrapper .inlinePriceEditor {
    width: 150px !important; height: 48px !important; padding: 0 14px !important; border-radius: 11px !important;
    border: 1px solid var(--dtAccent) !important; background: var(--dtInset) !important; color: var(--dtText1) !important;
    font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.dtHint { font-size: 11.5px; line-height: 1.5; color: var(--dtText4); max-width: 320px; }
.dtHint b { color: var(--dtText3); font-weight: 700; }
.dtQtyHintCol { flex: 1; min-width: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-height: 67px; padding-bottom: 6px; }

/* ---------- Aksiyonlar ---------- */
.dtActionsWrap { display: flex; flex-direction: column; gap: 12px; }
.dtActions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dtBtn {
    display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 16px;
    border-radius: 11px; border: 1px solid transparent; font-size: 14px; font-weight: 800; letter-spacing: .3px; line-height: 1;
    white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .16s, border-color .16s, color .16s, filter .16s;
}
.dtBtn svg, .dtBtn i { flex: none; }
.dtBtn i { font-size: 15px; }
.dtBtn-primary { background: var(--dtAccent); color: var(--dtOnAccent); }
.dtBtn-primary:hover { filter: brightness(1.08); color: var(--dtOnAccent); }
.dtBtn-alt { background: var(--dtPurple); border-color: var(--dtPurpleBorder); color: var(--dtOnPurple); }
.dtBtn-alt:hover { background: var(--dtPurpleHover); color: var(--dtOnPurple); }
.dtBtn-gold { background: var(--dtCard); border-color: var(--dtGold); color: var(--dtGold); }
.dtBtn-gold:hover { background: rgba(var(--dtGoldRgb), 0.12); color: var(--dtGold); }
.dtBtn-ghost { background: var(--dtCard); border-color: var(--dtBorderStrong); color: var(--dtText2); font-weight: 700; }
.dtBtn-ghost:hover { background: var(--dtMuted); border-color: var(--dtAccent); color: var(--dtText2); }
.dtBtn-soft { background: var(--dtCard); border-color: var(--dtBorder); color: var(--dtText3); font-weight: 700; height: 40px; border-radius: 10px; font-size: 12.5px; letter-spacing: 0; }
.dtBtn-soft:hover { background: var(--dtMuted); border-color: var(--dtAccent); color: var(--dtText2); }
.dtBtn-locked { background: var(--dtInset); border-color: var(--dtBorder); color: var(--dtText4); cursor: pointer; }
.dtBtn-locked:hover { background: var(--dtCard); border-color: var(--dtBorderStrong); color: var(--dtText4); }
.dtBtn-icon { flex: none; width: 48px; padding: 0; background: var(--dtCard); border-color: var(--dtBorderStrong); color: var(--dtText3); }
.dtBtn-icon:hover { background: var(--dtMuted); border-color: var(--dtAccent); color: var(--dtText2); }
.dtBtn-icon.is-active { color: var(--dtDanger); border-color: rgba(var(--dtDangerRgb), 0.5); }
.dtBtn-icon.is-active svg { fill: currentColor; }
.dtBtn.grow { flex: 1 1 0; min-width: 190px; }
.dtBtn:active { filter: brightness(1.1); }
.dtBtn:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* <a> olarak basılan butonlar: .dtPage a genel accent rengini ezer */
.dtPage a.dtBtn-primary, .dtPage a.dtBtn-primary:hover { color: var(--dtOnAccent); }
.dtPage a.dtBtn-alt, .dtPage a.dtBtn-alt:hover { color: var(--dtOnPurple); }
.dtPage a.dtBtn-gold, .dtPage a.dtBtn-gold:hover { color: var(--dtGold); }
.dtPage a.dtBtn-ghost, .dtPage a.dtBtn-ghost:hover { color: var(--dtText2); }
.dtPage a.dtBtn-soft { color: var(--dtText3); }
.dtPage a.dtBtn-soft:hover { color: var(--dtText2); }
.dtPage a.dtBtn-locked, .dtPage a.dtBtn-locked:hover { color: var(--dtText4); }
.dtPage a.dtBtn-icon { color: var(--dtText3); }
.dtPage a.dtBtn-icon:hover { color: var(--dtText2); }
.dtPage a.dtExtBtn { color: var(--dtText3); }
.dtPage a.dtExtBtn:hover { color: var(--dtText2); }

/* x-detail-buttons (mevcut .newButton işaretlemesi) yeni butona giydirilir */
.dtPage .dtActions > .dtDetailButtons { display: contents; }
.dtPage .b-detail {
    flex: 1 1 0 !important; min-width: 190px; display: flex; align-items: center; justify-content: center; gap: 9px;
    height: 48px; padding: 0 16px !important; border-radius: 11px !important; border: 1px solid transparent !important;
    font-size: 14px !important; font-weight: 800 !important; letter-spacing: .3px; line-height: 1; white-space: nowrap;
    transition: background .16s, border-color .16s, color .16s, filter .16s; text-decoration: none;
}
.dtPage .b-detail i { font-size: 15px; }
.dtPage .b-detail.dtBtn-primary { background: var(--dtAccent) !important; color: var(--dtOnAccent) !important; }
.dtPage .b-detail.dtBtn-primary:hover { filter: brightness(1.08); }
.dtPage .b-detail.dtBtn-alt { background: var(--dtPurple) !important; border-color: var(--dtPurpleBorder) !important; color: var(--dtOnPurple) !important; }
.dtPage .b-detail.dtBtn-alt:hover { background: var(--dtPurpleHover) !important; }
.dtPage .b-detail.dtBtn-gold, .dtPage .b-detail.hemenSatButonu { background: var(--dtCard) !important; border-color: var(--dtGold) !important; color: var(--dtGold) !important; }
.dtPage .b-detail.dtBtn-gold:hover, .dtPage .b-detail.hemenSatButonu:hover { background: rgba(var(--dtGoldRgb), 0.12) !important; }
.dtPage .b-detail:active { filter: brightness(1.1); }
/* Sıra: SEPETE EKLE · HEMEN AL · HEMEN SAT · favori (bileşen HEMEN SAT'ı önce basar) */
.dtPage .dtActions .hemenSatButonu { order: 1; }
.dtPage .dtActions .dtBtn-icon { order: 2; }

/* Uyarı kutusu (stok yok / misafir) */
.dtAlert {
    display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
    background: rgba(var(--dtDangerRgb), 0.06); border: 1px solid rgba(var(--dtDangerRgb), 0.26);
    font-size: 13px; line-height: 1.55; color: var(--dtText3);
}
.dtAlert .dtAlertIcon { flex: none; color: var(--dtDanger); margin-top: 1px; }
.dtAlert b { color: var(--dtText2); font-weight: 700; }
.dtAlert.is-small { gap: 9px; padding: 11px 13px; border-radius: 10px; font-size: 11.5px; line-height: 1.5; }
.dtPage .customAlert.dark.mini { margin: 0; }

/* Takas koruma vb. eski rozetler yeni sayfada bant olarak basılır */
.dtPage .tradeGuardBadge { display: none; }

/* Sayaç (süre) */
.dtPage .counterItem { align-self: flex-start; }

/* ---------- Sağ panel ---------- */
.dtSeller {
    flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px;
}
.dtSellerTop, .dtSellerBottom { display: flex; flex-direction: column; gap: 14px; }
.dtSellerBottom { gap: 12px; }
.dtSellerId { display: flex; align-items: center; gap: 12px; }
.dtAvatar { flex: none; width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--dtBorderStrong); background: var(--dtMuted); overflow: hidden; }
.dtAvatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dtSellerName { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dtSellerNameRow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dtSellerNameRow a, .dtSellerNameRow strong { font-size: 15px; font-weight: 800; color: var(--dtText1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtSellerNameRow a:hover { color: var(--dtAccent); }
.dtSellerNameRow .dtVerified { color: var(--dtAccent); display: flex; }
.dtSellerNameRow .dtVerified.is-off { color: var(--dtDanger); }
.dtSellerSub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Mağaza türü rozeti (satıcı kimliğinin sağında; adı tooltip'te) */
.dtSellerBadge { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--dtInset); border: 1px solid var(--dtBorder); cursor: help; }
.dtSellerBadge img { width: 22px; height: 22px; object-fit: contain; display: block; }
.dtStatus {
    display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
    background: var(--dtMuted); border: 1px solid var(--dtBorder); font-size: 10.5px; font-weight: 700; color: var(--dtText3);
}
.dtStatus i { width: 6px; height: 6px; border-radius: 50%; background: var(--dtText4); display: block; }
.dtStatus.is-online { background: rgba(var(--dtAccentRgb), 0.1); border-color: rgba(var(--dtAccentRgb), 0.3); color: var(--dtAccent); }
.dtStatus.is-online i { background: var(--dtAccent); }
.dtScore { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--dtText3); }
.dtScore span { color: var(--dtText3); }
.dtPills { display: flex; flex-wrap: wrap; gap: 6px; }
.dtPill {
    display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px;
    background: rgba(var(--dtAccentRgb), 0.08); border: 1px solid rgba(var(--dtAccentRgb), 0.26); color: var(--dtAccent);
    font-size: 11px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
}
.dtPill img { width: 16px; height: 16px; object-fit: contain; display: block; }
.dtPill.is-neutral { background: var(--dtMuted); border-color: var(--dtBorder); color: var(--dtText3); }
.dtCounters { display: flex; gap: 8px; }
.dtCounter { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 10px; border-radius: 10px; background: var(--dtInset); border: 1px solid var(--dtBorder); }
.dtCounter .dtCounterIcon { color: var(--dtAccent); display: flex; }
.dtCounter .dtCounterVal { font-size: 17px; font-weight: 800; color: var(--dtText1); font-variant-numeric: tabular-nums; }
.dtCounter .dtCounterLabel { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--dtText4); text-transform: uppercase; }
.dtSellerBtns { display: flex; gap: 8px; }
.dtSellerBtns .dtBtn { flex: 1 1 0; min-width: 0; height: 42px; font-size: 12.5px; letter-spacing: 0; gap: 7px; padding: 0 10px; }
.dtSellerBtns .dtBtn.w-100 { flex: 1 1 100%; }
.dtSideTitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dtSideTitle .dtSideLabel { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; color: var(--dtText3); text-transform: uppercase; }
.dtSideTitle .dtSideSub { font-size: 11px; color: var(--dtText4); margin-top: 3px; }
.dtSideTitle .dtSideCount { font-size: 11px; font-weight: 700; color: var(--dtAccent); }
/* Güvenli alışveriş maddeleri */
.dtTrust { display: flex; flex-direction: column; gap: 12px; }
.dtTrustItem { display: flex; align-items: flex-start; gap: 10px; }
.dtTrustItem .dtTrustIcon { flex: none; margin-top: 1px; color: var(--dtAccent); display: flex; }
.dtTrustItem .dtTrustText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dtTrustItem .dtTrustTitle { font-size: 12.5px; font-weight: 700; color: var(--dtText2); }
.dtTrustItem .dtTrustDesc { font-size: 11.5px; line-height: 1.5; color: var(--dtText4); }
/* Boş durum kutusu (S&C) */
.dtEmptyBox {
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 14px; border-radius: 11px;
    background: var(--dtInset); border: 1px dashed var(--dtBorderStrong); text-align: center;
}
.dtEmptyBox .dtEmptyIcon { color: var(--dtText4); display: flex; }
.dtEmptyBox .dtEmptyTitle { font-size: 12px; font-weight: 700; color: var(--dtText3); }
.dtEmptyBox .dtEmptyText { font-size: 11.5px; line-height: 1.5; color: var(--dtText4); }
/* ---------- main merge (14.09): fiyat altı not satırları + ürün sayfası kutusu ---------- */
/* Fiyat altı notlar: referans liste fiyatı, son 30 gün en düşük, teslimat hızı, cashback (eski
   .steamListPriceNote/.lowest30Line/.speedLine/.cashbackDetailLine; sınıflar JS/analitik uyumu için korundu) */
.dtPriceNotes { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dtPriceNote { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.5; color: var(--dtText3); }
.dtPriceNote svg { flex: none; margin-top: 2px; color: var(--dtText4); }
.dtPriceNote i { font-style: normal; color: var(--dtText4); }
.dtPriceNote.is-gold { color: var(--dtGold); font-weight: 600; }
.dtPriceNote.is-gold svg { color: var(--dtGold); }
.dtPriceNote.is-accent { color: var(--dtAccent); font-weight: 600; }
.dtPriceNote.is-accent svg { color: var(--dtAccent); }
.dtPriceNote.speedLine { color: var(--dtText2); font-weight: 600; }
.dtPriceNote.speedLine svg { color: var(--dtAccent); }
.dtPage a.dtPriceNoteLink { color: inherit; font-weight: 400; text-decoration: underline; opacity: .85; margin-left: 4px; }
.dtPage a.dtPriceNoteLink:hover { opacity: 1; color: inherit; }
/* Ürün sayfası kutusu (Merchant/SEO: ilan → kalıcı item / skin sayfası), sol kolonda kartın altında */
.dtItemPageBox {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--dtCard); border: 1px solid var(--dtBorder);
    font-size: 13px; line-height: 1.5; color: var(--dtText3);
}
.dtItemPageText { display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 260px; }
.dtItemPageText svg { flex: none; margin-top: 2px; color: var(--dtAccent); }
.dtItemPageText b { color: var(--dtText1); font-weight: 700; }
.dtPage a.dtItemPageLink {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px;
    border: 1px solid rgba(var(--dtAccentRgb), 0.3); background: rgba(var(--dtAccentRgb), 0.06); font-size: 12px; font-weight: 700; color: var(--dtAccent);
    text-decoration: none; white-space: nowrap; transition: background .16s, border-color .16s;
}
.dtPage a.dtItemPageLink:hover { background: rgba(var(--dtAccentRgb), 0.12); border-color: rgba(var(--dtAccentRgb), 0.5); color: var(--dtAccent); }
/* ---------- Soru & Cevap: önizlemeli kart (D4) + kart üstü panel (handoff_soru_cevap, 11.09 / rev 14.09) ---------- */
.dtSeller { position: relative; }
.dtQa { display: flex; flex-direction: column; gap: 12px; }
.dtQaEmpty { display: flex; flex-direction: column; gap: 12px; }
.dtQaEmpty[hidden], .dtQaCard[hidden], .dtQaCardPending[hidden] { display: none !important; }
/* Kapalı hâl: tamamı tıklanabilir kart (div role=button) */
.dtQaCard {
    display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px;
    background: var(--dtInset); border: 1px solid var(--dtBorder); cursor: pointer; outline: none;
    transition: background .16s, border-color .16s;
}
.dtQaCard:hover, .dtQaCard:focus-visible { background: var(--dtMuted); border-color: rgba(var(--dtAccentRgb), 0.4); }
.dtQaCardHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dtQaCardTitle { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--dtText3); white-space: nowrap; }
.dtQaCardTitle svg { flex: none; color: var(--dtAccent); }
.dtQaCardCount { flex: none; height: 20px; padding: 0 8px; display: flex; align-items: center; border-radius: 5px; background: rgba(var(--dtAccentRgb), 0.12); font-size: 10.5px; font-weight: 800; color: var(--dtAccent); }
/* Son soru balonu */
.dtQaPreview { display: flex; gap: 9px; padding: 10px; border-radius: 9px; background: var(--dtMuted); border: 1px solid var(--dtBorder); transition: background .16s; }
.dtQaCard:hover .dtQaPreview { background: var(--dtCard); }
.dtQaPreviewAvatar { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--dtBorder); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--dtText3); }
.dtQaPreviewBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dtQaPreviewText { font-size: 11.5px; line-height: 1.5; color: var(--dtText2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.dtQaPreviewMeta { font-size: 10px; color: var(--dtText4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bekleyen satırı (bekleyen yoksa basılmaz) */
.dtQaCardPending { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dtGold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtQaCardPending i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dtGold); display: block; }
/* Düğme satırı: SORU SOR (mor; kilitli: nötr) + Tümünü gör (N) */
.dtQaCardBtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dtQaAsk, .dtQaAll {
    min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 8px; border-radius: 9px;
    font-size: 11.5px; white-space: nowrap; cursor: pointer; font-family: inherit; text-decoration: none; transition: background .16s, border-color .16s, color .16s;
}
.dtQaAsk svg, .dtQaAll svg { flex: none; }
.dtQaAsk { background: var(--dtPurple); border: 1px solid var(--dtPurpleBorder); font-weight: 800; color: var(--dtOnPurple); }
.dtQaAsk:hover { background: var(--dtPurpleHover); color: var(--dtOnPurple); }
.dtQaAsk.is-locked { background: var(--dtInset); border-color: var(--dtBorder); color: var(--dtText4); }
.dtQaAsk.is-locked:hover { background: var(--dtCard); border-color: var(--dtBorderStrong); color: var(--dtText4); }
.dtPage a.dtQaAsk, .dtPage a.dtQaAsk:hover { color: var(--dtOnPurple); }
.dtPage a.dtQaAsk.is-locked, .dtPage a.dtQaAsk.is-locked:hover { color: var(--dtText4); }
.dtQaAll { border: 1px solid rgba(var(--dtAccentRgb), 0.3); background: rgba(var(--dtAccentRgb), 0.06); font-weight: 700; color: var(--dtAccent); }
.dtQaAll:hover { background: rgba(var(--dtAccentRgb), 0.12); border-color: rgba(var(--dtAccentRgb), 0.5); }
/* Karartma + panel: sağ kartın üzerinde, dikeyde ortalı; kolon yüksekliklerini değiştirmez */
.dtQaScrim { position: absolute; inset: 0; z-index: 4; background: rgba(12, 12, 16, 0.45); border-radius: 16px; opacity: 0; transition: opacity .17s; }
.dtQaScrim.is-open { opacity: 1; }
.dtQaPanel {
    position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%) scale(.98); z-index: 5; max-height: 72%;
    display: flex; flex-direction: column; background: var(--dtCard); border: 1px solid var(--dtBorderStrong); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(12, 12, 16, 0.55); overflow: hidden; opacity: 0; transition: opacity .17s, transform .17s; outline: none;
}
.dtQaPanel.is-open { opacity: 1; transform: translateY(-50%) scale(1); }
.dtQaPanel[hidden], .dtQaScrim[hidden] { display: none !important; }
.dtQaHandle { display: none; }
.dtQaHead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--dtBorder); background: var(--dtInset); }
.dtQaHeadTitle { display: flex; align-items: baseline; gap: 9px; min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--dtText1); white-space: nowrap; }
.dtQaHeadCount { font-size: 11px; font-weight: 700; color: var(--dtAccent); }
.dtQaClose { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--dtBorderStrong); background: var(--dtCard); color: var(--dtText3); cursor: pointer; padding: 0; }
.dtQaClose:hover { background: var(--dtMuted); border-color: var(--dtAccent); color: var(--dtText2); }
.dtQaList { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dtScroll) transparent; }
.dtQaList::-webkit-scrollbar { width: 6px; }
.dtQaList::-webkit-scrollbar-thumb { background: var(--dtScroll); border-radius: 999px; }
.dtQaListEmpty { font-size: 12px; color: var(--dtText4); text-align: center; padding: 14px 0; }
.dtQaItem { display: flex; flex-direction: column; gap: 6px; }
.dtQaItemHead { display: flex; align-items: center; gap: 9px; }
.dtQaItem.is-seller .dtQaItemHead { flex-direction: row-reverse; }
.dtQaAvatar { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--dtMuted); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--dtText3); filter: drop-shadow(2px 2px 3px rgba(12, 12, 16, 0.3)); }
.dtQaItem.is-seller .dtQaAvatar { filter: drop-shadow(-2px 2px 3px rgba(12, 12, 16, 0.3)); }
.dtQaMeta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dtQaDate { font-size: 10px; color: var(--dtText4); white-space: nowrap; }
.dtQaSep { width: 1px; height: 10px; background: var(--dtBorderStrong); display: block; }
.dtQaRole { font-size: 10px; font-weight: 700; color: var(--dtText3); white-space: nowrap; }
.dtQaItem.is-seller .dtQaRole { color: var(--dtAccent); }
.dtQaTag { flex: none; height: 18px; padding: 0 7px; display: flex; align-items: center; border-radius: 5px; background: rgba(var(--dtGoldRgb), 0.12); border: 1px solid rgba(var(--dtGoldRgb), 0.34); font-size: 9.5px; font-weight: 800; color: var(--dtGold); white-space: nowrap; }
.dtQaTag.is-approval { background: var(--dtMuted); border-color: var(--dtBorderStrong); color: var(--dtText3); }
.dtQaBubble { align-self: flex-start; max-width: 92%; padding: 8px 10px; border-radius: 8px; background: var(--dtMuted); border: 1px solid var(--dtBorder); font-size: 12px; line-height: 1.55; color: var(--dtText2); overflow-wrap: anywhere; }
.dtQaItem.is-seller .dtQaBubble { align-self: flex-end; }
.dtQaFoot { flex: none; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--dtBorder); background: var(--dtInset); }
.dtQaInput { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 9px; background: var(--dtDeep); border: 1px solid var(--dtBorder); color: var(--dtText2); font-size: 12px; font-family: inherit; outline: none; }
.dtQaInput::placeholder { color: var(--dtText4); }
.dtQaInput:focus { border-color: var(--dtAccent); }
.dtQaFootBtn { flex: none; height: 38px; padding: 0 14px; border-radius: 9px; font-size: 11.5px; letter-spacing: 0; gap: 7px; }
.dtQaFootLock { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.4; color: var(--dtText3); }
.dtQaFootLock i, .dtQaFootLock svg { color: var(--dtText4); flex: none; }
.dtQaHideRow { flex: none; display: flex; justify-content: center; padding: 0 14px 12px; background: var(--dtInset); }
.dtQaHide { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--dtBorder); background: var(--dtCard); font-size: 11.5px; font-weight: 700; color: var(--dtText3); cursor: pointer; font-family: inherit; }
.dtQaHide:hover { color: var(--dtText2); border-color: var(--dtAccent); }
body.light .dtQaScrim { background: rgba(31, 30, 29, 0.35); }
body.light .dtQaPanel { box-shadow: 0 18px 44px rgba(31, 30, 29, 0.25); }
@media (prefers-reduced-motion: reduce) { .dtQaScrim, .dtQaPanel { transition: none; } }
/* Gold satıcı listesi */
.dtGoldList { display: flex; flex-direction: column; gap: 5px; }
.dtGoldRow { display: flex; align-items: center; gap: 10px; padding: 5px 7px; border-radius: 10px; background: var(--dtInset); border: 1px solid var(--dtBorder); }
.dtGoldRow .dtGoldAvatar { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--dtMuted); overflow: hidden; }
.dtGoldRow .dtGoldAvatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dtGoldRow .dtGoldMid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dtGoldRow .dtGoldName { display: flex; align-items: center; gap: 5px; min-width: 0; }
.dtGoldRow .dtGoldName a, .dtGoldRow .dtGoldName strong { min-width: 0; font-size: 12px; font-weight: 600; color: var(--dtText2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtGoldRow .dtGoldName a:hover { color: var(--dtAccent); }
.dtGoldRow .dtGoldName .dtVerified { flex: none; color: var(--dtAccent); display: flex; }
.dtGoldRow .dtGoldSub { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--dtText3); }
.dtGoldRow .dtGoldSub .dtOnline { color: var(--dtAccent); font-weight: 600; }
.dtGoldRow .dtGoldQty { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; line-height: 1; }
.dtGoldRow .dtGoldQty b { font-size: 14px; font-weight: 800; color: var(--dtText1); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.dtGoldRow .dtGoldQty span { font-size: 10.5px; font-weight: 600; color: var(--dtText4); }
.dtGoldRow .dtGoldBadge { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid rgba(139, 140, 153, 0.34); background: rgba(139, 140, 153, 0.12); }
.dtGoldRow .dtGoldBadge img { width: 20px; height: 20px; object-fit: contain; display: block; }
.dtGoldRow .dtGoldBadge.lv-diamond { background: rgba(var(--dtAccentRgb), 0.1); border-color: rgba(var(--dtAccentRgb), 0.32); }
.dtGoldRow .dtGoldBadge.lv-platinum { background: rgba(200, 201, 216, 0.1); border-color: rgba(200, 201, 216, 0.3); }
.dtGoldRow .dtGoldBadge.lv-gold { background: rgba(var(--dtGoldRgb), 0.12); border-color: rgba(var(--dtGoldRgb), 0.34); }
body.light .dtGoldRow .dtGoldBadge.lv-platinum { background: rgba(31, 30, 29, 0.06); border-color: rgba(31, 30, 29, 0.16); }
body.light .dtGoldRow .dtGoldBadge { background: rgba(31, 30, 29, 0.07); border-color: rgba(31, 30, 29, 0.18); }
body.light .dtGoldRow .dtGoldBadge.lv-diamond { background: rgba(19, 126, 76, 0.08); border-color: rgba(19, 126, 76, 0.32); }
body.light .dtGoldRow .dtGoldBadge.lv-gold { background: rgba(176, 122, 26, 0.1); border-color: rgba(176, 122, 26, 0.36); }
.dtSideNote { display: flex; align-items: center; gap: 9px; font-size: 11.5px; line-height: 1.5; color: var(--dtText3); }
.dtSideNote .dtSideNoteIcon { flex: none; color: var(--dtAccent); display: flex; }

/* ---------- Diğer Ürünler şeridi ---------- */
.dtStrip { display: flex; flex-direction: column; gap: 12px; }
.dtStripHead { display: flex; align-items: center; gap: 14px; }
.dtStripTitle { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.dtStripTitle h2 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--dtText1); margin: 0; white-space: nowrap; }
.dtStripTitle span { font-size: 12px; color: var(--dtText4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtStripLine { flex: 1; height: 1px; background: rgba(var(--dtAccentRgb), 0.28); }
.dtStripAll { flex: none; font-size: 12.5px; font-weight: 700; color: var(--dtAccent); white-space: nowrap; }
.dtStripAll:hover { color: var(--dtAccentHover); }
.dtStripTrack {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; cursor: grab; user-select: none; -webkit-user-select: none;
    scrollbar-width: thin; scrollbar-color: var(--dtScroll) transparent;
}
.dtStripTrack.is-dragging { cursor: grabbing; }
.dtStripTrack::-webkit-scrollbar { height: 6px; }
.dtStripTrack::-webkit-scrollbar-track { background: transparent; }
.dtStripTrack::-webkit-scrollbar-thumb { background: var(--dtScroll); border-radius: 999px; }
.dtStripCard {
    flex: 1 0 232px; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 12px;
    background: var(--dtCard); border: 1px solid var(--dtBorder); color: var(--dtText2); transition: background .16s, border-color .16s;
}
.dtStripCard:hover { border-color: rgba(var(--dtAccentRgb), 0.45); color: var(--dtText2); }
.dtStripCard img { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--dtMuted); object-fit: cover; display: block; }
.dtStripCard .dtStripText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dtStripCard .dtStripName { font-size: 12.5px; font-weight: 600; color: var(--dtText2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtStripCard .dtStripPrice { font-size: 13px; font-weight: 800; color: var(--dtAccent); font-variant-numeric: tabular-nums; }
.dtStripCard .dtStripSel { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: var(--dtAccent); }
.dtStripCard.is-current { background: rgba(var(--dtAccentRgb), 0.08); border-color: rgba(var(--dtAccentRgb), 0.4); }
.dtStripCard.is-current .dtStripName { font-weight: 700; color: var(--dtText1); }

/* ---------- Sekmeler (x-detail-tab yeniden giydirildi) ---------- */
.dtTabs { display: flex; flex-direction: column; }
.dtPage .detailTab { border: 1px solid var(--dtBorder); border-radius: 16px; background: var(--dtCard); box-shadow: var(--dtShadow); gap: 0; }
.dtPage .detailTabNav {
    display: flex; align-items: center; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--dtBorder); background: transparent;
    border-radius: 16px 16px 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.dtPage .detailTabNav::-webkit-scrollbar { display: none; }
.dtPage .detailTabNavButton {
    flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 2px 15px; margin-bottom: -1px; border: 0; border-right: 0;
    border-bottom: 2px solid transparent; background: transparent; font-size: 13.5px; font-weight: 700; color: var(--dtText3);
    white-space: nowrap; cursor: pointer; transition: color .16s; position: relative;
}
.dtPage .detailTabNavButton:hover { color: var(--dtText2); }
.dtPage .detailTabNavButton.active { color: var(--dtAccent); border-bottom-color: var(--dtAccent); font-weight: 700; }
.dtPage .detailTabNavButton.active::before { display: none; }
.dtPage .detailTabNavButton .eksBadge { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: var(--dtMuted); color: var(--dtText3); line-height: 1.4; }
.dtPage .detailTabBody { min-height: 0; }
.dtPage .detailTabTarget { padding: 20px 20px 22px; font-size: 13.5px; line-height: 1.75; color: var(--dtText3); }
.dtPage .detailTabTarget h1, .dtPage .detailTabTarget h2, .dtPage .detailTabTarget h3, .dtPage .detailTabTarget h4 { color: var(--dtText1); font-weight: 800; }
.dtPage .detailTabTarget h2, .dtPage .detailTabTarget h3 { font-size: 16px; }
.dtPage .detailTabTarget .detailTitle h3 { font-size: 16px; font-weight: 800; color: var(--dtText1); }
.dtPage .detailTabTarget table th { background: var(--dtMuted); color: var(--dtText2); }
.dtPage .detailTabTarget table th, .dtPage .detailTabTarget table td { border-color: var(--dtBorder); }
/* Boş sekme */
.dtEmpty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; text-align: center; }
.dtEmpty .dtEmptyIconBox { width: 40px; height: 40px; border-radius: 11px; background: var(--dtMuted); display: flex; align-items: center; justify-content: center; color: var(--dtText4); }
.dtEmpty .dtEmptyTitle { font-size: 14px; font-weight: 700; color: var(--dtText2); }
.dtEmpty .dtEmptyText { font-size: 12.5px; line-height: 1.6; color: var(--dtText4); max-width: 420px; }
/* Etiketler (skin) */
.dtTags { display: flex; flex-direction: column; gap: 9px; padding-top: 8px; }
.dtTags .tagList { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.dtTags .tagList .tag { height: 26px; padding: 0 10px; display: flex; align-items: center; border-radius: 6px; background: var(--dtInset); border: 1px solid var(--dtBorder); font-size: 11.5px; font-weight: 600; color: var(--dtText3); margin: 0; }
/* Yorum davet bandı */
.dtPage .reviewInviteBand { margin-bottom: 0; }

/* ---------- Mobil sabit aksiyon barı ---------- */
.dtBar { display: contents; }

/* =====================================================================
   Tablet: sağ panel alta iner (992 altı)
   ===================================================================== */
@media (max-width: 991.98px) {
    .dtTop { flex-direction: column; }
    .dtSide { width: 100%; }
    .dtSeller { justify-content: flex-start; }
}

/* =====================================================================
   Mobil (768 altı) — 390 tasarımı
   ===================================================================== */
@media (max-width: 767.98px) {
    .dtPage { gap: 14px; padding-bottom: calc(var(--dtBarBottom) + 96px); }
    .dtPage.is-goldbar { padding-bottom: calc(var(--dtBarBottom) + 150px); }
    .dtLeft, .dtTop { gap: 14px; }
    .dtMain { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 14px; }
    .dtMainRow { flex-direction: column; gap: 14px; }
    .dtMedia { width: 100%; }
    .dtPage .productImageZoom { display: none; }
    .dtBand { padding: 12px 13px; }
    .dtExtBtn { min-height: 44px; padding: 8px 10px; border-radius: 11px; }
    .dtCategory { font-size: 12px; }
    .dtTitle { font-size: 22px; letter-spacing: -.5px; line-height: 1.2; }
    .dtTitle .dtWear { font-size: 16px; }
    .dtRating { gap: 10px; }
    .dtRatingGroup { font-size: 12px; }
    .dtDesc { font-size: 13px; line-height: 1.65; }
    .dtPrice { padding: 15px 16px; }
    .dtPriceTop { gap: 12px; align-items: flex-start; }
    .dtPriceLabel { letter-spacing: .9px; }
    .dtPriceVal { font-size: 32px; letter-spacing: -.8px; }
    .dtPriceDual { gap: 12px; }
    .dtPriceDual .dtPriceVal { font-size: 24px; letter-spacing: -.6px; }
    .dtPriceDual .dtPriceLabel { font-size: 10px; letter-spacing: .8px; }
    .dtPriceUsd { font-size: 13px; }
    .dtOldPrice { font-size: 14px; }
    .dtMeta { flex-direction: column; align-items: stretch; gap: 9px; }
    .dtMetaItem { gap: 9px; font-size: 12.5px; }
    .dtMetaItem .dtMetaText { flex: 1; min-width: 0; }
    .dtMetaItem b { margin-left: auto; text-align: right; }
    .dtFeatGrid, .dtFeatGrid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .dtPage.is-skin .dtFeatGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dtFeatBox { padding: 10px 11px; }
    .dtSectionLabel { font-size: 10.5px; }
    .dtFloatVal { font-size: 12.5px; }
    .dtQtyLabel { display: none; }
    .dtQtyRow { align-items: center; }
    .dtPage .priceQuantityEditor { gap: 12px; align-items: center; flex-wrap: nowrap; }
    .dtPage .priceQuantityEditor > .formGroup { margin-top: 0; }
    .dtPage .priceQuantityEditor > .formGroup::before { content: none; }
    .dtPage .priceQuantityEditor .detailBasketNavButton { width: 46px; font-size: 18px; }
    .dtPage .priceQuantityEditor .productNavigateInput { width: 48px; max-width: 48px; }
    .dtPage .priceCounter { flex: 1; min-width: 0; }
    .dtPage .editablePriceWrapper { flex: 1; min-width: 0; gap: 0; }
    .dtPage .editablePriceWrapper::before { position: absolute; left: 13px; top: 8px; font-size: 9.5px; letter-spacing: .7px; color: var(--dtText3); z-index: 1; }
    .dtPage .editablePriceWrapper .editablePriceText { height: 48px; padding: 14px 44px 0 13px; font-size: 17px; font-weight: 900; line-height: 1.1; background: rgba(var(--dtAccentRgb), 0.06); border-color: rgba(var(--dtAccentRgb), 0.24); }
    .dtPage .editablePriceWrapper.totalBuyPrice { display: none; }
    .dtPage .editablePriceWrapper .priceEditButton { right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(var(--dtAccentRgb), 0.3); color: var(--dtAccent); }
    .dtQtyHintCol { flex: 1 1 100%; min-height: 0; padding-bottom: 0; }
    .dtHint { max-width: none; }
    /* Sabit alt bar */
    .dtActions {
        position: fixed; left: 0; right: 0; bottom: var(--dtBarBottom); z-index: 14; display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--dtInset); border-top: 1px solid var(--dtBorder);
        transition: bottom .2s;
    }
    .dtActions .dtBtn.grow, .dtPage .b-detail { min-width: 0 !important; font-size: 13.5px !important; letter-spacing: .2px; gap: 8px; padding: 0 10px !important; }
    .dtActions .dtBtn-icon { width: 48px; }
    /* Gold: HEMEN SAT üst satıra, favori gizli */
    .dtPage.is-goldbar .dtActions { padding-top: 10px; }
    .dtPage.is-goldbar .dtActions .hemenSatButonu { order: -1; flex: 1 1 100% !important; height: 42px; border-radius: 10px !important; font-size: 12.5px !important; }
    .dtPage.is-goldbar .dtActions .dtBtn-icon { display: none; }
    .dtPage .dtActions .dtDetailButtons { display: contents; }
    .dtSeller { padding: 16px; gap: 13px; border-radius: 14px; }
    .dtSellerTop { gap: 13px; }
    .dtAvatar { width: 44px; height: 44px; border-radius: 12px; }
    .dtPill { height: 28px; padding: 0 9px; gap: 6px; font-size: 10.5px; }
    .dtCounter { gap: 3px; padding: 11px 12px; }
    .dtCounter .dtCounterIcon { display: none; }
    .dtCounter .dtCounterVal { font-size: 16px; }
    .dtCounter .dtCounterLabel { font-size: 10px; letter-spacing: .5px; }
    .dtSellerBtns .dtBtn { height: 44px; }
    .dtSideNote { display: none; }
    /* Soru & Cevap: alttan açılan sayfa (bottom sheet) */
    .dtQaScrim { position: fixed; inset: 0; z-index: 39; border-radius: 0; }
    .dtQaPanel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; max-height: 82vh; transform: translateY(24px); border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .dtQaPanel.is-open { transform: translateY(0); }
    .dtQaHandle { display: flex; justify-content: center; padding: 8px 0 2px; background: var(--dtInset); touch-action: none; cursor: grab; }
    .dtQaHandle i { width: 40px; height: 4px; border-radius: 999px; background: var(--dtBorderStrong); display: block; }
    .dtQaList { max-height: none; }
    .dtQaFootBtn, .dtQaInput { height: 44px; }
    .dtQaAsk, .dtQaAll { height: 40px; }
    .dtQaHide { height: 40px; }
    .dtGoldRow { padding: 9px 10px; }
    .dtGoldRow .dtGoldAvatar { width: 28px; height: 28px; }
    .dtGoldRow .dtGoldSub .dtGoldScore { display: none; }
    .dtGoldRow .dtGoldBadge { width: 28px; height: 28px; border-radius: 8px; }
    .dtGoldRow .dtGoldBadge img { width: 18px; height: 18px; }
    .dtStrip { gap: 11px; }
    .dtStripHead { align-items: baseline; justify-content: space-between; gap: 10px; }
    .dtStripTitle { flex-direction: column; gap: 2px; min-width: 0; }
    .dtStripTitle h2 { font-size: 15px; letter-spacing: -.2px; }
    .dtStripTitle span { font-size: 11.5px; }
    .dtStripLine { display: none; }
    .dtStripAll { font-size: 12px; }
    .dtStripTrack { gap: 9px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
    .dtStripTrack::-webkit-scrollbar { display: none; }
    .dtStripCard { flex: none; width: 176px; gap: 10px; padding: 9px 10px; }
    .dtStripCard img { width: 40px; height: 40px; border-radius: 9px; }
    .dtStripCard .dtStripText { gap: 2px; }
    .dtStripCard .dtStripName { font-size: 11.5px; }
    .dtStripCard .dtStripPrice { font-size: 12px; }
    .dtStripCard .dtStripSel { display: none; }
    .dtPage .detailTab { border-radius: 14px; }
    .dtPage .detailTabNav { gap: 18px; padding: 0 16px; border-radius: 14px 14px 0 0; }
    .dtPage .detailTabNavButton { padding: 13px 0 14px; font-size: 13px; }
    .dtPage .detailTabTarget { padding: 16px 16px 18px; font-size: 13px; line-height: 1.7; }
    .dtPage .detailTabTarget h2, .dtPage .detailTabTarget h3, .dtPage .detailTabTarget .detailTitle h3 { font-size: 15px; }
    .dtEmpty { padding: 26px 14px; }
}

@media (max-width: 575.98px) {
    .dtPage .productImage img.centered { padding: 0 16px; }
    .dtBtn.grow, .dtPage .b-detail { min-width: 0; }
}