/* ============================================================
   DİKEY KART (ızgara görünümü) — <x-product-list>  (görev 767e5fd0)

   E-pin / top-up / GB / CS2 skin / ilan (item, çoklu item, karakter,
   Açık Teklif, alım talebi) kartlarının yeni tasarım dili. Yapı korundu:
   kapak 4:5 (245×306) · üstte rozet ≤2 + (i) · kapağın altında satıcı pili,
   zil, kalp (çöp) · gövdede tek satır başlık + alt başlık · en altta
   "fiyat | eylem" bölünmüş düğmesi (GB'de SAT ve AL alt alta).
   Yarıçap 14, çerçeve 1px, hover: çerçeve açılır + 2px yukarı.
   "dk" öneki yalnız bu bileşene aittir. Davranış: js/dikey-kart.js.
   Handoff: tasarim-uygulama/handoff_dikey_kart (28.09.2026).
   ============================================================ */

body{
  --dkKart:#20212B;
  --dkKartCizgi:#333444;
  --dkKartCizgiHover:#4E4F5C;
  --dkKapakCizgi:#2A2B38;
  --dkKutu:#1B1C26;               /* fiyat kutusu zemini */
  --dkKutuKapali:#1C1D26;         /* satıldı düğmesi */
  --dkGhostZemin:#272834;         /* Düzenle düğmesi */
  --dkBaslik:#EDEEF2;
  --dkInk:#C8C9D8;
  --dkSoluk:#ABACB5;
  --dkSessiz:#8B8C99;
  --dkAccent:#80F1B1;
  --dkAccentInk:#181820;
  --dkAccentLine:rgba(128,241,177,.45);
  --dkAccentFiyat:#EDEEF2;        /* AL kutusundaki tutar */
  --dkAltin:#E8B24C;              /* GB SAT */
  --dkAltinInk:#1A1405;
  --dkAltinLine:rgba(232,178,76,.55);
  --dkAltinKutu:#1B1C26;
  --dkAltinKutuCizgi:#E8B24C;
  --dkAltinFiyat:#E8B24C;
  --dkAmber:#FFBE48;              /* Açık Teklif */
  --dkAmberInk:#1A1405;
  --dkAmberLine:rgba(255,190,72,.45);
  --dkAmberKutu:rgba(255,190,72,.08);
  --dkTuCerceve:rgba(255,190,72,.62);
  --dkTuParilti:0 0 0 1px rgba(255,190,72,.16),0 10px 28px rgba(255,190,72,.12);
  --dkTuSeritZemin:linear-gradient(90deg,rgba(255,190,72,.34),rgba(255,190,72,.10));
  --dkTuSeritCizgi:rgba(255,190,72,.50);
  --dkTuSure:#FFFFFF;
  --dkAmberKutuCizgi:#FFBE48;
  --dkAmberFiyat:#FFBE48;
  --dkAmberMetin:#FFBE48;
  --dkMor:#343891;                /* alım talebi TESLİM */
  --dkMorCizgi:#484CA8;
  --dkMorMetin:#C3C6FF;
  --dkMorLine:rgba(52,56,145,.80);
  --dkKirmizi:#F0908A;
  --dkKirmiziLine:rgba(224,85,63,.55);
  --dkVitrin:#E8C268;
  --dkVitrinLine:rgba(232,194,104,.50);
  --dkVitrinHalka:#FFB200;
  --dkStepZemin:#111117;
  --dkStepCizgi:#333444;
  --dkBalonZemin:#272834;
  --dkBalonCizgi:#4E4F5C;
  --dkPaketZemin:rgba(24,24,32,.96);
  --dkSkinZemin:#111117;
  --dkKarakterTaban:#0E1024;
  --dkGolge:0 16px 36px rgba(0,0,0,.55);
  --dkToastZemin:#272834;
}
body.light{
  --dkKart:#FFFFFF;
  --dkKartCizgi:#E3E1D9;
  --dkKartCizgiHover:#C7C5BC;
  --dkKapakCizgi:#E8E6DF;
  --dkKutu:#F5F4EE;
  --dkKutuKapali:#EEEDE6;
  --dkGhostZemin:#F0EEE6;
  --dkBaslik:#1F1E1D;
  --dkInk:#1F1E1D;
  --dkSoluk:#6B6A65;
  --dkSessiz:#5F5E58;
  --dkAccent:#137E4C;
  --dkAccentInk:#FFFFFF;
  --dkAccentLine:rgba(19,126,76,.45);
  --dkAccentFiyat:#1F1E1D;
  --dkAltin:#E8B24C;
  --dkAltinInk:#1A1405;
  --dkAltinLine:rgba(176,122,26,.45);
  --dkAltinKutu:#FFF8EA;
  --dkAltinKutuCizgi:#D99A24;
  --dkAltinFiyat:#8A5D0A;
  --dkAmber:#F5A623;
  --dkAmberInk:#1A1405;
  --dkAmberLine:rgba(176,122,26,.45);
  --dkAmberKutu:#FFF6E6;
  --dkTuCerceve:#E09A1A;
  --dkTuParilti:0 0 0 1px rgba(245,166,35,.14),0 10px 28px rgba(245,166,35,.14);
  --dkTuSeritZemin:linear-gradient(90deg,rgba(245,166,35,.30),rgba(245,166,35,.08));
  --dkTuSeritCizgi:rgba(224,154,26,.50);
  --dkTuSure:#1F1E1D;
  --dkAmberKutuCizgi:#E09A1A;
  --dkAmberFiyat:#7A5F0E;
  --dkAmberMetin:#7A5F0E;
  --dkMor:#343891;
  --dkMorCizgi:#484CA8;
  --dkMorMetin:#343891;
  --dkMorLine:rgba(52,56,145,.40);
  --dkKirmizi:#B3402C;
  --dkKirmiziLine:rgba(196,68,47,.55);
  --dkVitrin:#8A5D0A;
  --dkVitrinLine:rgba(176,122,26,.45);
  --dkVitrinHalka:#E8B24C;
  --dkStepZemin:#F5F4EE;
  --dkStepCizgi:#E3E1D9;
  --dkBalonZemin:#F0EEE6;
  --dkBalonCizgi:#C7C5BC;
  --dkPaketZemin:rgba(255,255,255,.97);
  --dkSkinZemin:#FAF9F5;
  --dkKarakterTaban:#FFFFFF;
  --dkGolge:0 16px 36px rgba(31,30,29,.18);
  --dkToastZemin:#1F1E1D;
}

/* ── kart kabuğu ─────────────────────────────────────────── */
.dkKart{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--dkKart);border:1px solid var(--dkKartCizgi);
  border-radius:14px;overflow:hidden;color:var(--dkInk);transition:border-color .16s,transform .16s}
.dkKart:hover{border-color:var(--dkKartCizgiHover);transform:translateY(-2px)}
.dkKart a{text-decoration:none;color:inherit}
.dkKart.dkKapali{opacity:.72}
/* Vitrin (IsBoost): kartın çevresinde dönen altın çerçeve (2px), maske ile yalnız kenar görünür */
.dkVitrin{position:absolute;inset:0;border-radius:13px;padding:2px;pointer-events:none;z-index:6;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.dkVitrin i{position:absolute;top:50%;left:50%;width:150%;aspect-ratio:1;background:conic-gradient(transparent 270deg,var(--dkVitrinHalka),transparent);
  transform:translate(-50%,-50%);animation:dkVitrin 3s linear infinite;display:block}
@keyframes dkVitrin{from{transform:translate(-50%,-50%) rotate(0turn)}to{transform:translate(-50%,-50%) rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.dkVitrin i{animation:none}}

/* ── kapak (4:5) ─────────────────────────────────────────── */
.dkKapak{position:relative;flex:none;width:100%;aspect-ratio:4/5;border-bottom:1px solid var(--dkKapakCizgi);overflow:hidden;
  /* kapak üstü cam pil/düğme tonu: koyu temada koyu cam; açık temada beyaz cam (aşağıda) */
  --dkCam:rgba(24,24,32,.78);--dkCamKoyu:rgba(24,24,32,.9);--dkCamCizgi:#4E4F5C;--dkCamInk:#EDEEF2;--dkCamSoluk:#ABACB5;--dkCamBulanik:0px;
  --dkFadeA:rgba(14,14,20,0);--dkFadeB:rgba(14,14,20,.82);--dkFade:84px}
body.light .dkKapak{--dkCam:rgba(255,255,255,.72);--dkCamKoyu:rgba(255,255,255,.9);--dkCamCizgi:#C7C5BC;--dkCamInk:#1F1E1D;--dkCamSoluk:#6B6A65;--dkCamBulanik:3px;
  --dkFadeA:rgba(255,255,255,0);--dkFadeB:rgba(255,255,255,1)}
/* E-pin / top-up / GB kapağı ürün görselidir, açık temada da KOYU kalır (handoff): cam ve fade koyu set */
body.light .dkKapak.dkKapakKoyu{--dkCam:rgba(24,24,32,.78);--dkCamKoyu:rgba(24,24,32,.9);--dkCamCizgi:#4E4F5C;--dkCamInk:#EDEEF2;--dkCamSoluk:#ABACB5;--dkCamBulanik:0px;
  --dkFadeA:rgba(14,14,20,0);--dkFadeB:rgba(14,14,20,.82)}
.dkKart.dkNadir .dkKapak{border-bottom-width:3px}           /* skin: nadirlik çizgisi (renk satır içi) */
.dkKart.dkTeklif .dkKapak{border-bottom:3px solid var(--dkAmber)}
/* AÇIK TEKLİF (handoff_acik_teklif_kart 28.09): amber çerçeve + parıltı (vitrindeyse dönen çerçeve onun yerine geçer);
   kapağın üstünde 30px şerit (etiket + kalan süre), altındaki kapak öğeleri 30px aşağı kayar. */
.dkKart.dkTeklif:not(.dkVitrinli){border-color:var(--dkTuCerceve);box-shadow:var(--dkTuParilti)}
.dkKart.dkTeklif:not(.dkVitrinli):hover{border-color:var(--dkTuCerceve)}
.dkTuSerit{position:absolute;left:0;right:0;top:0;height:30px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;
  background:var(--dkTuSeritZemin);border-bottom:1px solid var(--dkTuSeritCizgi);backdrop-filter:blur(4px)}
.dkTuSerit .k{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--dkAmberMetin);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dkTuSerit .s{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--dkTuSure);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.dkTuSerit .s svg{color:var(--dkAmberMetin)}
.dkTuSerit svg{display:block;flex:none}
.dkTuSerit.yok .s{font-size:10.5px;font-weight:700}
.dkKart.son .dkTuSerit .s,.dkKart.son .dkTuSerit .s svg{color:var(--dkKirmizi)}
.dkTeklif .dkKapakUst,.dkTeklif .dkHizli{top:38px}
.dkTeklif .dkKapak .productCardItemCard .oyx-item-card{padding-top:40px}
/* fiyat kutusu: "EN YÜKSEK · N TEKLİF" üstte küçük, tutar altta */
.dkBtnSutun{min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.05}
.dkBtnUst{font-size:8.5px;font-weight:800;letter-spacing:.5px;color:var(--dkSoluk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkBtn.amber .dkBtnTutar{font-size:13.5px}
.dkKapakLink{position:absolute;inset:0;display:block;z-index:1;cursor:pointer}
.dkGorsel{position:absolute;inset:0;background:var(--dkSkinZemin)}
.dkGorsel img.productCardImage{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.dkGorsel img.productCardImage.centered{object-fit:contain;padding:0 24px 20px}
.dkKapakFade{position:absolute;left:0;right:0;bottom:0;height:var(--dkFade);background:linear-gradient(180deg,var(--dkFadeA),var(--dkFadeB));pointer-events:none;z-index:2}
.dk-gb .dkKapak,.dk-skin .dkKapak{--dkFade:110px}
.dkKarakterKart .dkKapak{--dkFade:130px}
.dkItemKart .dkKapak{--dkFade:70px}
/* item stat kartı (mevcut .oyx-item-card) kapağı doldurur */
.dkKapak .productCardItemCard{position:absolute;inset:0;display:flex;justify-content:center;overflow:hidden;z-index:1}
.dkKapak .productCardItemCard .oyx-item-card{max-width:100%;height:100%;border:0;border-radius:0;overflow:hidden}
.dkKapak .productCardItemCard .oyx-item-card__head{padding-right:34px}   /* (i) rozeti ad satirinin ustune binmesin */
/* skin kapağı: nadirlik tonlu zemin (satır içi), görsel ortada %76 */
.dkGorselSkin{display:flex;align-items:center;justify-content:center;padding-bottom:20px}
.dkGorselSkin img{width:76%;height:auto;margin-right:20px;display:block}

/* kapak katmanları */
.dkKapak > .dkKapakUst,.dkKapak > .dkHizli,.dkKapak > .dkKapakAlt,.dkKapak > .dkStickerlar,.dkKapak > .dkFloat,.dkKapak > .dkSus,.dkKapak > .dkToplam{z-index:3}
.dkKapakUst{position:absolute;left:8px;top:8px;right:46px;display:flex;flex-wrap:wrap;gap:5px;pointer-events:none}
.dkPil{flex:none;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;background:var(--dkCam);backdrop-filter:blur(var(--dkCamBulanik));
  border:1px solid var(--dkCamCizgi);font-size:9.5px;font-weight:800;letter-spacing:.3px;color:var(--dkCamInk);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dkPil svg{display:block;flex:none}
.dkPil-accent{border-color:var(--dkAccentLine);color:var(--dkAccent)}
.dkPil-mor{border-color:var(--dkMorLine);color:var(--dkMorMetin)}
.dkPil-amber{border-color:var(--dkAmberLine);color:var(--dkAmberMetin)}
.dkPil-altin{border-color:var(--dkVitrinLine);color:var(--dkVitrin)}
.dkPil-kirmizi{border-color:var(--dkKirmiziLine);color:var(--dkKirmizi)}
/* yuvarlak cam düğmeler: (i), zil, kalp, çöp, satıcı */
.dkYuv{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--dkCam);backdrop-filter:blur(var(--dkCamBulanik));
  border:1px solid var(--dkCamCizgi);color:var(--dkCamInk);font-size:13px;cursor:pointer;padding:0;transition:border-color .16s,color .16s,background .16s}
.dkYuv:hover{border-color:var(--dkAccent);color:var(--dkAccent)}
.dkYuv svg{display:block}
.dkYuv.misafir{color:var(--dkCamSoluk)}
.dkYuv.dkKalp .fa-heart-broken,.dkYuv.dkKalp .fas.fa-heart-broken{color:var(--dkKirmizi)}   /* favoride (favoriteAction ikonu değiştirir) */
.dkYuv.dkKalp.aktif{color:var(--dkKirmizi)}
.dkHizli{position:absolute;right:8px;top:8px}
.dkHizli i{font-size:14px}
.dkKapakAlt{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:flex-end;justify-content:space-between;gap:6px}
.dk-skin .dkKapakAlt{bottom:38px}
.dkKapakSol{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dkKapakSag{flex:none;display:flex;gap:6px}
/* durum pili (bottom-left): ALIM TALEBİ / SATILDI / KENDİ İLANIN */
.dkDurum{height:22px}
/* sayaç pili (Açık Teklif / favori modu) */
.dkSayac{flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;background:var(--dkCamKoyu);backdrop-filter:blur(var(--dkCamBulanik));
  border:1px solid var(--dkAmberLine);color:var(--dkAmberMetin);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.dkSayac svg{display:block;flex:none}
.dkSayac.notr{border-color:var(--dkCamCizgi);color:var(--dkCamInk)}
.dkSayac.yok{font-size:10.5px;font-weight:700}
.dkSayac.son{border-color:var(--dkKirmiziLine);color:var(--dkKirmizi)}
/* satıcı pili: 30px nokta, hover'da (mobilde dokununca) ad açılır */
.dkSaticiSar{position:relative;flex:none;width:30px;height:30px}
.dkSatici{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;height:30px;max-width:30px;padding:0 9px;border-radius:999px;background:var(--dkCamKoyu);backdrop-filter:blur(var(--dkCamBulanik));
  border:1px solid var(--dkCamCizgi);font-size:11px;font-weight:700;color:var(--dkCamInk);overflow:hidden;cursor:pointer;white-space:nowrap;
  transition:max-width .26s cubic-bezier(.2,.8,.2,1),padding .26s ease,border-color .18s}
.dkSaticiNokta{flex:none;width:10px;height:10px;border-radius:50%;background:var(--dkSessiz);box-shadow:0 0 0 3px rgba(139,140,153,.18)}
.dkSaticiNokta.online{background:var(--dkAccent);box-shadow:0 0 0 3px var(--dkAccentLine)}
.dkSaticiAd{min-width:0;margin-left:0;max-width:0;opacity:0;overflow:hidden;text-overflow:ellipsis;transition:max-width .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease .06s,margin-left .26s ease}
.dkSatici:hover,.dkSatici.acik{z-index:6;max-width:190px;padding:0 11px 0 9px;border-color:var(--dkAccent)}
.dkSatici:hover .dkSaticiAd,.dkSatici.acik .dkSaticiAd{max-width:150px;opacity:1;margin-left:7px}
/* GB: başlık + alt başlık kapağın alt şeridinde */
.dkKapakBaslik{display:flex;flex-direction:column;gap:1px;min-width:0}
.dkKapakBaslik h2{margin:0;font-size:13px;font-weight:800;line-height:1.25;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkKapakBaslik span{font-size:11px;color:#80F1B1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* çoklu ilan: satıcı + item ikonları + "+N" */
.dkSerit{position:relative;min-width:0;display:flex;align-items:center;gap:5px}
.dkSeritIkon{flex:none;width:28px;height:28px;border-radius:8px;background:var(--dkCamKoyu);border:1px solid var(--dkCamCizgi);display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.dkSeritIkon img{width:74%;height:74%;object-fit:contain;display:block}
.dkSeritIkon:hover{border-color:var(--dkAccent)}
.dkFazla{flex:none;height:28px;min-width:34px;padding:0 7px;border-radius:8px;background:var(--dkCamKoyu);border:1px solid var(--dkCamCizgi);display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:11px;font-weight:800;color:var(--dkCamInk);cursor:pointer;transition:border-color .16s}
.dkFazla:hover,.dkFazla[aria-expanded="true"]{border-color:var(--dkAccent)}
.dkFazla.mobil{display:none}
/* kalan itemler: kapağın içinde, alt satırın üstünde açılan ızgara */
.dkPaket{position:absolute;left:8px;right:8px;bottom:46px;z-index:5;padding:9px;border-radius:12px;background:var(--dkPaketZemin);border:1px solid var(--dkCamCizgi);box-shadow:var(--dkGolge);
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.dkPaket.acik{opacity:1;pointer-events:auto;transform:none}
.dkPaketBas{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:11px;font-weight:800;color:var(--dkCamInk)}
.dkPaketBas b{font-size:10.5px;color:var(--dkAccent)}
.dkPaketIzgara{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.dkPaket .dkSeritIkon{width:auto;height:auto;aspect-ratio:1;border-radius:7px;opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .2s ease}
.dkPaket.acik .dkSeritIkon{opacity:1;transform:none}
.dkPaket .dkSeritIkon img{width:72%;height:72%}
/* skin: sticker sütunu (sağ), float çubuğu (alt), süs (sol) */
.dkStickerlar{position:absolute;right:9px;top:46px;display:flex;flex-direction:column;gap:5px}
.dkSticker{position:relative;width:28px;height:28px;border-radius:7px;background:var(--dkCam);border:1px solid var(--dkCamCizgi);display:flex;align-items:center;justify-content:center;cursor:zoom-in;
  transform-origin:100% 50%;transition:transform .14s,border-color .14s}
.dkSticker img{width:80%;height:80%;object-fit:contain;display:block}
.dkSticker:hover,.dkSticker:focus-visible{transform:scale(1.5);z-index:4;border-color:var(--dkAccent);outline:0}
.dkStickerFazla{display:none;width:28px;height:28px;border-radius:7px;background:var(--dkCam);border:1px solid var(--dkCamCizgi);align-items:center;justify-content:center;
  font:inherit;font-size:10.5px;font-weight:800;color:var(--dkCamInk);cursor:pointer;padding:0}
.dkStickerListe{position:absolute;right:34px;top:0;z-index:6;width:132px;padding:7px;border-radius:10px;background:var(--dkPaketZemin);border:1px solid var(--dkCamCizgi);box-shadow:var(--dkGolge);
  display:none;flex-direction:column;gap:4px}
.dkStickerListe.acik{display:flex}
.dkStickerListe small{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--dkCamSoluk);padding:0 2px 2px}
.dkStickerListe span{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--dkCamInk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkStickerListe span img{flex:none;width:22px;height:22px;object-fit:contain}
.dkFloat{position:absolute;left:8px;right:8px;bottom:9px;display:flex;flex-direction:column;gap:4px}
.dkFloatBas{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;color:var(--dkCamInk);font-variant-numeric:tabular-nums}
.dkFloatBas span{color:var(--dkCamSoluk)}
.dkFloatBar{position:relative;height:5px;border-radius:999px;overflow:visible;display:flex}
.dkFloatBar i{display:block;height:100%}
.dkFloatBar i:first-child{border-radius:999px 0 0 999px}
.dkFloatBar i:last-of-type{border-radius:0 999px 999px 0}
.dkFloatBar .fn{width:7%;background:#4CAF50}
.dkFloatBar .mw{width:8%;background:#8BC34A}
.dkFloatBar .ft{width:23%;background:#E8B24C}
.dkFloatBar .ww{width:7%;background:#E08A3F}
.dkFloatBar .bs{width:55%;background:#C4442F}
.dkFloatOk{position:absolute;top:-3px;width:3px;height:11px;border-radius:2px;background:#FFFFFF;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.dkSus{position:absolute;left:8px;bottom:74px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.dkSus img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* karakter kapağı (Seçenek B): büyük seviye + sınıf pili + sınıf tonlu zemin ve halkalar; altta NP / Def / % çubuğu */
.dkKarakter{position:absolute;inset:0;overflow:hidden;
  --dkKrVurgu:#F2D48A;--dkKrTon:rgba(255,214,120,.30);--dkKrTon2:rgba(120,86,24,.20);--dkKrHalka:rgba(255,214,120,.22);--dkKrHalka2:rgba(255,214,120,.18);
  background:radial-gradient(120% 90% at 50% 40%,var(--dkKrTon) 0%,var(--dkKrTon2) 42%,var(--dkKarakterTaban) 78%)}
body.light .dkKarakter{--dkKrVurgu:var(--dkKrVurguAcik,#8A5D0A);--dkKrTon2:rgba(255,236,190,.35);--dkKrHalka:rgba(176,122,26,.28);--dkKrHalka2:rgba(176,122,26,.22)}
.dkKarakter i{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);border-radius:50%;display:block}
.dkKarakter i.h1{width:170px;height:170px;border:1px solid var(--dkKrHalka)}
.dkKarakter i.h2{width:134px;height:134px;border:1px dashed var(--dkKrHalka2)}
.dkKrOrta{position:absolute;left:0;right:0;top:62px;display:flex;flex-direction:column;align-items:center;gap:2px}
.dkKrEtiket{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--dkKrVurgu)}
.dkKrSeviye{display:flex;align-items:baseline;gap:2px;line-height:1}
.dkKrSeviye b{font-size:64px;font-weight:800;letter-spacing:-2px;color:#FFFFFF;font-variant-numeric:tabular-nums;text-shadow:0 4px 18px rgba(255,190,72,.35)}
body.light .dkKrSeviye b{color:#212529;text-shadow:none}
.dkKrSeviye span{font-size:20px;font-weight:800;color:var(--dkKrVurgu)}   /* "/6": sinif renginde, kucuk (handoff) */
.dkKrSinif{display:flex;align-items:center;gap:7px;margin-top:8px;height:28px;padding:0 11px 0 6px;border-radius:999px;background:var(--dkCam);border:1px solid var(--dkKrHalka);max-width:calc(100% - 24px)}
.dkKrSinif img{width:20px;height:20px;object-fit:contain;display:block;flex:none}
.dkKrSinif b{font-size:11.5px;font-weight:800;color:var(--dkKrVurgu);white-space:nowrap}
.dkKrSinif span{font-size:11px;color:var(--dkCamInk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkKrStat{position:absolute;left:10px;right:10px;bottom:48px;display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-variant-numeric:tabular-nums;z-index:3}
.dkKrStat > div{display:flex;justify-content:space-between;gap:8px;color:var(--dkCamInk)}
.dkKrBar{display:flex;align-items:center;gap:8px}
.dkKrBar i{flex:1;height:5px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;display:block}
body.light .dkKrBar i{background:rgba(31,30,29,.12)}
.dkKrBar i b{display:block;height:100%;background:var(--dkAccent)}
.dkKrBar > b{color:var(--dkCamInk);font-weight:800}
/* kapakta toplam pili (adet satırı açıkken, JS) */
.dkToplam{position:absolute;left:8px;bottom:46px;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--dkCamKoyu);backdrop-filter:blur(var(--dkCamBulanik));
  border:1px solid var(--dkAccentLine);font-size:11.5px;font-weight:800;color:var(--dkAccent);font-variant-numeric:tabular-nums;white-space:nowrap;max-width:calc(100% - 16px)}
.dkToplam.sat{border-color:var(--dkAltinLine);color:var(--dkAltin)}
.dkToplam > span:first-child{color:var(--dkCamSoluk);font-weight:700}
.dkToplamKalem{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:-4px;border-radius:999px;border:0;background:transparent;color:var(--dkCamSoluk);cursor:pointer;padding:0}
.dkToplamKalem:hover{color:var(--dkCamInk)}
.dkToplamKalem svg,.dkToplamOk svg{display:block}
.dkToplam input{width:78px;height:22px;padding:0 6px;border-radius:6px;background:var(--dkStepZemin);border:1px solid var(--dkAccent);outline:0;font:inherit;font-size:12px;font-weight:800;color:var(--dkInk);text-align:right}
.dkToplam.sat input{border-color:var(--dkAltin)}
.dkToplamOk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:-4px;border-radius:999px;border:0;background:var(--dkAccent);color:var(--dkAccentInk);cursor:pointer;padding:0}
.dkToplam.sat .dkToplamOk{background:var(--dkAltin);color:var(--dkAltinInk)}

/* ── gövde ───────────────────────────────────────────────── */
.dkGovde{flex:1;min-height:108px;display:flex;flex-direction:column;gap:2px;padding:10px}
.dkBaslikSar{position:relative;flex:none;height:18px}
.dkBaslik{display:block;min-width:0;cursor:pointer}
.dkBaslik h2{margin:0;font-size:13px;font-weight:700;line-height:18px;color:var(--dkBaslik);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkBaslik:hover h2{color:var(--dkAccent)}
/* sığmayan başlık: hover'da kart içinde tam metin (JS ekler) */
.dkBaslikTam{position:absolute;left:-6px;right:-6px;bottom:-4px;z-index:6;padding:5px 6px;border-radius:8px;background:var(--dkBalonZemin);border:1px solid var(--dkBalonCizgi);box-shadow:0 10px 24px rgba(0,0,0,.45);
  font-size:13px;font-weight:700;line-height:18px;color:var(--dkBaslik);white-space:normal;overflow-wrap:anywhere;pointer-events:none}
.dkKart a.dkAltBaslik,.dkAltBaslik{flex:none;display:block;font-size:11px;line-height:15px;color:var(--dkAccent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkAltBaslik.soluk{color:var(--dkSoluk)}
.dkAltBaslik.kirmizi{color:var(--dkKirmizi)}
.dkAyak{flex:none;margin-top:auto;display:flex;flex-direction:column;gap:6px}
/* bölünmüş düğme: fiyat | eylem */
.dkSatir{position:relative}
.dkBtn{display:flex;height:36px;width:100%}
.dkBtnFiyat{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding-left:11px;border:1px solid var(--dkAccent);border-right:0;border-radius:10px 0 0 10px;background:var(--dkKutu)}
.dkBtnEtiket{flex:none;font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--dkSessiz)}
.dkBtnTutar{min-width:0;font-size:14px;font-weight:800;color:var(--dkAccentFiyat);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* eski fiyat kartta basilmaz (tasarimda yok; fiyat kutusunda tutari kesiyordu) */
.dkBtnEylem{flex:none;min-width:58px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:0 10px 10px 0;
  background:var(--dkAccent);border:1px solid var(--dkAccent);color:var(--dkAccentInk);font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:filter .16s}
.dkBtnEylem svg,.dkBtnEylem i{display:block;flex:none;font-size:15px}
.dkBtnEylem:hover{filter:brightness(1.1)}
/* varyantlar */
.dkBtn.gold .dkBtnFiyat{border-color:var(--dkAltinKutuCizgi);background:var(--dkAltinKutu)}
.dkBtn.gold .dkBtnTutar{color:var(--dkAltinFiyat)}
.dkBtn.gold .dkBtnEylem{background:var(--dkAltin);border-color:var(--dkAltin);color:var(--dkAltinInk)}
.dkBtn.amber .dkBtnFiyat{border-color:var(--dkAmberKutuCizgi);background:var(--dkAmberKutu)}
.dkBtn.amber .dkBtnTutar{color:var(--dkAmberFiyat)}
.dkBtn.amber .dkBtnEylem{background:var(--dkAmber);border-color:var(--dkAmber);color:var(--dkAmberInk)}
.dkBtn.mor .dkBtnFiyat{border-color:var(--dkMorCizgi)}
.dkBtn.mor .dkBtnEylem{background:var(--dkMor);border-color:var(--dkMorCizgi);color:#FFFFFF}
.dkBtn.mor .dkBtnEylem:hover{filter:none;background:#3F44A8}
.dkBtn.off .dkBtnFiyat{border-color:var(--dkKartCizgi)}
.dkBtn.off .dkBtnTutar{color:var(--dkSoluk)}
.dkBtn.off .dkBtnEylem{background:var(--dkKutuKapali);border-color:var(--dkKartCizgi);color:var(--dkSessiz);cursor:not-allowed;text-transform:none}
.dkBtn.off .dkBtnEylem:hover{filter:none}
.dkBtn.ghost .dkBtnFiyat{border-color:var(--dkKartCizgiHover)}
.dkBtn.ghost .dkBtnTutar{color:var(--dkSoluk)}
.dkBtn.ghost .dkBtnEylem{background:var(--dkGhostZemin);border-color:var(--dkKartCizgiHover);color:var(--dkInk);text-transform:none}
.dkBtn.ghost .dkBtnEylem:hover{filter:none;border-color:var(--dkAccent)}
/* adet satırı: ✕ · adet seçici · onay (sepet düğmesine basınca bölünmüş düğmenin yerine, JS .acik) */
.dkAdetSatir{display:none;align-items:center;gap:6px}
.dkSatir.acik > .dkBtn{display:none}
.dkSatir.acik > .dkAdetSatir{display:flex;animation:dkGir .18s ease}
@keyframes dkGir{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
.dkAdetKapat{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--dkKartCizgiHover);background:var(--dkKart);color:var(--dkSoluk);font:inherit;font-size:14px;cursor:pointer;padding:0}
.dkAdetKapat:hover{color:var(--dkInk)}
.dkAdet{flex:none;display:flex;align-items:center;height:36px;border-radius:10px;border:1px solid var(--dkStepCizgi);background:var(--dkStepZemin);overflow:hidden;transition:border-color .16s,box-shadow .16s}
.dkAdet.hata{border-color:var(--dkKirmiziLine);box-shadow:0 0 0 3px rgba(224,85,63,.12)}
.dkAdetEksi,.dkAdetArti{width:30px;height:36px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;font:inherit;font-size:15px;color:var(--dkSoluk);cursor:pointer;padding:0}
.dkAdetEksi:hover,.dkAdetArti:hover{color:var(--dkInk)}
.dkAdet .productNavigateInput{width:34px;height:34px;border:0;background:transparent;text-align:center;font:inherit;font-size:13px;font-weight:700;color:var(--dkInk);font-variant-numeric:tabular-nums;-moz-appearance:textfield;outline:0;padding:0;box-shadow:none}
.dkAdet .productNavigateInput::-webkit-outer-spin-button,.dkAdet .productNavigateInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dkAdetOnay{flex:1 1 0;min-width:0;height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border-radius:10px;border:0;
  background:var(--dkAccent);color:var(--dkAccentInk);font:inherit;font-size:12px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;cursor:pointer;transition:filter .16s}
.dkAdetOnay:hover{filter:brightness(1.1)}
.dkAdetOnay:disabled{opacity:.6;cursor:wait}
.dkAdetOnay svg{display:block;flex:none}
.dkAdetOnay span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dkAdetOnay.gold{background:var(--dkAltin);color:var(--dkAltinInk)}

/* zil: mevcut x-ui.product-notify-button bileşeni, kapak diline çekilir; paneli alt satırın üstünde açılır */
.dkKapak .productNotifyWrapper.dkZil{position:static}
.dkKapak .productNotifyButton{width:30px;height:30px;border-radius:999px;background:var(--dkCam);backdrop-filter:blur(var(--dkCamBulanik));box-shadow:none;border:1px solid var(--dkCamCizgi);color:var(--dkCamInk);font-size:13px;opacity:1;position:relative;top:auto;right:auto}
.dkKapak .productNotifyButton:hover{background:var(--dkCam);border-color:var(--dkAccent);color:var(--dkAccent)}
.dkKapak .productNotifyPanel{width:auto;left:0;right:0;bottom:40px;margin:0;z-index:8;background:var(--dkKart);backdrop-filter:none;border-color:var(--dkKartCizgiHover);box-shadow:var(--dkGolge);border-radius:12px;padding:12px}
.dkKapak .productNotifyPanel .notifyTitle{font-size:13px}
/* çöp: mevcut x-ui.product-remove-button, cam düğme */
.dkKapak .productListRemoveButton{width:30px;height:30px;border-radius:999px;background:var(--dkCam);backdrop-filter:blur(var(--dkCamBulanik));box-shadow:none;border:1px solid var(--dkCamCizgi);color:var(--dkCamInk);font-size:13px}
.dkKapak .productListRemoveButton:hover{border-color:var(--dkKirmizi);color:var(--dkKirmizi);background:var(--dkCam)}

/* bildirim (toast) */
.dkToast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);z-index:1200;display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;
  background:var(--dkToastZemin);color:#EDEEF2;border:1px solid rgba(255,255,255,.12);box-shadow:var(--dkGolge);font-size:13px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.dkToast.acik{opacity:1;transform:translateX(-50%)}
.dkToast svg{display:block;flex:none;color:#80F1B1}

/* ── satıcı profili vitrini: kart bileşeni panel tonlarını alır (satici-profil.css eski .productCard kuralları kalktı) ── */
.pnVitrin .dkKart{--dkKart:var(--pnCard);--dkKartCizgi:var(--pnLine)}

/* ── mobil (≤575.98: Bootstrap row-cols-2) — kart ~177×338: kapak düğmeleri 34, alt düğme 40, fiyat 12.5 ── */
@media (max-width:575.98px){
  .dkGovde{min-height:110px;padding:8px}
  .dkYuv,.dkSaticiSar,.dkSatici,.dkKapak .productNotifyButton,.dkKapak .productListRemoveButton{width:34px;height:34px}
  .dkSatici{max-width:34px;padding:0 11px}
  .dkSatici:hover,.dkSatici.acik{max-width:190px;padding:0 11px}
  .dkKapakAlt{gap:4px}
  .dkKapakSag{gap:4px}
  .dkKapakUst .dkPil{flex:0 1 auto;min-width:0;min-height:22px;height:auto;padding:3px 8px;border-radius:11px;white-space:normal;line-height:1.2}
  .dkBtn{height:40px}
  .dkBtnFiyat{padding-left:9px}
  .dkBtnTutar{font-size:12.5px}
  .dkBtn.amber .dkBtnTutar{font-size:12.5px}
  .dkBtnEylem{min-width:44px;padding:0 9px}
  .dkBtnEylem span{display:none}
  .dkAdetKapat{width:32px;height:40px}
  .dkAdet{flex:1 1 0;min-width:0;height:40px}
  .dkAdetEksi,.dkAdetArti{flex:none;width:24px;height:40px}
  .dkAdet .productNavigateInput{flex:1;width:auto;min-width:0;height:38px}
  .dkAdetOnay{flex:none;width:40px;height:40px;padding:0;gap:0}
  .dkAdetOnay span{display:none}
  .dkToplam{bottom:50px;height:26px;font-size:11px;padding:0 8px}
  .dkToplam input{width:66px}
  /* GB: başlık kapağın altında solda, zil + kalp başlığın sağında alt alta */
  .dk-gb .dkKapakSag{flex-direction:column}
  .dk-gb .dkKapakBaslik h2{font-size:12px}
  /* çoklu ilan: ikon şeridi yok, yalnız "+N" (mobil sayacı: kapaktaki hariç tüm itemler) */
  .dkSerit .dkSeritIkon,.dkFazla.masa{display:none}
  .dkFazla.mobil{display:flex;height:34px;min-width:38px;padding:0 8px}
  .dkPaket{bottom:50px;padding:7px}
  .dkPaketIzgara{grid-template-columns:repeat(5,1fr)}
  .dkKapak .productCardItemCard .oyx-item-card__line:nth-last-child(1){display:none}   /* son stat satırı (Max Durability) gizli */
  /* skin: 2 sticker + "+N" */
  .dkSticker{width:24px;height:24px;border-radius:6px}
  .dkStickerlar .dkSticker:nth-child(n+3){display:none}
  .dkStickerFazla{display:flex;width:24px;height:24px;border-radius:6px}
  .dkStickerListe{right:30px}
  .dk-skin .dkKapakAlt{bottom:34px}
  .dkFloat{bottom:7px}
  /* karakter kapağı küçük: seviye 46px, halkalar 128/100 */
  .dkKarakter i.h1{width:128px;height:128px}
  .dkKarakter i.h2{width:100px;height:100px}
  .dkKrOrta{top:44px}
  .dkKrSeviye b{font-size:46px;letter-spacing:-1px}
  .dkKrSeviye span{font-size:15px}
  .dkKrSinif{height:24px;margin-top:5px;padding:0 9px 0 5px}
  .dkKrSinif img{width:16px;height:16px}
  .dkKrSinif b,.dkKrSinif span{font-size:10.5px}
  .dkKrStat{bottom:46px;font-size:10.5px}
  .dkSayac{height:24px;font-size:11px;padding:0 8px}
  .dkKapak .productNotifyPanel{bottom:44px;padding:10px}
}