/* =====================================================================
   AÇIK TEKLİF — İLAN DETAY SAYFASI (handoff_acik_teklif, Özgür 14.09.2026)

   Teklif usulü (SaleMode 1/2) ilanlarına özel detay sayfası. Normal ilan
   detayından (detay.css / .dtPage) AYRI bir sayfadır: satıcı paneli, Soru &
   Cevap, taksit sekmesi ve satın alma düğmeleri bu sayfada YOKTUR (Hakan,
   Plan c17e7f1c).

   Kurgu: TEK KART = başlık şeridi (ad + sayaç) + gövde
          [336px görsel | esnek ürün bilgisi | 380px teklif alanı].
   Boşluk kuralı: her kolonda TEK bir .atFill (flex:1) dolgu kutusu vardır;
   space-between KULLANILMAZ — böylece aynı bileşen her durumda aynı dikey
   konumda kalır.

   Mobil (<=767.98): gövde tek kolona iner, sıra teklif alanı → görsel →
   bilgi olur, CTA sabit alt bara taşınır (--atBarBottom site alt menüsünü
   hesaba katar; js/teklif-usulu.js yazar).

   Açık tema: yalnız token'lar değişir, DOM aynı (body.light .atPage).
   Davranış: js/teklif-usulu.js (sayaç, 5 sn tazeleme, olay şeridi, modal).
   ===================================================================== */

/* Token'lar iki yüzeyde de geçerli: ilan detay sayfası (.atPage) ve hızlı bakış
   penceresinin teklif usulü hâli (.pmqTuKart). Böylece .at* bileşenleri (satır,
   kutu, şerit, CTA, koşul kartı) iki yerde de aynı renklerle çalışır. */
.atPage,
.pmqTuKart {
    /* ---- yüzeyler ---- */
    --atCard: #20212B;
    --atInset: #1C1D26;
    --atDeep: #111117;
    --atBorder: #333444;
    --atDivider: #2A2B38;
    --atBorderStrong: #4E4F5C;
    --atShadow: none;
    --atScroll: #4E4F5C;
    /* ---- metin ---- */
    --atText1: #EDEEF2;
    --atText2: #C8C9D8;
    --atText3: #ABACB5;
    --atText4: #8B8C99;
    /* ---- nane ---- */
    --atAccent: #80F1B1;
    --atAccentHover: #A8F6CE;
    --atOnAccent: #10241A;
    --atGreenSoft: rgba(128, 241, 177, 0.06);
    --atGreenSoft2: rgba(128, 241, 177, 0.08);
    --atGreenSoft3: rgba(128, 241, 177, 0.14);
    --atGreenBd1: rgba(128, 241, 177, 0.24);
    --atGreenBd2: rgba(128, 241, 177, 0.26);
    --atGreenBd3: rgba(128, 241, 177, 0.30);
    /* ---- altın (teklif usulü kimliği) ---- */
    --atGold: #FFBE48;
    --atGoldBorder: #FFCE72;
    --atOnGold: #1A1405;
    --atBidBg: rgba(255, 190, 72, 0.03);
    --atGoldSoft: rgba(255, 190, 72, 0.06);
    --atGoldSoft2: rgba(255, 190, 72, 0.08);
    --atGoldTint: rgba(255, 190, 72, 0.12);
    --atGoldTint2: rgba(255, 190, 72, 0.14);
    --atGoldBd1: rgba(255, 190, 72, 0.28);
    --atGoldBd2: rgba(255, 190, 72, 0.30);
    --atGoldBd3: rgba(255, 190, 72, 0.32);
    --atGoldBd4: rgba(255, 190, 72, 0.34);
    --atGoldBd5: rgba(255, 190, 72, 0.40);
    /* ---- kritik kırmızı (son dakikalar / teklifiniz geçildi) ---- */
    --atCrit: #C4442F;
    --atCritBorder: #E0553F;
    --atCritText: #F0908A;
    --atCritSoft: rgba(224, 85, 63, 0.10);
    --atCritSoft2: rgba(224, 85, 63, 0.14);
    --atCritBd1: rgba(224, 85, 63, 0.38);
    --atCritBd2: rgba(224, 85, 63, 0.44);
    /* mobilde sabit alt menü yüksekliği; teklif-usulu.js günceller */
    --atBarBottom: 0px;
}

/* Yerleşim YALNIZ detay sayfasına ait: hızlı bakış penceresinin kendi flex
   iskeleti var (pm-quick-view.css), token bloğuna yerleşim karıştırılmaz. */
.atPage {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--atText2);
}

body.light .atPage,
body.light .pmqTuKart {
    --atCard: #FFFFFF;
    --atInset: #F5F4EE;
    --atDeep: #F0EEE6;
    --atBorder: #E3E1D9;
    --atDivider: #E8E6DF;
    --atBorderStrong: #C7C5BC;
    /* Beyaz kart krem zeminde kaybolmasın (tasarımda yalnız açık temada var) */
    --atShadow: 0 1px 2px rgba(31, 30, 29, 0.05);
    --atScroll: #C7C5BC;
    --atText1: #1F1E1D;
    --atText2: #1F1E1D;
    --atText3: #6B6A65;
    --atText4: #5F5E58;
    --atAccent: #137E4C;
    --atAccentHover: #1A9A5E;
    --atOnAccent: #FFFFFF;
    --atGreenSoft: rgba(19, 126, 76, 0.05);
    --atGreenSoft2: rgba(19, 126, 76, 0.07);
    --atGreenSoft3: rgba(19, 126, 76, 0.10);
    --atGreenBd1: rgba(19, 126, 76, 0.24);
    --atGreenBd2: rgba(19, 126, 76, 0.26);
    --atGreenBd3: rgba(19, 126, 76, 0.30);
    --atGold: #B07A1A;
    --atGoldBorder: #C98E2A;
    --atOnGold: #FFFFFF;
    /* Altın: açık zeminde #B07A1A baskın → dolgu alfası düşer, çerçeve alfası yükselir */
    --atBidBg: rgba(176, 122, 26, 0.04);
    --atGoldSoft: rgba(176, 122, 26, 0.06);
    --atGoldSoft2: rgba(176, 122, 26, 0.08);
    --atGoldTint: rgba(176, 122, 26, 0.10);
    --atGoldTint2: rgba(176, 122, 26, 0.12);
    --atGoldBd1: rgba(176, 122, 26, 0.30);
    --atGoldBd2: rgba(176, 122, 26, 0.32);
    --atGoldBd3: rgba(176, 122, 26, 0.34);
    --atGoldBd4: rgba(176, 122, 26, 0.36);
    --atGoldBd5: rgba(176, 122, 26, 0.42);
    --atCrit: #B3402C;
    --atCritBorder: #C4442F;
    --atCritText: #B3402C;
    --atCritSoft: rgba(196, 68, 47, 0.08);
    --atCritSoft2: rgba(196, 68, 47, 0.10);
    --atCritBd1: rgba(196, 68, 47, 0.38);
    --atCritBd2: rgba(196, 68, 47, 0.44);
}

.atPage a, .pmqTuKart a { color: var(--atAccent); text-decoration: none; }
.atPage a:hover, .pmqTuKart a:hover { color: var(--atAccentHover); }
.atPage svg, .pmqTuKart .atCard svg, .pmqTuKart .atBid svg, .pmqTuKart .aqSvg { display: block; flex: none; }
.atNum { font-variant-numeric: tabular-nums; }
.atFill { flex: 1; min-height: 0; }

/* İnce kaydırma çubuğu (teklif listesi) */
.atScroll { scrollbar-width: thin; scrollbar-color: var(--atScroll) transparent; }
.atScroll::-webkit-scrollbar { width: 6px; height: 6px; }
.atScroll::-webkit-scrollbar-thumb { background: var(--atScroll); border-radius: 999px; }
.atScroll::-webkit-scrollbar-track { background: transparent; }

/* ============================ ANA KART ============================ */
.atCard {
    display: flex;
    flex-direction: column;
    background: var(--atCard);
    border: 1px solid var(--atBorder);
    border-radius: 16px;
    box-shadow: var(--atShadow);
    overflow: hidden;
}

/* ---------------------------- Başlık şeridi ---------------------------- */
.atHead {
    flex: none; display: flex; align-items: center; gap: 20px; padding: 16px 18px;
    background: var(--atInset); border-bottom: 1px solid var(--atBorder);
}
.atHeadMain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.atHeadTop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.atCat { font-size: 12.5px; font-weight: 600; color: var(--atAccent); }
.atPage a.atCat:hover, .pmqTuKart a.atCat:hover { color: var(--atAccentHover); }
.atBadge {
    display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px;
    background: var(--atGoldTint); border: 1px solid var(--atGoldBd4); color: var(--atGold);
    font-size: 10px; font-weight: 800; letter-spacing: .5px; white-space: nowrap;
}
.atNo { font-size: 11.5px; color: var(--atText4); white-space: nowrap; }
.atNo b { color: var(--atText3); font-weight: 700; }
.atTitle { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; color: var(--atText1); }

/* Sayaç kutusu — tek DOM, üç ton (gold / crit / mute). Son 5 dakikada JS crit'e çevirir. */
.atTimer {
    flex: none; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atTimerIcon { flex: none; color: var(--atText3); }
.atTimerText { flex: none; display: flex; flex-direction: column; gap: 2px; }
.atTimerLabel { font-size: 10px; font-weight: 800; letter-spacing: .9px; color: var(--atText3); white-space: nowrap; }
.atTimerSub { font-size: 11px; color: var(--atText4); white-space: nowrap; }
.atTimerVal { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1; color: var(--atText3); }
.atTimer.is-gold { background: var(--atGoldSoft2); border-color: var(--atGoldBd2); }
.atTimer.is-gold .atTimerIcon, .atTimer.is-gold .atTimerVal { color: var(--atGold); }
.atTimer.is-crit { background: var(--atCritSoft); border-color: var(--atCritBd1); }
.atTimer.is-crit .atTimerIcon, .atTimer.is-crit .atTimerVal { color: var(--atCrit); }

/* ---------------------------- Gövde ---------------------------- */
.atBody { display: flex; align-items: stretch; }

/* ===== Görsel kolonu (336px) ===== */
.atMedia { flex: none; width: 336px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.atMediaBox {
    position: relative; flex: none; width: 300px; max-width: 100%; aspect-ratio: 4 / 5;
    border-radius: 14px; border: 1px solid var(--atBorder); background: var(--atDeep); overflow: hidden;
}
/* Item kartı / görsel: mevcut bileşenler (item-card, productImage) kutuyu doldurur */
.atMediaBox .productImage,
.atMediaBox .detailItemCardMount { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.atMediaBox img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* ITEM KARTI KUTUYU ASIYORDU (gorev c40cd496). Ikon seridine gelince kart o
   iteme donusuyor ve KO kartlari 153-493 px arasi degisiyor; kutu 4/5 sabit
   oran + overflow:hidden oldugu icin uzun kart ALTTAN KIRPILIYORDU (olculdu:
   Dragon Scale Gauntlet karti 417 px, kutu 375 px -> 21 px kirpik). Serit
   hemen altta durdugu icin de "ikonlar fotografin uzerine binmis" gorunuyordu.
   Kart tasiyan kutu artik icerigine gore uzuyor; 4/5 orani ALT SINIR.
   Duz gorselli ilanlarda kutu eskisi gibi sabit oranli kalir. */
.atMediaBox.hasItemCard { aspect-ratio: auto; min-height: 375px; height: auto; overflow: visible; }
.atMediaBox.hasItemCard .detailItemCardMount { height: auto; }
.atBand {
    flex: none; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px;
    background: var(--atGreenSoft); border: 1px solid var(--atGreenBd1); color: var(--atAccent);
}
.atBand .atBandText { font-size: 11.5px; font-weight: 700; line-height: 1.4; color: var(--atText2); }
.atBand .atBandText span { font-weight: 500; color: var(--atText3); }

/* ===== Ürün bilgisi kolonu (esnek) ===== */
.atInfo { flex: 1; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.atDesc { flex: none; max-width: 620px; font-size: 13.5px; line-height: 1.65; color: var(--atText3); }

/* Teklif koşulları — 3 kart */
.atTerms { flex: none; display: flex; flex-direction: column; gap: 16px; }
.atTermsGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.atTerm {
    min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atTerm.is-gold { border-color: var(--atGoldBd2); }
.atTermHead { display: flex; align-items: center; gap: 7px; color: var(--atText4); }
.atTerm.is-gold .atTermHead { color: var(--atGold); }
.atTermLabel { font-size: 10px; font-weight: 800; letter-spacing: .8px; color: var(--atText3); white-space: nowrap; }
.atTermVal {
    font-size: 14px; font-weight: 800; letter-spacing: -.3px; color: var(--atText2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atTerm.is-gold .atTermVal { font-size: 18px; color: var(--atGold); }

/* İlan özellikleri (3×2) */
.atSpecs { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.atBlockTitle { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; color: var(--atText3); }
.atSpecGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.atSpec {
    min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border-radius: 10px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atSpecLabel { font-size: 10px; font-weight: 600; color: var(--atText4); }
.atSpecVal { font-size: 12.5px; font-weight: 700; color: var(--atText2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cayma + provizyon notu */
.atLegal {
    flex: none; display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atLegal > svg { margin-top: 1px; color: var(--atText4); }
.atLegalText { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.55; color: var(--atText3); }
.atLegalText b { color: var(--atText2); font-weight: 700; }

/* "Bu ilan nasıl işliyor?" — 3 adım */
.atHow {
    flex: none; display: flex; flex-direction: column; gap: 11px; padding: 14px 16px; border-radius: 12px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atHowGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.atStep { display: flex; gap: 10px; }
.atStepNo {
    flex: none; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--atGoldTint2); border: 1px solid var(--atGoldBd3); font-size: 10.5px; font-weight: 800; color: var(--atGold);
}
.atStepText { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.atStepTitle { font-size: 12px; font-weight: 700; color: var(--atText2); }
.atStepDesc { font-size: 11px; line-height: 1.5; color: var(--atText4); }

/* ===== Teklif alanı (380px) ===== */
.atBid {
    flex: none; width: 380px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
    border-left: 1px solid var(--atBorder); background: var(--atBidBg);
}
.atBidHead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atBidLabel { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--atGold); }
.atHowBtn {
    display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-family: inherit;
    font-size: 11px; font-weight: 700; color: var(--atText3); cursor: pointer; transition: color .16s;
}
.atHowBtn:hover { color: var(--atText2); }

/* Sonuç / bilgi kutusu */
.atNote {
    flex: none; display: flex; gap: 11px; padding: 14px; border-radius: 12px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atNote > svg { flex: none; margin-top: 1px; color: var(--atText3); }
.atNoteBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.atNoteTitle { font-size: 13px; font-weight: 800; color: var(--atText2); }
.atNoteDesc { font-size: 12px; line-height: 1.55; color: var(--atText3); }
.atNote.is-gold { background: var(--atGoldSoft); border-color: var(--atGoldBd1); }
.atNote.is-gold > svg, .atNote.is-gold .atNoteTitle { color: var(--atGold); }
.atNote.is-green { background: var(--atGreenSoft); border-color: var(--atGreenBd2); }
.atNote.is-green > svg, .atNote.is-green .atNoteTitle { color: var(--atAccent); }

/* Güncel en yüksek teklif */
.atTop {
    flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atTopRow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.atTopMain { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.atTopLabel { font-size: 10px; font-weight: 800; letter-spacing: .9px; color: var(--atText3); }
.atTopVal { font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1; color: var(--atAccent); }
.atTopCount { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.atTopCountVal { font-size: 15px; font-weight: 800; color: var(--atText1); }
.atTopCountLabel { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--atText4); }
/* Kendi teklifim satırı */
.atMine { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--atDivider); font-size: 11.5px; color: var(--atText3); }
.atMine > svg { flex: none; }
.atMine b { font-weight: 800; }
.atMine.is-out, .atMine.is-out > svg, .atMine.is-out b { color: var(--atCritText); }
.atMine.is-out { color: var(--atText3); }
.atMine.is-lead > svg, .atMine.is-lead b { color: var(--atAccent); }

/* Olay şeridi (yeni teklif / geçildi / süre uzadı) */
.atStrip {
    flex: none; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px;
    background: var(--atCritSoft2); border: 1px solid var(--atCritBd2); color: var(--atCritText);
}
.atStrip .atStripText { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; }
.atStrip.is-gold { background: var(--atGoldTint); border-color: var(--atGoldBd5); color: var(--atGold); }
.atStrip[hidden] { display: none !important; }

/* Teklif listesi */
.atList { flex: none; display: flex; flex-direction: column; gap: 8px; }
.atListHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atListLabel { font-size: 10px; font-weight: 800; letter-spacing: .9px; color: var(--atText3); }
.atLive { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--atText4); }
.atLive i { width: 6px; height: 6px; border-radius: 50%; background: var(--atAccent); display: block; }
.atListBox { display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; }
.atRow {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atRowNo { flex: none; width: 20px; text-align: center; font-family: monospace; font-size: 10.5px; font-weight: 700; color: var(--atText4); }
.atRowVal { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--atText2); }
.atRowYou {
    flex: none; height: 18px; padding: 0 6px; display: flex; align-items: center; border-radius: 4px;
    background: var(--atGreenSoft3); font-size: 9px; font-weight: 800; color: var(--atAccent);
}
.atRowTime { flex: none; font-size: 10.5px; color: var(--atText4); }
.atRow.is-mine { background: var(--atGreenSoft2); border-color: var(--atGreenBd3); }
.atRow.is-mine .atRowNo, .atRow.is-mine .atRowVal { color: var(--atAccent); }
.atRow.is-mine .atRowVal { font-weight: 800; }
/* Tazelemede gelen yeni satır 1 sn altın tintle yanar (README davranış notu) */
.atRow.is-new { animation: atRowFlash 1s ease-out 1; }
@keyframes atRowFlash {
    0%   { background: var(--atGoldTint); border-color: var(--atGoldBd5); }
    100% { background: var(--atInset); border-color: var(--atBorder); }
}
.atRow.is-mine.is-new { animation: atRowFlashMine 1s ease-out 1; }
@keyframes atRowFlashMine {
    0%   { background: var(--atGoldTint); border-color: var(--atGoldBd5); }
    100% { background: var(--atGreenSoft2); border-color: var(--atGreenBd3); }
}
.atListNote { font-size: 10.5px; color: var(--atText4); }
.atListEmpty { font-size: 11.5px; color: var(--atText4); padding: 10px 0; }
@media (prefers-reduced-motion: reduce) { .atRow.is-new, .atRow.is-mine.is-new { animation: none; } }

/* Sonuçsuz kapanışta istatistik listesi */
.atStats { flex: none; display: flex; flex-direction: column; }
.atStat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--atDivider); }
.atStatLabel { font-size: 12px; color: var(--atText3); }
.atStatVal { font-size: 12.5px; font-weight: 700; color: var(--atText2); }

/* "Bir sonraki teklif en az" */
.atNext {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: 10px; background: var(--atInset); border: 1px solid var(--atBorder);
}
.atNextLabel { font-size: 11.5px; color: var(--atText3); }
.atNextVal { font-size: 13px; font-weight: 800; color: var(--atGold); }

/* CTA */
.atAction { flex: none; display: flex; flex-direction: column; gap: 7px; }
.atCta {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 11px;
    border: 1px solid transparent; font-family: inherit; font-size: 13.5px; font-weight: 800; text-align: center;
    background: var(--atInset); color: var(--atText4); border-color: var(--atBorder);
    text-decoration: none; white-space: nowrap; transition: filter .16s, background .16s, color .16s;
}
.atCta:not(.is-lock) { cursor: pointer; }
.atCta:not(.is-lock):hover { filter: brightness(1.08); }
.atCta.is-lock { cursor: default; }
.atCta.is-gold { background: var(--atGold); border-color: var(--atGoldBorder); color: var(--atOnGold); }
.atCta.is-crit { background: var(--atCrit); border-color: var(--atCritBorder); color: #FFFFFF; }
.atCta.is-green { background: var(--atAccent); border-color: var(--atAccentHover); color: var(--atOnAccent); }
.atCta.is-ghost { background: var(--atCard); border-color: var(--atBorderStrong); color: var(--atText2); }
.atPage a.atCta.is-gold, .atPage a.atCta.is-gold:hover, .pmqTuKart a.atCta.is-gold, .pmqTuKart a.atCta.is-gold:hover { color: var(--atOnGold); }
.atPage a.atCta.is-green, .atPage a.atCta.is-green:hover, .pmqTuKart a.atCta.is-green, .pmqTuKart a.atCta.is-green:hover { color: var(--atOnAccent); }
.atPage a.atCta.is-ghost, .atPage a.atCta.is-ghost:hover, .pmqTuKart a.atCta.is-ghost, .pmqTuKart a.atCta.is-ghost:hover { color: var(--atText2); }
.atPage a.atCta.is-lock, .atPage a.atCta.is-lock:hover, .pmqTuKart a.atCta.is-lock, .pmqTuKart a.atCta.is-lock:hover { color: var(--atText4); }
.atCtaSub { font-size: 11px; text-align: center; color: var(--atText4); }
.atCtaSub.is-strong { color: var(--atText3); }
.atOwn { flex: none; padding: 13px 14px; border-radius: 11px; background: var(--atInset); border: 1px solid var(--atBorder); font-size: 12px; color: var(--atText3); text-align: center; }

/* Kapalı Teklif: en yüksek + liste yerine kilit kutusu */
.atHidden {
    flex: none; display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: 12px;
    background: var(--atInset); border: 1px solid var(--atBorder);
}
.atHidden > svg { flex: none; color: var(--atGold); }
.atHiddenText { flex: 1; min-width: 0; font-size: 12px; line-height: 1.55; color: var(--atText3); }

/* ============================ SEKMELER ============================ */
/* Açıklama / İlan kuralları / Satış geçmişi — normal ilan detayıyla aynı (detay.css dışında
   kaldığı için gerekli kurallar burada tekrarlanır). */
.atTabs { display: flex; flex-direction: column; }
.atTabs .detailTab { background: var(--atCard); border: 1px solid var(--atBorder); border-radius: 16px; box-shadow: var(--atShadow); }
.atTabs .detailTabNav {
    display: flex; align-items: center; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--atBorder);
    overflow-x: auto; scrollbar-width: none;
}
.atTabs .detailTabNav::-webkit-scrollbar { display: none; }
.atTabs .detailTabNavButton {
    padding: 14px 2px 15px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit;
    font-size: 13.5px; font-weight: 700; color: var(--atText3); white-space: nowrap; cursor: pointer; transition: color .16s;
}
.atTabs .detailTabNavButton:hover { color: var(--atText2); }
.atTabs .detailTabNavButton.active { color: var(--atAccent); border-bottom-color: var(--atAccent); }
.atTabs .detailTabBody { padding: 20px; font-size: 13.5px; line-height: 1.75; color: var(--atText3); }
.atTabs .detailTabTarget { display: none; }
.atTabs .detailTabTarget.active { display: block; }

/* =====================================================================
   KIRILIMLAR
   ===================================================================== */

/* Teklif alanı alta iner (tablet) */
@media (max-width: 1199.98px) {
    .atBody { flex-wrap: wrap; }
    .atBid { width: 100%; border-left: 0; border-top: 1px solid var(--atBorder); }
    .atMedia { width: 300px; }
}

@media (max-width: 991.98px) {
    .atBody { flex-direction: column; }
    .atMedia { width: 100%; }
    .atMediaBox { width: 100%; max-width: 340px; }
    .atInfo { padding-top: 0; }
    .atTermsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atHowGrid { grid-template-columns: 1fr; gap: 11px; }
}

/* ---------------------------- MOBİL (<=767.98) ----------------------------
   Sıra: başlık → sayaç → teklif alanı → görsel → bilgi. CTA sabit alt barda. */
@media (max-width: 767.98px) {
    .atPage { gap: 14px; padding-bottom: calc(var(--atBarBottom) + 104px); }
    .atCard { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: 14px; }

    .atHead { flex-direction: column; align-items: stretch; gap: 12px; padding: 0; background: transparent; border-bottom: 0; }
    .atHeadMain { order: 1; }
    .atTitle { font-size: 22px; }
    .atTimer { order: 2; padding: 12px 14px; }
    .atTimerText { flex: 1; min-width: 0; }

    .atBody { flex-direction: column; gap: 14px; }
    .atBid { order: -1; width: 100%; padding: 0; border: 0; background: transparent; gap: 14px; }
    .atMedia, .atInfo { width: 100%; padding: 0; gap: 14px; }
    .atMediaBox { width: 100%; max-width: none; }

    /* Masaüstüne özel bölümler: mobil tasarımda yok ("Nasıl işliyor?" alt sayfada) */
    .atBidHead, .atHow { display: none; }
    .atFill { display: none; }

    .atBand { padding: 12px 13px; }
    .atTermsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 3. kart (teslimat) tam genişlik: 2 + 1 düzeni */
    .atTermsGrid > .atTerm:nth-child(3) { grid-column: 1 / -1; }
    .atTerm { gap: 5px; padding: 11px 12px; border-radius: 11px; }
    .atTermLabel { font-size: 9.5px; letter-spacing: .7px; }
    .atTermVal { font-size: 12.5px; }
    .atTerm.is-gold .atTermVal { font-size: 15px; }
    .atSpecGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atTopVal { font-size: 28px; }
    .atListBox { max-height: none; overflow: visible; }
    .atRow { padding: 9px 10px; }

    /* Sabit alt bar: "en az X TL" satırı + CTA */
    .atAction {
        position: fixed; left: 0; right: 0; bottom: var(--atBarBottom); z-index: 14;
        display: flex; flex-direction: column; gap: 7px;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--atInset); border-top: 1px solid var(--atBorder); transition: bottom .2s;
    }
    .atAction .atNext { padding: 0; border: 0; background: transparent; border-radius: 0; }
    .atCtaSub { display: none; }
    .atOwn { position: fixed; left: 0; right: 0; bottom: var(--atBarBottom); z-index: 14; border-radius: 0; border: 0; border-top: 1px solid var(--atBorder); padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }

    .atTabs .detailTab { border-radius: 14px; }
    .atTabs .detailTabNav { gap: 18px; padding: 0 16px; }
    .atTabs .detailTabNavButton { padding: 13px 0 14px; font-size: 13px; }
    .atTabs .detailTabBody { padding: 16px; }
}

/* Yalnız mobil alt barda görünen satır (ör. kapanmış ilanda "Kazanan teklif") */
@media (min-width: 768px) { .atNext.is-sm-only { display: none; } }

/* =====================================================================
   TEKLİF VER EKRANI (560px) — js/teklif-usulu.js kurar, Bootstrap modal kabuğu.
   .atPage dışında yaşadığı için kendi token'larını taşır.
   ===================================================================== */
.atmWrap .modal-dialog { max-width: 560px; }
.atm {
    --atmCard: #20212B;
    --atmInset: #1C1D26;
    --atmDeep: #111117;
    --atmChip: #272834;
    --atmBorder: #333444;
    --atmDivider: #2A2B38;
    --atmBorderStrong: #4E4F5C;
    --atmText1: #EDEEF2;
    --atmText2: #C8C9D8;
    --atmText3: #ABACB5;
    --atmText4: #8B8C99;
    --atmGold: #FFBE48;
    --atmGoldBorder: #FFCE72;
    --atmOnGold: #1A1405;
    --atmGoldTint: rgba(255, 190, 72, 0.12);
    --atmGoldBd: rgba(255, 190, 72, 0.30);
    --atmGoldField: rgba(255, 190, 72, 0.55);
    --atmGoldHover: rgba(255, 190, 72, 0.45);
    --atmAccent: #80F1B1;
    --atmAccentHover: #A8F6CE;
    --atmGhostBd: rgba(128, 241, 177, 0.40);
    --atmGhostBg: rgba(128, 241, 177, 0.06);
    --atmCrit: #F0908A;
    --atmStar: #E0553F;
    --atmCritBg: rgba(224, 85, 63, 0.07);
    --atmCritBd: rgba(224, 85, 63, 0.30);
    --atmCritWarn: rgba(224, 85, 63, 0.32);
    --atmCritField: rgba(224, 85, 63, 0.55);
    --atmShadow: 0 30px 70px rgba(4, 5, 6, 0.55);

    display: flex; flex-direction: column; overflow: hidden;
    background: var(--atmCard); border: 1px solid var(--atmBorderStrong); border-radius: 16px;
    box-shadow: var(--atmShadow); color: var(--atmText2);
}
body.light .atm {
    --atmCard: #FFFFFF;
    --atmInset: #F5F4EE;
    --atmDeep: #F0EEE6;
    --atmChip: #F0EEE6;
    --atmBorder: #E3E1D9;
    --atmDivider: #E8E6DF;
    --atmBorderStrong: #C7C5BC;
    --atmText1: #1F1E1D;
    --atmText2: #1F1E1D;
    --atmText3: #6B6A65;
    --atmText4: #5F5E58;
    --atmGold: #B07A1A;
    --atmGoldBorder: #C98E2A;
    --atmOnGold: #FFFFFF;
    --atmGoldTint: rgba(176, 122, 26, 0.10);
    --atmGoldBd: rgba(176, 122, 26, 0.32);
    --atmGoldField: rgba(176, 122, 26, 0.55);
    --atmAccent: #137E4C;
    --atmAccentHover: #1A9A5E;
    --atmGhostBd: rgba(19, 126, 76, 0.40);
    --atmGhostBg: rgba(19, 126, 76, 0.05);
    --atmCrit: #B3402C;
    --atmStar: #C4442F;
    --atmCritBg: rgba(196, 68, 47, 0.06);
    --atmCritBd: rgba(196, 68, 47, 0.30);
    --atmCritWarn: rgba(196, 68, 47, 0.32);
    --atmCritField: rgba(196, 68, 47, 0.55);
    --atmShadow: 0 30px 70px rgba(31, 30, 29, 0.18);
}
.atm svg { display: block; flex: none; }
.atm .atNum { font-variant-numeric: tabular-nums; }
.atm a { color: var(--atmAccent); text-decoration: none; }
.atm a:hover { color: var(--atmAccentHover); }

/* --- başlık --- */
.atmHead {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; background: var(--atmInset); border-bottom: 1px solid var(--atmBorder);
}
.atmHeadLeft { display: flex; align-items: center; gap: 10px; min-width: 0; }
.atmHeadIcon {
    flex: none; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: var(--atmGoldTint); color: var(--atmGold);
}
.atmHeadText { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atmTitle { font-size: 16px; font-weight: 800; color: var(--atmText1); }
.atmSub { font-size: 11.5px; color: var(--atmText4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atmClose {
    flex: none; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--atmBorderStrong); background: none; color: var(--atmText3); cursor: pointer; transition: border-color .16s;
}
.atmClose:hover { border-color: var(--atmGoldHover); }

/* --- gövde --- */
.atmBody { padding: 18px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 220px); overflow-y: auto; }

.atmCtx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.atmCtxBox {
    min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px;
    background: var(--atmInset); border: 1px solid var(--atmBorder);
}
.atmCtxBox.is-gold { border-color: var(--atmGoldBd); }
.atmCtxLabel { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; color: var(--atmText3); white-space: nowrap; }
.atmCtxVal { font-size: 14px; font-weight: 800; color: var(--atmGold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atmCtxVal.is-green { color: var(--atmAccent); }
.atmCtxVal.is-plain { font-size: 13px; font-weight: 700; color: var(--atmText2); }

.atmCols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.atmCol { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.atmField { display: flex; flex-direction: column; gap: 6px; }
.atmLabelRow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 16px; }
.atmLabel { font-size: 11px; font-weight: 700; color: var(--atmText3); }
.atmLabel i { font-style: normal; color: var(--atmStar); }
.atmHelp { font-size: 11px; color: var(--atmText4); white-space: nowrap; }
.atmHelp b { color: var(--atmText3); font-weight: 700; }
.atmHelp2 { font-size: 10.5px; color: var(--atmText4); }
.atmInput {
    display: flex; align-items: center; height: 48px; border-radius: 10px; overflow: hidden;
    background: var(--atmDeep); border: 1px solid var(--atmBorder); transition: border-color .16s;
}
.atmInput.is-gold { border-color: var(--atmGoldField); }
.atmInput.is-bad { border-color: var(--atmCritField); }
.atmInput input {
    flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; background: none; outline: none;
    font-family: inherit; font-size: 13px; color: var(--atmText2);
}
.atmInput #tuTutar { font-size: 18px; font-weight: 800; color: var(--atmText1); font-variant-numeric: tabular-nums; }
.atmInput input::placeholder { color: var(--atmText4); }
.atmInput input::-webkit-outer-spin-button, .atmInput input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.atmInput input[type=number] { -moz-appearance: textfield; }
.atmSuffix {
    flex: none; height: 100%; padding: 0 13px; display: flex; align-items: center; border-left: 1px solid var(--atmBorder);
    font-size: 12px; font-weight: 700; color: var(--atmText3);
}
.atmChips { display: flex; gap: 6px; }
.atmChip {
    flex: 1; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: var(--atmChip); border: 1px solid var(--atmBorder); font-family: inherit; font-size: 11px; font-weight: 700;
    color: var(--atmText2); cursor: pointer; transition: border-color .16s;
}
.atmChip:hover { border-color: var(--atmGoldHover); }

/* --- bakiye etkisi --- */
.atmBal {
    display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px;
    background: var(--atmInset); border: 1px solid var(--atmBorder); transition: border-color .16s;
}
.atmBal.is-bad { border-color: var(--atmCritWarn); }
.atmBalHead { display: flex; align-items: center; gap: 8px; }
.atmBalIcon { display: flex; color: var(--atmAccent); }
.atmBal.is-bad .atmBalIcon { color: var(--atmCrit); }
.atmBalLabel { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; color: var(--atmText3); }
.atmFlex { flex: 1; }
.atmBalLive { font-size: 10.5px; color: var(--atmText4); }
.atmBalRows { display: flex; flex-direction: column; }
.atmBalRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--atmDivider); }
.atmBalRow:last-child { border-bottom: 0; }
.atmBalRow span { font-size: 12px; color: var(--atmText3); }
.atmBalRow b { font-size: 13px; font-weight: 800; color: var(--atmText2); }
.atmBalRow b.is-gold { color: var(--atmGold); }
.atmBalRow b.is-green { color: var(--atmAccent); }
.atmBalRow b.is-green.is-neg { color: var(--atmCrit); }
.atmBalNote { font-size: 11px; line-height: 1.5; color: var(--atmText4); }
.atmBalWarn { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.atmBalWarnText { font-size: 11.5px; font-weight: 700; color: var(--atmCrit); }
.atmGhost {
    flex: none; display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--atmGhostBd); background: var(--atmGhostBg); font-size: 11.5px; font-weight: 800;
    color: var(--atmAccent); white-space: nowrap; transition: filter .16s;
}
.atmGhost:hover { filter: brightness(1.08); color: var(--atmAccent); }
.atmBalNote[hidden], .atmBalWarn[hidden] { display: none !important; }

/* --- bağlayıcılık + onaylar --- */
.atmBind { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--atmCritBg); border: 1px solid var(--atmCritBd); }
.atmBind > svg { margin-top: 1px; color: var(--atmCrit); }
.atmBindText { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.55; color: var(--atmText3); }
.atmBindText b { color: var(--atmText2); font-weight: 700; }
.atmConsents { display: flex; flex-direction: column; gap: 9px; }
.atmConsent { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.atmConsent input { position: absolute; opacity: 0; width: 0; height: 0; }
.atmBox {
    flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
    background: var(--atmDeep); border: 1px solid var(--atmBorderStrong); transition: background .16s, border-color .16s;
}
.atmConsent input:checked + .atmBox { background: #343891; border-color: #343891; }
.atmConsent input:checked + .atmBox::after {
    content: ""; width: 10px; height: 6px; border-left: 2.4px solid #FFFFFF; border-bottom: 2.4px solid #FFFFFF;
    transform: rotate(-45deg) translate(1px, -1px);
}
.atmConsent input:focus-visible + .atmBox { outline: 2px solid var(--atmGold); outline-offset: 2px; }
.atmConsentText { font-size: 12px; line-height: 1.5; color: var(--atmText3); }
.atmErr { font-size: 11.5px; color: var(--atmCrit); min-height: 0; }
.atmErr:empty { display: none; }

/* --- alt şerit --- */
.atmFoot {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; background: var(--atmInset); border-top: 1px solid var(--atmBorder);
}
.atmReason { flex: 1; min-width: 0; font-size: 11px; color: var(--atmText4); }
.atmCta {
    flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 11px;
    background: var(--atmGold); border: 1px solid var(--atmGoldBorder); color: var(--atmOnGold);
    font-family: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: filter .16s;
}
.atmCta:hover:not(:disabled) { filter: brightness(1.08); }
.atmCta:disabled { background: var(--atmChip); border-color: var(--atmBorder); color: var(--atmText4); cursor: default; }

@media (max-width: 575.98px) {
    .atmCols { grid-template-columns: 1fr; }
    .atmCtx { grid-template-columns: 1fr; }
    .atmBody { padding: 14px; gap: 14px; max-height: none; }
    .atmFoot { flex-direction: column; align-items: stretch; gap: 10px; }
    .atmCta { justify-content: center; }
    .atmReason { text-align: center; }
}

/* =====================================================================
   HIZLI BAKIŞ PENCERESİ — TEKLİF USULÜ İLAN (.pmQuickView.pmqTuKart)
   Handoff: handoff_acik_teklif_hizli_bakis (Özgür 15.09.2026).

   Tasarımcı notu (tuval, birebir):
     "Detay sayfasının diliyle yeniden kuruldu: sayaç üst şeritte (30px → 20px),
      altın panel çerçevesi yerine sessiz kap, mor düğme yerine altın/kırmızı CTA,
      tablo yerine .atRow satırları, tarih saat:dakika, sözlük detayla aynı
      (önde / geçildi / kazandı / satıcı kararı bekliyor). Tek sekme şeridi
      kaldırıldı (gizli sekmeler bu ilan türünde basılmıyor). Sol kolondaki ~90px
      boşluk Takas Koruma bandı + koşul kartlarıyla doldu."

   Pencere ilan detayının KISALTILMIŞ hâlidir: aynı bileşenler (.atTimer, .atNote,
   .atTop, .atRow, .atCta, .atBand, .atTerm), aynı token'lar. Buradaki kurallar
   yalnızca ÖLÇÜ farklarını yazar; renk/ton yukarıdaki ortak bloklardan gelir.

   MOBİL: tam ekran yerine alt sayfa (tutamaç + karartma), gövde tek akış,
   sıra teklif alanı → item kartı → koşullar, CTA sabit alt barda.

   js/pm-quick-view.js SÖZLEŞMESİ (bozulmamalı):
     .pmQuickView > .pmqUst (doğrudan çocuk) · içinde .pmQuickViewClose ·
     JS .pmqSiraKutu'yu kapat düğmesinin ÖNÜNE ekler · .pmqCerceve + [data-pmq-item-olcek]
   ===================================================================== */

/* Pencere 1040×660. README: 620 denendi ve taştı (sol kolon intrinsic 548px);
   660 altına inilmemeli. */
@media (min-width: 861px) {
    .pmQuickViewDialog:has(.pmqTuKart) { height: min(660px, calc(100vh - 40px)); }
}

.pmQuickView.pmqTuKart {
    /* Üst şerit zemini tek yeni token (#272834 → #F0EEE6); geri kalanı .atPage ile ortak. */
    --atqHead: #272834;
    background: var(--atCard);
    border-color: var(--atBorderStrong);
    color: var(--atText2);
    box-shadow: 0 30px 70px rgba(4, 5, 6, .55);
}

body.light .pmQuickView.pmqTuKart {
    --atqHead: #F0EEE6;
    /* Açık temada yalnız renk değil GEOMETRİ de değişiyor (spec §4). */
    box-shadow: 0 24px 56px rgba(31, 30, 29, .16);
}

/* ---------------------------- Üst şerit (62px) ---------------------------- */
.pmQuickView.pmqTuKart > .pmqUst {
    height: 62px;
    padding: 0 16px;
    gap: 16px;
    background: var(--atqHead);
    border-bottom: 1px solid var(--atBorder);
}

.pmqTuBaslik { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pmqTuAdSatir { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pmqTuAd {
    margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.25; color: var(--atText1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmqTuMeta { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 11px; color: var(--atText4); }
.pmqTuMeta > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmqTuMeta b { color: var(--atText3); font-weight: 700; }
.pmqTuSep { flex: none; width: 1px; height: 10px; background: var(--atBorderStrong); }
.pmqTuKart a.pmqTuTam {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; color: var(--atAccent);
}
.pmqTuKart a.pmqTuTam:hover { color: var(--atAccentHover); }

/* Sayaç çipi: detay sayfasındaki kutunun küçük hâli (26px değer → 20px). */
.pmqTuKart .atTimer { gap: 10px; height: 38px; padding: 0 13px; border-radius: 10px; }
.pmqTuKart .atTimerLabel { font-size: 9px; letter-spacing: .8px; }
.pmqTuKart .atTimerSub { font-size: 9.5px; }
.pmqTuKart .atTimerVal { font-size: 20px; letter-spacing: -.4px; }

/* JS'in eklediği "‹ 2 / 20 ›" kutusu; soluna 1×22 ayraç çubuğu. */
.pmqTuKart .pmqSiraKutu { gap: 4px; }
.pmqTuKart .pmqSiraKutu::before {
    content: ""; flex: none; width: 1px; height: 22px; margin-right: 6px; background: var(--atBorderStrong);
}
.pmqTuKart .pmqSira { padding: 0 2px; font-size: 11.5px; color: var(--atText4); }
.pmqTuKart .pmqSiraTuslar { gap: 4px; }
.pmqTuKart .pmqSiraTus {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--atBorderStrong); background: var(--atCard); color: var(--atText3); font-size: 13px;
}
.pmqTuKart .pmqSiraTus:hover { border-color: var(--atAccent); color: var(--atText2); }
.pmqTuKart .pmqSiraTus:disabled:hover { border-color: var(--atBorderStrong); color: var(--atText3); }

.pmqTuKart .pmQuickViewClose {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--atBorderStrong); background: var(--atCard); color: var(--atText3);
}
.pmqTuKart .pmQuickViewClose:hover { border-color: var(--atAccent); color: var(--atText2); }

/* ---------------------------- Gövde ---------------------------- */
.pmqTuKart .pmqGovde { background: var(--atCard); }
.pmqTuKart .pmqMedya {
    flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: 16px; padding: 16px;
    background: var(--atCard);
}

/* DETAY SAYFASI ikon seridi (gorev fea5dd62): bilesenin kendi konumu kartin
   sag ortasinda ve dikey; orada item kartinin istatistiklerinin ustune
   biniyor. Pencerede oldugu gibi KARTIN ALTINDA yatay durur. */
/* SECICI .detail ICERMEK ZORUNDA. Bilesenin kendi kurali
   ".galleryItemList.detail { top:50%; right:10px; transform:translateY(-50%) }"
   iki sinifli, yani (0,2,0). Iki sinifli bir secici ona ESIT ozgullukte kalir
   ve kaynak sirasi bilesenin lehine calisir: position:static tutar ama
   TRANSFORM TUTMAZ, serit kendi yuksekliginin yarisi kadar (55 px) yukari
   kayip kartin ustune biner. Bu yuzden .detail eklendi ve top/right/transform
   ACIKCA sifirlaniyor. */
.atMedia .galleryItemList.detail {
    position: static; top: auto; right: auto; bottom: auto; left: auto; transform: none;
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center; gap: 6px; max-width: 100%;
    padding: 9px; border-radius: 12px; margin-top: 4px;
    /* Serit fotograf kutusuyla AYNI yuzeyi kullaniyordu (--atDeep) ve ikisi
       tek blok gibi okunuyordu (gorev b157abf6, madde 1). Bir kademe acik
       yuzey + belirgin kenarlik ile kutudan ayrisiyor. */
    background: var(--atInset); border: 1px solid var(--atBorderStrong);
}
.atMedia .galleryItemList.detail.twoCol { display: flex; }
.atMedia .galleryItemList.detail img { width: 44px; height: 44px; border-radius: 6px; }
.atMedia .galleryItemList.detail .itemMoreListButton { color: var(--atText3); }

/* ===== Sol kolon (300px): item kartı + Takas Koruma + koşullar + paylaş ===== */
.pmqTuKart .pmqGorselKutu {
    flex: none; width: 300px; padding: 0; gap: 12px;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
}
.pmqTuKart .pmqCerceve {
    flex: none; width: 100%; aspect-ratio: 4 / 5; border-radius: 14px;
    border: 1px solid var(--atBorder); background: var(--atDeep);
}
.pmqTuKart .pmqCerceve.pmqKartCerceve,
.pmqTuKart .pmqCerceve.pmqDuzCerceve { width: 100%; margin: 0; border: 0; background: transparent; }
/* TOPLU ILANDA KOLON TASIYORDU (Hakan 15.09). Olculdu: pencere 660px, sol
   kolonun icerigi 687px; ikon seridi (103px) devreye girince kosul kartlari
   ve paylas seridi pencerenin altinda kaliyordu. Cerceve flex:none +
   aspect-ratio oldugu icin hic kuculmuyordu. Flex-shrink acildi; min-height
   SART, cunku flex ogesinde varsayilan min-height:auto kuculmeyi tamamen
   engelliyor. Item karti zaten kartiOlcekle() ile cerceveye sigdiriliyor. */
.pmqTuKart .pmqGorselKutu { min-height: 0; }
.pmqTuKart .pmqGorselKutu .pmqCerceve { flex: 0 1 auto; min-height: 190px; }
.pmqTuKart .pmqGorselKutu .galleryItemList { max-width: 100%; }

/* İki koşul kartı (satıcı beklentisi vurgulu + teklif aralığı nötr) */
.pmqTuTerms { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pmqTuKart .atTerm { gap: 4px; padding: 10px 11px; border-radius: 10px; }
.pmqTuKart .atTermLabel { font-size: 9px; letter-spacing: .7px; }
.pmqTuKart .atTermVal { font-size: 11.5px; letter-spacing: 0; }
.pmqTuKart .atTerm.is-gold .atTermVal { font-size: 14px; }

/* Paylaş şeridi kolonun dibine (tek .atFill dolgu — ikinci esnek eleman EKLENMEZ) */
.pmqTuKart .pmqPaylas {
    flex: none; display: flex; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent;
}
.pmqTuKart .pmqPaylasBtn {
    flex: 1 1 0; min-width: 0; justify-content: center; gap: 7px; height: 36px; padding: 0 10px;
    border-radius: 9px; border: 1px solid var(--atBorder); background: var(--atCard);
    font-size: 11px; font-weight: 700; color: var(--atText3); white-space: nowrap;
}
.pmqTuKart a.pmqPaylasBtn, .pmqTuKart a.pmqPaylasBtn:hover { color: var(--atText3); }
.pmqTuKart .pmqPaylasBtn:hover { border-color: var(--atAccent); color: var(--atText2); }
.pmqTuKart .pmqPaylasBtn.wa svg { color: #25D366; }
body.light .pmqTuKart .pmqPaylasBtn.wa svg { color: #128C3E; }

/* ===== Sağ kolon: sessiz kap (eski altın çerçeveli panelin yerine) ===== */
.pmqTuKart .atBid {
    flex: 1 1 auto; width: auto; min-width: 0; min-height: 0;
    gap: 11px; padding: 14px 16px; border: 1px solid var(--atBorder); border-radius: 14px;
    background: var(--atBidBg); overflow: hidden;
}
.pmqTuKart .atBidLabel { display: flex; align-items: center; gap: 8px; font-size: 10.5px; }
.pmqTuBidCat { min-width: 0; font-size: 11px; color: var(--atText4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pmqTuKart .atNote { padding: 13px 14px; gap: 11px; }
.pmqTuKart .atNoteTitle { font-size: 12.5px; }
.pmqTuKart .atNoteDesc { font-size: 11.5px; }
.pmqTuKart .atTop { padding: 13px 14px; }
.pmqTuKart .atTopVal { font-size: 27px; letter-spacing: -.7px; }
.pmqTuKart .atMine { padding-top: 9px; }

/* Liste kalan yüksekliği alır; pencere sabit 660px olduğu için kendi içinde kayar. */
.pmqTuKart .atList { flex: 1 1 auto; min-height: 0; }
.pmqTuKart .atListBox { flex: 1 1 0; min-height: 96px; max-height: none; }

/* Alt şerit: "en az X TL" satırı (çerçevesiz) + 44px CTA + yardım bağlantısı */
.pmqTuKart .atAction { gap: 8px; padding-top: 11px; border-top: 1px solid var(--atDivider); }
.pmqTuKart .atNext { padding: 0; border: 0; border-radius: 0; background: transparent; }
.pmqTuKart .atCta { height: 44px; }
.pmqTuHow {
    align-self: center; display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--atAccent);
}
.pmqTuKart a.pmqTuHow:hover { color: var(--atAccentHover); }

/* Yalnız mobil alt sayfada görünen "TAM SAYFADA AÇ" düğmesi */
.pmqTuTamBtn { display: none; }

/* ---------------------------- MOBİL: alt sayfa ----------------------------
   Tuval: karartma + 44×4 tutamaç, panel yarıçap 20px 20px 0 0, üst şerit iki satır,
   gövde tek akış (teklif alanı önce), CTA sabit alt barda. */
@media (max-width: 860px) {
    .pmQuickViewOverlay:has(.pmqTuKart) { align-items: flex-end; background: rgba(12, 12, 16, .72); }
    body.light .pmQuickViewOverlay:has(.pmqTuKart) { background: rgba(31, 30, 29, .24); }

    /* Panel tutamaç bandının (46px) altındaki tüm yüksekliği kaplar. */
    .pmQuickViewDialog:has(.pmqTuKart) { height: calc(100% - 46px); }
    .pmQuickViewDialog:has(.pmqTuKart)::before {
        content: ""; position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
        width: 44px; height: 4px; border-radius: 999px; background: #4E4F5C;
    }
    body.light .pmQuickViewDialog:has(.pmqTuKart)::before { background: #C7C5BC; }

    .pmQuickView.pmqTuKart {
        border-radius: 20px 20px 0 0;
        border: 0; border-top: 1px solid var(--atBorderStrong);
        box-shadow: none;
    }

    /* --- üst şerit: iki satır (ad + kapat / sayaç + gezinme) --- */
    .pmQuickView.pmqTuKart > .pmqUst { height: auto; flex-wrap: wrap; padding: 10px 14px 12px; gap: 10px; }
    /* 100% - (kapat 36px + gap 10px): ad satırı ile kapat düğmesi ilk satırda kalır. */
    .pmqTuBaslik { flex: 1 1 calc(100% - 46px); }
    .pmqTuAd { font-size: 14.5px; }
    .pmqTuMeta { font-size: 10.5px; }
    .pmqTuKart .pmQuickViewClose { order: 1; width: 36px; height: 36px; }
    .pmqTuKart .atTimer { order: 2; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; }
    .pmqTuKart .atTimerText { flex: 1; min-width: 0; }
    .pmqTuKart .atTimerSub { overflow: hidden; text-overflow: ellipsis; }
    .pmqTuKart .pmqSiraKutu { order: 3; gap: 3px; }
    .pmqTuKart .pmqSiraKutu::before { display: none; }
    .pmqTuKart .pmqSira { display: inline; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; }
    .pmqTuKart .pmqSiraAyrac { display: none; }
    .pmqTuKart .pmqSiraTuslar { gap: 3px; }
    .pmqTuKart .pmqSiraTus {
        width: 36px; height: 36px; border-radius: 9px;
        border: 1px solid var(--atBorderStrong); background: var(--atCard); color: var(--atText3); font-size: 14px;
    }

    /* --- gövde: tek akış, teklif alanı önce --- */
    /* Kaydırma çubuğu gizli (tuvalin .om-x sınıfı): alt sayfada çubuk CTA barının üstüne biniyor. */
    .pmqTuKart .pmqPanel.aktif {
        overflow-y: auto;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .pmqTuKart .pmqPanel.aktif::-webkit-scrollbar { display: none; }
    /* DİKKAT: alt boşluk KAYAN KUTUYA (.pmqPanel) değil, içindeki gövdeye verilir.
       Flex kolon kaydırma kabında tarayıcı padding-bottom'u kaydırma boyuna katmıyor;
       orada verilince son bloklar (koşul kartları, "TAM SAYFADA AÇ") sabit CTA barının
       altında kalıyordu (Özgür 15.09). Bar en yüksek hâlinde ≈98px + güvenli alan. */
    /* flex: none ŞART: masaüstü kuralı .pmqMedya'yı "flex: 1 1 auto; min-height: 0" yapıyor ve
       mobilde kutu panelin yüksekliğine SIKIŞIP içeriği dışarı taşırıyordu. Kutu sıkışınca
       alt dolgu 635px'lik kutunun İÇİNDE kalıyor, taşan içeriğin altına eklenmiyordu. */
    .pmqTuKart .pmqMedya {
        flex: none; min-height: auto;
        flex-direction: column; gap: 12px;
        padding: 13px 14px calc(112px + env(safe-area-inset-bottom, 0px));
    }
    /* Kaydırılabilir gövdenin doğrudan çocukları flex:none olmalı; aksi hâlde
       aspect-ratio: 4/5 item kutusu çöker (tasarımcı notu). */
    .pmqTuKart .pmqMedya > * { flex: none; }
    .pmqTuKart .atBid {
        order: 1; width: 100%; padding: 0; gap: 12px;
        border: 0; border-radius: 0; background: transparent; overflow: visible;
    }
    .pmqTuKart .pmqGorselKutu { order: 2; width: 100%; box-sizing: border-box; }

    /* Masaüstüne özel parçalar: mobil tuvalde yok */
    .pmqTuKart .atBidHead,
    .pmqTuKart .pmqPaylas { display: none; }

    .pmqTuKart .atList { flex: none; }
    .pmqTuKart .atListBox { flex: none; max-height: none; overflow: visible; }
    .pmqTuKart .atTopVal { font-size: 26px; }
    .pmqTuKart .atNote { border-radius: 12px; }
    .pmqTuKart .pmqCerceve { border-radius: 13px; }
    .pmqTuKart .atBand { padding: 11px 12px; }

    /* "TAM SAYFADA AÇ" (ghost, 44px) — sol kolonun sonunda */
    .pmqTuTamBtn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        height: 44px; border-radius: 11px; border: 1px solid var(--atBorderStrong);
        background: var(--atCard); font-size: 12.5px; font-weight: 700; color: var(--atText2);
    }
    .pmqTuKart a.pmqTuTamBtn, .pmqTuKart a.pmqTuTamBtn:hover { color: var(--atText2); }

    /* Sabit alt CTA barı: pencere tam ekran olduğu için fixed viewport'a oturur. */
    .pmqTuKart .atAction {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
        gap: 7px; padding: 11px 14px calc(13px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--atBorder); border-radius: 0; background: var(--atInset);
    }
    .pmqTuKart .atCta { height: 46px; }
    .pmqTuKart .atCtaSub,
    .pmqTuKart .pmqTuHow { display: none; }
    .pmqTuKart .atOwn {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
        border: 0; border-top: 1px solid var(--atBorder); border-radius: 0;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* Esnek dolgu iki kez gap yiyordu (kosul kartlari → dolgu → paylas seridi): 300px kolonun
   yukseklik butcesi 564px ve olculen icerik 546px; fazladan 12px kolonu tasiriyordu. */
.pmqTuKart .pmqGorselKutu > .atFill { margin-bottom: -12px; }