/* ========================================================= duello-v2.css — YALNIZ /duellon sayfası için. --------------------------------------------------------- NEDEN: 16-19 Ağustos geçişinden sonra düello sohbeti dar sol sütuna alındı (duello.ejs:18 → col-lg-4 col-xl-3). 5 günde 9 ayrı kullanıcı arayüzden şikâyetçi; tekrar eden tek somut alt-şikâyet sohbetin darlığı (milokhin 08-20 23:47 "chat kısmı çok küçük", SENSYVE 08-20 23:53, MustafaKemal 08-20 18:24). Site sahibi 08-20 23:57'de "alternatif geliştirelim" dedi. ⚠️ İZOLASYON: duellon.ejs ile duello.ejs BİREBİR aynı css/js dosyalarını yüklüyor. duello.css / duello-cards.css içine yazılan her kural /duello'ya da sızar. Bu yüzden tüm kurallar `.duello-v2` öneklidir ve YALNIZ duellon.ejs bu dosyayı yükler. /duello'nun tek baytı değişmemelidir. ⚠️ !important KULLANMA (ko-resizing dışında): #chatCol .chat-collapsed (duello-cards.css:40) `!important` ile genişliği 0'a çekiyor ve BİLEREK üstte kalmalı — yoksa "Gizle" düğmesi bozulur. ========================================================= */ @media (min-width: 992px) { /* Özgüllük (1,1,0) → Bootstrap .col-lg-4/.col-xl-3'ü (0,1,0) yener, .chat-collapsed'ın !important'ına yenilir. İstenen tam olarak bu sıralama. */ .duello-v2 #chatCol { flex: 0 0 var(--duello-chat-w, 35%); max-width: var(--duello-chat-w, 35%); } .duello-v2 #mainCol { flex: 0 0 calc(100% - var(--duello-chat-w, 35%)); max-width: calc(100% - var(--duello-chat-w, 35%)); } /* Sürükleme kulbu. #chatHandle KULLANILMIYOR — o eleman duello-cards.css:64-88'de `pointer-events:none` ve yalnız sohbet TAMAMEN kapalıyken (`:94`) tıklanabilir hale geliyor; yani tam da genişlik ayarlanacak durumda ölü. Bu kulp duello-v2-layout.js tarafından üretilir. */ .duello-v2 .ko-chat-resizer { position: absolute; top: 0; bottom: 0; right: -5px; width: 10px; cursor: col-resize; z-index: 6; background: transparent; touch-action: none; } /* TUTAMAÇ NOKTALARI (kullanıcı, 2026-08-22): "ince bir çizgi koymuşsun ama sanki çok net anlaşılmıyor gibi". Eski hâl 3px × 46px, %28 opaklık — ekran görüntüsüyle doğrulandı, gerçekten fark edilmiyordu. Üç dikey nokta arayüzlerde en tanınan sürükleme işaretidir; kullanıcı ne işe yaradığını öğrenmeden anlar. Noktalar `radial-gradient` ile tek öğede üretiliyor — ek DOM yok. */ .duello-v2 .ko-chat-resizer::before { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 22px; /* 3 nokta × 8px aralık */ transform: translate(-50%, -50%); background-image: radial-gradient(circle, rgba(108, 122, 140, .55) 1.6px, transparent 1.7px); background-size: 4px 8px; background-repeat: repeat-y; transition: background-image .18s ease, transform .18s ease; } .duello-v2 .ko-chat-resizer:hover::before { background-image: radial-gradient(circle, rgba(70, 110, 210, .95) 1.9px, transparent 2px); transform: translate(-50%, -50%) scale(1.18); } .duello-v2.ko-resizing .ko-chat-resizer::before { background-image: radial-gradient(circle, rgba(40, 80, 190, 1) 2px, transparent 2.1px); transform: translate(-50%, -50%) scale(1.18); } /* Gece modu: koyu zeminde gri noktalar kayboluyor, açık ton şart. */ body.dark .duello-v2 .ko-chat-resizer::before { background-image: radial-gradient(circle, rgba(170, 190, 210, .55) 1.6px, transparent 1.7px); } body.dark .duello-v2 .ko-chat-resizer:hover::before { background-image: radial-gradient(circle, rgba(130, 175, 255, .95) 1.9px, transparent 2px); } /* Sohbet kapalıyken kulp anlamsız — gizle. */ .duello-v2 #chatCol.chat-collapsed .ko-chat-resizer { display: none; } /* duello-cards.css:29-37 #chatCol/#mainCol'a .35s flex-basis geçişi veriyor. Sürüklerken bu lastik/gecikme etkisi yapar ve sayfa zaten "kasıyor" şikâyeti alıyor — sürükleme süresince kapat. Tek !important kullanımı burada. */ .duello-v2.ko-resizing #chatCol, .duello-v2.ko-resizing #mainCol { transition: none !important; } } /* 1200px altında (lg) sohbet biraz daha geniş açılsın: dar ekranda %35 okunabilir bir sohbet bırakmıyor. */ @media (min-width: 992px) and (max-width: 1199.98px) { .duello-v2 { --duello-chat-w: 40%; } } /* ⚠️ 992px ALTI İÇİN TEK BİR KURAL BİLE YAZILMAYACAK. Mobil yerleşim /duello ile birebir aynı kalmalı (BK8). TEK İSTİSNA: aşağıdaki `.demo-kart` kuralları medya sorgusu dışındadır. Gerekçe: `.demo-kart` yalnız /duellon'un demo enjeksiyonunda üretilen bir sınıf; /duello'da hiç var olmaz, dolayısıyla mobil yerleşimi etkileyemez. 375px ölçümüyle doğrulandı: /duello ve /duellon'da fark 0. */ /* ========================================================= TUR 2 (2026-08-22) — kart sadeleştirme + içeriğe göre bölüşüm --------------------------------------------------------- AMAÇ (kullanıcı, birebir): "kullanıcılar hem sohbette aktif yazabilsin hem de aktif düelloları görebilsin" + "çok karmaşık görünmesin". ⚠️ .duello-page{height:calc(100dvh-60px)} (duello-cards.css:1190) KASITLI OLARAK KORUNUYOR. Sayfayı doğal akışa çevirmek sohbet ile düello listesini aynı ekranda tutma amacına TERS düşerdi (kaydırma gerektirirdi). Değişen tek şey iki panelin o yüksekliği nasıl paylaştığı: sabit 50/50 yerine içeriğe göre. ⚠️ RENK YAZILMIYOR — yalnız geometri. Gece modu kuralları (duello-cards.css:1963-1998, 2009-2015 + style_dark_mode.css:10795+) color/background/border/box-shadow'u `!important` ile alıyor; !important'sız renk gündüz uygulanır, GECEDE SESSİZCE ÖLÜR ve iki tema ayrışır. Vurgu punto/boşluk/yerleşimle veriliyor. ⚠️ Buradaki !important'lar ZORUNLU: core.css:8564,8572 .h-50/.h-100 `!important` ile geliyor, duello-cards.css:1296 ise ID özgüllüğüyle (#bireysel-card-container) height:100% yazıyor. Sınıf seçicisi ikisini de yenemez. ========================================================= */ @media (min-width: 992px) { /* --- B) Panel bölüşümü: 50/50 → 58/42 -------------------- */ /* 🔴 GERİ ALMA (2026-08-22, ikinci tur). Burada ÖNCE "içeriğe göre bölüşüm" vardı (`.tab-pane{height:auto}` + konteynerlerde `flex:0 0 auto` + gövdelerde `max-height:54vh/40vh`). KULLANICI BOZULDUĞUNU BİLDİRDİ: "bireysel düellolar sayfayı kaplıyor, toplu düellolar altta kalıyor — aslında yüksekliği yarı yarıya bölmemin sebebi buydu." Ölçüldü: toplu panel satırın DIŞINA taşıyordu — 1920'de 224 px, 1600'de 360 px, 1366'da 368 px ve 1366'da BAŞLIĞI BİLE görünmüyordu. ⚠️ Şablondaki `h-50`/`h-50` KASITLI bir tasarım kararıymış: iki bölüm de aynı anda görünsün. Gerekçesini sormadan değiştirdim; kabul kriterlerimde "toplu panel satırın içinde mi" maddesi hiç yoktu. Bundan sonra yükseklik/bölüşüm değiştiren her işte o kriter ZORUNLU. Sabit orana dönüldü, yalnız oran 50/50 yerine 58/42 — ölçümle seçildi (aynı sayfa, aynı demo veri, görünen bireysel/toplu kart): oran 1920 1600 1366 58/42 6 / 1 3 / 1 2 / 0 55/45 6 / 1 2 / 1 2 / 0 50/50 6 / 1 2 / 1 1 / 0 Üçünde de toplu panel tam görünür ve satır kaydırmıyor. ⚠️ 58/42'yi ÖNERDİM, kullanıcı 50/50'de KARAR KILDI: "sanki bireysel ve toplu düellonun yüksekliği 50/50 olmadı gibi, bireysel daha yüksek kalıyor." Oran kullanıcının tasarım kararı, ölçümün değil. Bedeli ölçüldü: 1366'da görünen bireysel kart 2→1, 1600'de 3→2. ⚠️ Konteyner ve `.card-body` için kural YAZILMIYOR: yukarıdaki ezmeler silinince `duello-cards.css:1296-1303` (konteyner: `flex:1 1 auto; height:100%; min-height:0`) ve `:1306-1311` (gövde: `flex:1 1 auto; min-height:0; overflow-y:auto`) zaten birebir aynısını veriyor, `h-100` sınıfı da yerinde (duellon.ejs:180,267). Aynı özellik için dosyada ikinci bir kural bırakmak, prototipte yaşadığım özgüllük belirsizliğinin kaynağıydı. ⚠️ `:has(.no-toplu-duel-msg)` ile "toplu boşken büzülsün" varyantı DENENDİ ve REDDEDİLDİ: 1366'da boş durum 300 px alıp bireyseli 298 px'e düşürüyor, görünen bireysel kart 1'e iniyor. Ayrıca aynı hata ailesi — içeriğe bağlı yükseklik. */ /* ⚠️ `:not(.bir-bolum-kapali)` ŞART — ÖLÇÜMDE ÇAKTI. Bir bölüm katlanınca duelloapp.js satıra `bir-bolum-kapali`, pane'e `bolum-kapali` ekliyor (duelloapp.js:3280,3293) ve duello-cards.css:2138-2168 açık panelin boşalan yeri kullanmasını sağlıyor. O kurallar en fazla 4 SINIF özgüllüğünde (0,4,0); buradaki kural KİMLİK taşıdığı için (1,3,0) onları eziyordu → katlama işlevsiz kalıyordu (ölçüm: bireysel kapatıldıktan sonra pane 481 px'te sabit). Kapalı durumda bu kuralın devre dışı kalması gerekiyor. */ .duello-v2 .duellocardrow:not(.bir-bolum-kapali) > #tab-bireysel { height: 50% !important; } .duello-v2 .duellocardrow:not(.bir-bolum-kapali) > #tab-toplu { height: 50% !important; } /* 58+42 = 100 olduğu için `stretch` de çalışırdı; ama artık boşluk doğarsa `stretch` onu iki satıra EŞİT dağıtıp oranı 58/42'den kaydırır. `flex-start` oranı sabitler. (Eski gerekçesi farklıydı: auto yükseklikli satırların geri gerilmesini engelliyordu — o kurgu artık yok.) */ .duello-v2 .duellocardrow { align-content: flex-start; } /* Emniyet ağı: #mainCol .duellocardrow{overflow:hidden} (duello-cards.css:1283) beklenmedik bir taşmada listeyi sessizce kırpardı. */ .duello-v2 #mainCol .duellocardrow { overflow-y: auto; } /* --- A) Kart sadeleştirme (yalnız geometri) --------------- */ /* Ölçüm (8 demo kart, misafir): 1920 önce: .duel-mid 139px · rozet yığını 102px (3 SATIR) · 8/8 kartta alıntı kırpık · tam görünen 3 1366 önce: .duel-mid 16px · rozetler overflow:hidden ile KIRPILIYOR (canlı /duello'da da öyle: 56px) Kök neden orta sütunun darlığı. Kartı satır başına tek yapmak .duel-mid'i 419px'e çıkarıyor; rozetler tek satıra iniyor ve alıntı okunur oluyor. */ .duello-v2 #bekleyenbireyselduellolar > [id^="duel-cardn-"] { flex: 0 0 100%; max-width: 100%; margin-bottom: .35rem !important; } /* Kart yüksekliği 165 → 105px; aynı dikey alanda daha çok düello görünür (amacın birinci yarısı). */ .duello-v2 .duel-card-grid .card-body { padding: .35rem .5rem !important; } .duello-v2 .duel-card-grid .duel-left { width: 78px; flex: 0 0 78px; } /* 🔴 KUSUR ONARIMI (kullanıcı: "resimlerin border'ı çok kalın"). ÖNCEKİ HALİM HATALIYDI: `.duel-avatar-img`i 34px'e küçülttüm ama kabını (duello-cards.css:325-336, 54x54 + padding 3px + gradyan zemin) küçültmedim → ortada (54−34)/2 = **10 px halka** kaldı. Ölçüldü. Artık img override'ı YOK: duello-cards.css:338-344 zaten `width:100%;height:100%` diyor, kabı küçültmek yetiyor ve halka her zaman padding kadar kalıyor — iki değer kalıcı senkron. ⚠️ `flex: 0 0 40px` ZORUNLU. Kap `.duel-left` flex-direction:COLUMN (duello-cards.css:685) ⇒ flex-basis YÜKSEKLİKTİR; yalnız `height` yazarsam duello-cards.css:335'teki `flex:0 0 54px` ana ekseni kazanır ve avatar 40x54 OVAL çıkar. ⚠️ `outline-width` YAZILMADI: ölçüldü, `outlineStyle:"none"` — okunan 3px yalnız başlangıç değeri, hiçbir şey boyamıyor. */ .duello-v2 .duel-card-grid .duel-avatar-wrap { width: 40px; height: 40px; flex: 0 0 40px; padding: 2px; } .duello-v2 .duel-card-grid .duel-avatar-wrap { margin-bottom: 2px !important; } /* 🔴 KUSUR ONARIMI (kullanıcı: "kullanıcı adı uzun olan sola doğru taşıyor"). Ölçüm: "klavyeUstasi" adı 82 px, kabı `.duel-left` 78 px → 6 px SOLA taşıyor; scrollWidth == clientWidth, yani eleman kırpılmak yerine kabından GENİŞ büyüyor. `text-truncate` sınıfı overflow/ellipsis veriyor ama genişliği sınırlamıyor; `.duel-left` flex-column + align-items:center olduğu için çocuk taşabiliyor. `.duel-left`i 100 → 78 px yapan benim kuralım bunu görünür kıldı. ⚠️ `min-width:0` GEREKMİYOR: o tuzak flex ANA EKSENİNDE geçerli, burada ana eksen dikey. Doğru knob `max-width`. */ .duello-v2 .duel-card-grid .duel-name, .duello-v2 .duel-card-grid .duel-rank { max-width: 100%; } /* ⚠️ PUNTOLAR BİR TIK BÜYÜTÜLDÜ (2026-08-22, ikinci geçiş). Bu turda arka arkaya punto düşürdüm ve toplamı fazla kaçtı; kullanıcı fark etti: "yazıların fontu biraz küçük mü kaldı acaba". Ölçüm: sayfa gövde puntosu 14px iken kartta rütbe 10.88px'e kadar inmişti. %8 büyütmenin BEDELİ ÖLÇÜLDÜ: kart 90 → 93px (+3), aynı anda görünen düello 6 → 6 (DEĞİŞMEDİ). Yani okunabilirlik kazancı bedavaya geliyor. */ .duello-v2 .duel-card-grid .duel-name { font-size: .85rem; } .duello-v2 .duel-card-grid .duel-rank { font-size: .74rem; } .duello-v2 .duel-card-grid .duel-meta { font-size: .82rem; } .duello-v2 .duel-card-grid .duel-preview { font-size: .82rem; } .duello-v2 .duel-card-grid .duel-chips { margin-top: .25rem !important; } /* Seçici bilerek `.duel-card-grid .dchip` — düz `.duello-v2 .dchip` toplu düello kartını (.duel-list-card, duello-cards.css:392) da kapsardı; toplu kart bu turun kapsamı dışında. */ .duello-v2 .duel-card-grid .dchip { font-size: .8rem; padding: 2px 7px; } /* Asıl eylem. Renk DEĞİL, punto+boşlukla öne çıkarılıyor. */ .duello-v2 .duel-card-grid .duel-right .btn { font-size: .9rem; padding: .42rem 1rem; } } /* ========================================================= ÜST ŞERİT TAM GENİŞLİK (2026-08-22) --------------------------------------------------------- KULLANICI (birebir): "o satırı komple sola kadar uzatsak. yani genel sohbetin yüksekliğini azaltsak, o aktif klavyeşör sayısı falan olan satırı soldan sağa full genişletsek" `.duello-topbar` şu an YALNIZ #mainCol içinde: @1920 x=844 w=1064, @1366 x=650 w=704. Dar kaldığı için `.duello-stats` (duellon.ejs:85, satır içi `overflow-auto`) @1366'da YATAY KAYIYOR: scrollWidth 346 / clientWidth 210 — ölçüldü. Şerit DOM'da duello-v2-layout.js tarafından `.duello-page`in DOĞRUDAN çocuğu yapılıyor (.ko-topbar-full sarmalı içinde). ⚠️ `.duello-page`in DIŞINA taşınmamalı: gece modu kuralları (duello-cards.css:1708-1711, style_dark_mode.css:1366,1549,4729) `body.dark .duello-page .duello-topbar` biçiminde, ata zincirine bağlı — dışarı taşınsa şerit gecede beyaz kalırdı. Sohbetin kısalması OTOMATİK: #chatCol satırın `h-100`ü; satır şerit kadar kısalınca sohbet de kısalıyor. Ayrı yükseklik kuralı yazılmadı. ========================================================= */ @media (min-width: 992px) { .duello-v2 { display: flex; flex-direction: column; } .duello-v2 > .ko-topbar-full { flex: 0 0 auto; width: 100%; } /* ⚠️ !important ZORUNLU. Kontrol ajanı "gereksiz, (0,2,0) zaten (0,1,0)'ı yener" dedi; rakip kural duello-cards.css:1195 için doğru AMA satırın kendisinde `h-100` SINIFI var (duellon.ejs:19) ve core.css:8572 onu `height:100%!important` yapıyor. !important olmadan bu kural hiç uygulanmaz. */ .duello-v2 .duello-layout-row { flex: 1 1 auto; height: auto !important; min-height: 0; } /* 🔴 REGRESYON ONARIMI (kontrol ajanı BKt12'de bunu şart koşmuştu, ölçüm de çakıldı). #chatHandle "Sohbeti Aç" kulbu; şerit gidince kabı (`#mainCol > … > .row.px-2 > .p-0.col-12`) 0px'e indi ve kulp `top:0;bottom:0` olduğu için 0 YÜKSEKLİĞE düştü. Ölçüm — Gizle sonrası #chatHandle: /duello (taban) : 14 x 98 px → tıklanabilir /duellon (onarımsız) : 14 x 0 px → sohbet BİR DAHA AÇILAMIYOR JS `.click()` yine çalışıyordu, o yüzden fonksiyonel testte görünmezdi; gerçek fare tıklaması için yükseklik ŞART. Kabın yüksekliğine bağımlılığı kesiyoruz: `bottom:auto` + sabit yükseklik. Ölü şerit geri gelmiyor — kulp `position:absolute`, akışa katkısı yok (BKt11 = 0px korunuyor). */ .duello-v2 #chatHandle { bottom: auto; height: 110px; /* kullanıcı isteği: 180 px fazla uzundu */ } } /* ≥1800px'te iki sütun. Eşik ÖLÇÜMLE seçildi: 1400/1500/1600'de iki sütun 8 düello gösteriyor ama rozet 2 satıra çıkıp alıntı yeniden kırpılıyor (chipH 42px, 8/8 kırpık) — "karmaşık görünmesin" şartını bozuyor. 1920'de iki sütun temiz: .duel-mid 312px, rozet 18px tek satır, kırpma 0, tam görünen 8. */ @media (min-width: 1800px) { .duello-v2 #bekleyenbireyselduellolar > [id^="duel-cardn-"] { flex: 0 0 50%; max-width: 50%; } } /* 🔴 KUSUR ONARIMI (kullanıcı: "sohbeti gizleyince düello kartları 2 kolon olarak kalıyor, mesela 3 kolon olabilir"). Mevcut sütun kuralları yalnız PENCERE genişliğine bakıyor; sohbetin kapalı olduğunu bilmiyorlar. Ölçüm (sohbet gizli, 1920): #mainCol 1662 px, kart 795 px, `.duel-mid` 603 px → 3 sütunda bile ~340 px kalır. `#chatCol.chat-collapsed ~ #mainCol` deseni projenin kendi sözleşmesi (duello-cards.css:94,99,103); `#mainCol`in tam genişliğe çıkması da oradan geliyor (duello-cards.css:49-52). Özgüllük (3,3,0) hem taban kuralını hem 1800px kuralını yener, sıra bağımsız kazanır. ⚠️ Yalnız BİREYSEL kartı hedefliyor; toplu düello kartının düzeni sohbet gizlenince değişmez (bilinçli, ayrı iş). EŞİKLER ÖLÇÜMLE SEÇİLDİ. İlk denemem 3 sütunu 1600'den açıyordu ve ÖLÇÜMDE ÇAKILDI — sol site menüsü (~250 px) genişliği yediği için 1600'de gizli hâlde satır ~1340 px, kart 423 px, `.duel-mid` yalnız 231 px kalıyor: rozet 2 satıra çıkıyor (chipH 42) ve 6 kartta alıntı yeniden kırpılıyor. Ölçülen değerler (sohbet GİZLİ): 1440 → satır ~1182 · 2 sütun: kart 591, mid ~333 ✔ 1600 → satır ~1340 · 2 sütun: kart 670, mid ~412 ✔ 3 sütun: kart 423, mid 231 ✘ 1920 → satır 1662 · 3 sütun: kart 530, mid 338 ✔ */ @media (min-width: 1200px) { .duello-v2 #chatCol.chat-collapsed ~ #mainCol #bekleyenbireyselduellolar > [id^="duel-cardn-"] { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 1800px) { .duello-v2 #chatCol.chat-collapsed ~ #mainCol #bekleyenbireyselduellolar > [id^="duel-cardn-"] { flex: 0 0 33.3333%; max-width: 33.3333%; } } /* ========================================================= PANEL KUTUSU: iç boşluk + köşe yuvarlaklığı (2026-08-22) --------------------------------------------------------- KULLANICI: "aslında bunun paddinginden bahsediyorum: card card-box card-boxduel h-100" + "bu ana kartların kenarlığını biraz daha düz yapsak". Ölçüm — panel kutusunun kart çizilmeden önce yediği DİKEY yer, 415 px'lik panelin %18'i: kutu padding 20 px (duello.css:80 `.row-g6 .card-box`) başlık dış boşluğu 10 px (duello.css:291) gövde `.card-body p-1` 4 px liste `.row row-g3 p-2` 8 px Etki (padding 20 → 8, ölçüldü): görünen bireysel kart : 1920 6 → 6 · 1366 1 → 2 görünen toplu kart : 1920 1 → 1 · 1366 0 → 1 kart genişliği : 1920 498→514 · 1366 642→674 6 px'e indirmek fazladan kayda değer bir şey getirmiyor. ⚠️ `!important` ZORUNLU, üstelik İKİ ayrı rakip var: padding `duello.css:80` `.row-g6 .card-box{padding:20px!important}` (`.duellocardrow` gerçekten `row-g6` taşıyor, duellon.ejs:177), border-radius hem oradan hem `duello.css:155`ten. ⚠️ KAPSAM `.duellocardrow` ile sınırlı: `row-g6` sınıfı lider tabloları satırında da var (duellon.ejs:409) ve oradaki `.card-box`lar 20 px padding'ini KORUMALI. OK `box-shadow` 2026-08-22'de KALDIRILDI — ongorulen ayri istek geldi: "bireysel ve toplu duello ana kartlarinin arkasinda sanki bi grilik var onu kaldirir misin". Olcum: rgba(39,55,77,.10) 0 18px 40px (duello.css:80, !important) — 40 px bulaniklik kartin arkasina yayilip gri bir hale birakiyordu. Kutunun kenarligi DURUYOR (1px solid rgba(220,230,240,.95)), yani kart siniri yine belli. Gece modunda ayri golge tanimi YOK (tarandi) -> tek duzeltme ikisini kapsar. */ @media (min-width: 992px) { /* ⚠️ KİMLİK ŞART — GECEDE ÖLÇÜMLE ÇAKTI. Kontrol ajanı "gece dosyalarında .card-boxduel'e border-radius yazan kural YOK, taradım" demişti; ölçüm bunu ÇÜRÜTTÜ: gündüz 10 px, GECE 24 px çıkıyordu. Kaynağı tarayıcıya sordurunca (CDP `CSS.getMatchedStylesForNode`) çıktı: body.dark .row.small-gutter-row .card-box { border-radius: 24px !important } `.duellocardrow` gerçekten `small-gutter-row` taşıyor (duellon.ejs:177) ve o seçici (0,4,1) — sınıf tabanlı (0,3,0) formum kaybediyordu. Kimlikli form (1,3,0) ikisini de yener. DERS: "gece dosyasını grep'ledim, yok" YETMİYOR; hangi kuralın kazandığını TARAYICIYA SORDUR. */ .duello-v2 .duellocardrow .card-boxduel#bireysel-card-container, .duello-v2 .duellocardrow .card-boxduel#toplu-card-container { padding: 8px !important; border-radius: 10px !important; } /* ⚠️ ÖZGÜLLÜK TUZAĞI — GECE MODU BURADA GEOMETRİ YAZIYOR. `style_dark_mode.css:375` ve `:695` başlığa `border-radius: 18px !important` veriyor; ikincisi `body.dark .duello-page #bireysel-card-container > .card-header` = (1,2,1). Sınıf tabanlı bir seçici (0,4,0) olsa bile KİMLİK taşıyan tarafa kaybeder → gündüz 6 px, GECE 18 px kalır ve kutu 10 px + `overflow:hidden` (duello.css:155) yüzünden görünür bir ÇENTİK çıkar. Bu yüzden kimlik + üç sınıf: (1,3,1) > (1,2,1). ⚠️ Tur 2'de "gece kuralları yalnız renk yazar, geometri güvenli" demiştim — `.dchip`/`.duel-preview` için doğruydu, `.card-header` için YANLIŞ. Dokunulan HER özellik için gece dosyaları ayrıca taranmalı. */ .duello-v2 .duellocardrow .card-boxduel#bireysel-card-container > .card-header, .duello-v2 .duellocardrow .card-boxduel#toplu-card-container > .card-header { margin: 0 !important; /* rakip: duello.css:291, 10px 10px 0 */ border-radius: 6px 6px 0 0 !important; } .duello-v2 #bekleyenbireyselduellolar, .duello-v2 #bekleyentopluduellolar { padding: 4px !important; /* KART GERİLMESİ (kullanıcı, 2026-08-22): "3. kart alt satıra iniyor ama üstteki ile arasında çok boşluk var." Kaplar Bootstrap `.row` (flex + wrap) ve YÜKSEKLİKLERİ BELİRLİ (ölçüm: bireysel 317px, toplu 154px). `align-content` hiçbir kuralda ayarlanmamış → varsayılan `normal`, ki flex kapsayıcıda **stretch** demektir → sarmalanan SATIRLAR artan alanı paylaşır. ÖLÇÜM (canlı /duello, 3 kart, 1920px): normal → sarmal 149px · gerçek kart 93px · İÇ BOŞLUK 56px flex-start → sarmal 93px · gerçek kart 93px · İÇ BOŞLUK 0px Yani boşluk satır ARASINDA değil, kartların İÇİNDE. ⚠️ "/duellon'da yoktu" YANILTICI: o sayfa da aynı sınıfı ve aynı CSS'i taşıyor. Maskeleyen şey sayfa değil KART SAYISI — 8 demo kart 4 satır yapıp kabı dolduruyor, gerilecek alan kalmıyor. Kusur taşımadan ÖNCE de vardı (kap `views/duello.ejs:228` `row row-g3 h-100 p-2`, commit d99956e — v2 taşıması değil). `!important` YOK: (0,1,1) + (0,1,0) özgüllüğü Bootstrap `.row`u zaten yener. `devameden*` panelleri `display:block` → etkilenmez. */ align-content: flex-start; } } /* ========================================================= SOHBET KARTI: köşe + mesaj boşlukları (2026-08-22) --------------------------------------------------------- KULLANICI: "sohbetin kartının da borderını düzelt" + "sohbet kartlarının yukarıdan aşağı boşluğunu biraz azaltalım". Ölçüm (1920, taban): görünen mesaj **4** · ortalama mesaj yüksekliği 126 px · liste yüksekliği 758 px. Mesaj başına dikey masraf: `.chat-body` alt boşluğu 14 px + öğe padding'i 6px×2 + öğe alt boşluğu 6 px ≈ 32 px. ⚠️ ÖZGÜLLÜK — RAKİPLER CDP İLE SORDURULDU (grep DEĞİL). Bu turun kalıcı dersi: bir eleman birden çok sınıf taşır ve kural herhangi biri üzerinden gelebilir; sınıf adıyla grep yapısal olarak eksik kalır. `CSS.getMatchedStylesForNode` çıktısı: .duello-chat-card → border-radius:24px !important (0,1,0) .duello-chat-card #sohbet li → padding:6px 4px !important margin-bottom:6px !important (1,1,1) ← KİMLİK .chat-box .chat-desc ul li .chat-body → margin-bottom:14px (0,3,2) Planladığım `.duello-v2 .message-item` (0,2,0) ve `.duello-v2 .message-item .chat-body` (0,3,0) formları İKİSİ DE KAYBEDERDİ. Aşağıdaki formlar kimlik + kap zinciriyle kazanıyor. Gece modunda rakip kural YOK (CDP ile teyit edildi, aynı liste). */ @media (min-width: 992px) { .duello-v2 .duello-chat-card { border-radius: 10px !important; /* 24 → 10, panel kutularıyla aynı dil */ } /* ⚠️ İLK DENEMEMDE FAZLA KISTIM. Kullanıcı: "bu defa da tamamen silmişsin, ufak boşluk olsun altta." Değerler 3/4 px'ten 5/8 px'e çıkarıldı — taban 6/14 px'e göre hâlâ daha derli toplu ama balonlar birbirine yapışmıyor. */ .duello-v2 .duello-chat-card #sohbet li { padding: 4px !important; margin-bottom: 5px !important; } .duello-v2 .duello-chat-card #sohbet li .chat-body { /* Kullanıcı (2026-08-22): 8px -> 3px. Mesajlar arası dikey masraf azalsın, ekrana daha çok mesaj sığsın. ⚠️ `.reaction-list` bu kutunun 9px ALTINA sarkıyor (bottom:-9px, duello_mesaj_mobil.css:4978). 3px boşlukta rozet bir sonraki mesajın alanına 6px giriyor — ÖLÇÜLDÜ, çarpışma yok çünkü rozet solda (left hizalı), sonraki mesajın gövdesi aynı şeritte başlamıyor. Tepkili mesaj sayısı artarsa burayı yeniden ölç. */ margin-bottom: 3px !important; } } /* ========================================================= SOHBET MESAJI: düğmeler içeride üst sağa, saat sağ alta (2026-08-22) --------------------------------------------------------- KULLANICI: "genel sohbetteki butonların yeri hoşuma gitmiyor, çok karmaşık gösteriyor orayı" → sonra: "mesajın üst kenarına bindirelim saatin sağına, saati de sağ alt köşeye koyalım" → sonra: "hap aşağı, top 4px olsun, mesajın içinde dursun". Taban hâlde hap `bottom:-14px` ile balonun DIŞINA sarkıp mesajlar arası boşlukta duruyordu; hangi mesaja ait olduğu belirsizdi. Artık mesajın İÇİNDE, SAĞ ALTTA (`bottom:4px`) — dışarı sarkmıyor. ⚠️ Bir ara saat sağ alta indirilip hap üste alınmıştı; kullanıcı "saat üstte, o butonlar altta olsun" deyince geri çevrildi. Saat artık kendi doğal yerinde (akışta, üst sağda) — üzerine kural yok. Ölçüm (görünür mesajlarda): hap üst kenara biniyor mu : 0 (mesajın içinde) saat balondan taşıyor mu : 0 hap-saat çakışması : 0 ⚠️ "saat metinle çakışıyor" ölçümü YANLIŞ ALARM: `.message-text` blok eleman, tam genişlik kaplıyor, sağdaki boş alan da kutusuna dahil. Ekran görüntüsüyle doğrulandı — metin solda, saat sağ altta. ⚠️ ÜSTÜNE-GELİNCE-GÖSTER DENENDİ VE KULLANICI İSTEMEDİ. Ölçülmüştü: gizleme ekrandaki görünür etkileşimli öğeyi 61 → 34'e indiriyordu (%44). Kullanıcı sürekli görünürü seçti. Geri açan olursa üç dallı koşul ŞART: `:hover`, `:focus-within` VE `:has(.reaction-wrapper.open)` — emoji seçici hapın İÇİNDE (duello_mesaj_mobil.css:4920) ve ebeveyn opaklığı çocuğunkini ezip açık seçiciyi söndürüyor. ⚠️ YALNIZ >=992px: kullanıcının önceliği masaüstü; mobil yerleşim /duello ile birebir kalsın. */ @media (min-width: 992px) { /* Kullanıcı: "bu butonları saran gölgeyi ve border'ı kaldırsak". Taban hâl (duello_mesaj_mobil.css:4870) hapa kenarlık + gölge + beyaz zemin veriyordu; mesajın içine alınınca o çerçeve gereksiz ve gürültülü kalıyordu. İkonlar artık zeminsiz duruyor. Zemin de kaldırıldı. Gerekçe ÖLÇÜMLE bulundu: GECE : hapın zemini ZATEN `rgba(0,0,0,0)` — bir gece kuralı onu çoktan kaldırmış; arkasında `rgba(255,255,255,.08)` GÜNDÜZ: hap `rgb(255,255,255)`, arkasındaki gerçek zemin `rgb(248,251,253)` (maviye çalan beyaz) → hap, balonun üzerinde biraz daha beyaz bir YAMA olarak duruyordu Kaldırınca yama gidiyor ve gündüz ile gece AYNI davranıyor. */ .duello-v2 .duello-chat-card #sohbet li .message-actions { top: auto; bottom: 4px; right: 10px; border: 0; box-shadow: none; background: transparent; /* Kullanıcı: "reply butonunu en sağa alsak, emoji butonunu ortaya alıp ünlem butonunu sola koysak". İstenen dizilim, şablondaki sıranın (reply · react · bildir — duelloapp.js:2229-2236) tam TERSİ; `row-reverse` tek satırda veriyor. ⚠️ `duelloapp.js`e DOKUNULMADI: o dosyayı /duello da yüklüyor, şablondaki sırayı değiştirmek oraya da sızardı. */ flex-direction: row-reverse; } /* --------------------------------------------------------- BEĞENİ ROZETİ ÇAKIŞMASI (kullanıcı, 2026-08-22): "bir mesajı beğendiğimizde mesajın altına emoji ekleniyor. bu emoji mesajın üstüne geliyor sanırım mesaj kutusuna padding vermek lazım" ÖLÇÜM (Range ile son satır alt kenarı; blok kutusu DEĞİL — o yöntem bu dosyada iki kez yanlış alarm üretti, bkz. :598-603): rozet üst kenarı − metin son satır alt kenarı = -8 / -8 / -7 px Yani rozet metnin son satırını 7-8px örtüyordu. KÖKENİ KISMEN BU DOSYA: `.reaction-list` global olarak `position:absolute; bottom:-9px` (duello_mesaj_mobil.css:4978) ve 24px yüksekliğinde — yani doğası gereği sarkıyor. Yukarıdaki `.message-text{margin-bottom:0}` (:613) o sarkmayı yutan 5px'i kaldırdı ve çakışmayı büyüttü. `margin-bottom:0` GERİ ALINMIYOR: kullanıcı o hizalamayı özellikle istedi ve onayladı. ⚠️ İKİ KURAL ŞART, biri tek başına REGRESYON yaratır. `.reaction-list` VE `.message-actions` aynı `.chat-body`ye çıpalı (o `position:relative` — duello_mesaj_mobil.css:3956). Balonun padding'ini büyütmek `.chat-body`yi de büyütür ve düğmeleri de 9px (13−4) aşağı sürükler → kullanıcının "heh şimdi oldu" dediği "düğme alt kenarı = metin son satır alt kenarı + 3px" hizası YALNIZ tepkili mesajlarda bozulurdu. İkinci kural bunu telafi eder: bottom 4 → 13 (= 4 + dolgu artışı 9) ⇒ düğme mutlak konumu SABİT. KURAL: telafi değeri dolguya EŞİT olmalı. Özne `:has(.reaction-list > *)` — `:not(:empty)` DEĞİL: sayfada 95 BOŞ + 4 dolu `.reaction-list` var ve boş olanlar dolgu ALMAMALI, yoksa kullanıcının istediği sıkı hizalama tüm mesajlarda bozulur. `renderReactions` (duelloapp.js:2833) yalnız appendChild ediyor, metin düğümü üretmiyor; ama `:empty` ileride eklenecek tek boşlukta sessizce bozulur, `> *` bozulmaz. KAPSAM DIŞI (mevcut kusur): <992px'te ölçtüm, çakışma YOK (rozet boşluğu +4/+3px) — çünkü çakışmayı büyüten `margin-bottom:0` da yalnız bu medya bloğunda. Rozetin balon altından 9px sarkması ayrı bir konu, dokunulmadı (global kural, özel sohbeti de etkiler). */ .duello-v2 .duello-chat-card #sohbet li .chat-body:has(.reaction-list > *) .mesaj-alani { /* 20px ölçüldü -> rozet ile metin arası 8px boşluk. Kullanıcı: "boşluk çok olmuş azcık azaltır mısın" -> 16px = 4-5px boşluk. Kullanıcı tekrar: "biraz daha yakınlaştırır mısın" -> 13px = 1-2px. ⚠️ TABAN — ÖLÇÜLMÜŞ FORMÜL: `boşluk = dolgu − 12`. Dört veri noktası: 20→+8, 16→+4/+5, 13→+1/+2 (ve taban 4→−8). Yani 12px'te rozet metne DEĞER, altında çakışır. (Efektif ofset 12; rozetin ham yüksekliği 24 ve `bottom:-9px` üzerinden 15 diye HESAPLAMA yapma — ölçüm 12 diyor, aradaki fark satır kutusu/`line-height` payından geliyor.) Daha fazla yaklaştırma isteği gelirse dolguyu 12'nin altına indirme; bunun yerine rozetin `bottom` değerini `.duello-v2 .duello-chat-card #sohbet li .reaction-list` ile KAPSAMLI olarak ez — global kurala (duello_mesaj_mobil.css:4978, özel sohbeti de etkiler) dokunmadan. AÇIK SORU (ölçülmedi): 6 farklı tepki alan mesajda `.reaction-list` `flex-wrap` ile ikinci satıra sararsa liste yukarı büyür ve 1-2px payı yer. */ padding-bottom: 13px; } .duello-v2 .duello-chat-card #sohbet li .chat-body:has(.reaction-list > *) .message-actions { /* Telafi: bu değer dolguya EŞİT olmalı (4 + dolgu artışı = dolgu). Düğmenin MUTLAK konumu sabit kalır, "düğme alt = metin son satır alt + 3px" hizası korunur. Dolguyu değiştirirsen BURAYI da. */ bottom: 13px; } /* Metin daraltılıp düğmeler ONUN SAĞINA alındı. Kullanıcı: "böyle de çok boşluk kaldı butonların solunda, acaba mesaj içeriğinin sağına koyup mesaj içeriğini mi daraltsak". Önceki hâlde düğmeler kendi şeridinde duruyordu (alt boşluk 34px) ve solları boş kalıyordu. Şimdi metin sağdan 95px daralıyor, düğmeler o boşluğa oturuyor; ayrı şerit gerekmediği için alt boşluk 4px'e indi. Ölçüm (görünür mesajlar): ortalama mesaj yüksekliği : 119 px → **95 px** (mesaj başına −24) metin/düğme çakışması : 0 hap balondan taşan : 0 ⚠️ Çakışma ölçümü SON SATIRIN gerçek kutusuyla yapıldı, metin bloğunun kutusuyla DEĞİL: blok tam genişlik kapladığı için sağdaki boşluğu da kendine dahil sayıyor ve YANLIŞ ALARM üretiyor (bu turda iki kez yanılttı). */ .duello-v2 .duello-chat-card #sohbet li .mesaj-alani { padding-bottom: 4px; } /* ⚠️ Sağ boşluk `.mesaj-alani`ya DEĞİL, yalnız METNE veriliyor. İlk denemede `.mesaj-alani`ya vermiştim; içindeki `.message-header` (ad + rütbe + SAAT) de daraldı ve SAAT SOLA KAYDI. Kullanıcı fark etti: "saat de kaydı, butonların üst hizasında yani sağ üstte olması lazım". Düğmeler metnin yanında duruyor; boşluğa ihtiyacı olan metin, başlık değil. */ .duello-v2 .duello-chat-card #sohbet li .message-text { padding-right: 95px; /* Kullanıcı: "message-text'in altında da margin var, onu da sil, butonlarla aynı hizada olsun." CDP ile kazanan kural sorduruldu: `.message-text{margin-bottom:5px}` (0,1,0, !important YOK) → `.duello-v2 … .message-text` (1,3,0) rahatça yeniyor. */ margin-bottom: 0; } } /* ========================================================= DÜELLO KARTLARI: bireysel ad genişliği + toplu kartı bireysele benzetme (2026-08-22) --------------------------------------------------------- KULLANICI: "bireysel düelloda username kısmı çok dar, genişlet. toplu düello kartlarında da bu mantıkta yap: metin grubu / metin yazısı / chipler bireyseldeki gibi olsun, katıl butonunun içi beyaz olsun. toplu düelloda başlık çok dar, okunmuyor." ÖLÇÜM (1920, demo veri) — iki kartın farkı: BİREYSEL (514px) TOPLU (1064px) ad / başlık 70px · 13.12px 166px · 18.4px · KIRPIK rozet 103px · 11.84px 228px · 16px rozet padding 2px 7px 6px 10px rozet sayısı 3 8 Katıl yazısı beyaz rgb(38,59,79) (koyu) ⚠️ YAPISAL FARK: toplu kartta "metin grubu" ve "metin yazısı" AYRI SATIR DEĞİL, birer `.dchip` (duelloapp.js:1792-1797). Bireyselde `.duel-meta` ve `.duel-preview` düz satırlar. `duelloapp.js` PAYLAŞILAN, işaretleme değiştirilemez ⇒ o iki rozetin HAP KILIĞI (zemin/kenarlık/padding) CSS ile kaldırılıp bireysel tipografisine çekiliyor. Yalnız küçültmek yetmezdi: "hap içinde italik yazı" bireyseldeki görünüm değil. ⚠️ RENK YAZAN KURALLAR `!important` ALMAK ZORUNDA: gece kuralları (duello-cards.css:1976-1983 `body.dark .duello-page .dchip`) background, color ve border'ı `!important` ile alıyor; `!important`siz kural gecede SESSİZCE ölür. Kapsam `.duel-list-card` — bireysel kartın rozetlerine sızmamalı. ========================================================= */ @media (min-width: 992px) { /* 1) Bireysel: kullanıcı adı alanı genişlesin (78 → 104px). ⚠️ Değer ÖLÇÜMLE seçildi: `.duel-mid` daraldıkça rozetler 2 satıra çıkıyor. Eşik: rozet yığını tek satır (≈18px) ve alıntı kırpması 0. */ /* ⚠️ 104px MİSAFİR ADLARINA YETMİYORDU. Kullanıcı bildirdi: "Misafir-843692.. diye gidiyor". Misafir adları en uzun durum (`Misafir-` + 6 hane = 14 karakter) ve ölçümde 104px gerekiyor, kutuda 96px vardı → kırpılıyordu. 124px seçildi, BEDELİ ÖLÇÜLDÜ ve SIFIR çıktı: orta sütun 326 → 306 px · rozetler HÂLÂ tek satır (19px) kart yüksekliği 93 → 93 · görünen düello 6 → 6 ⚠️ Adı iki satıra sarmak DENENDİ ve REDDEDİLDİ: kırpma bitiyor ama kart 93 → 106px büyüyor ve görünen düello 6 → 4'e düşüyor. */ .duello-v2 .duel-card-grid .duel-left { width: 124px; flex: 0 0 124px; } /* 2) Toplu: başlık okunabilsin. Sütun genişliği rozet alanından alınıyor; `.tduelloTitle` puntosu da düşüyor (taban 1.15rem !important — duello-cards.css:752-761 — bu yüzden !important şart). */ .duello-v2 .js-toplu-card .row > .col-3:first-child { flex: 0 0 33% !important; max-width: 33% !important; } .duello-v2 .js-toplu-card .row > .col-6 { flex: 0 0 46% !important; max-width: 46% !important; } /* 🔴 ÜÇÜNCÜ SÜTUN DA DARALTILMALI. İlk denememde başlık (33%) ve rozet (46%) sütunlarını genişletip düğme sütununu 25%'te bıraktım: 33+46+25 = **%104** → satır taştı ve KATIL DÜĞMESİ ALT SATIRA DÜŞTÜ. Kullanıcı fark etti. 21% ile toplam %100. */ .duello-v2 .js-toplu-card .row > .col-3:last-child { flex: 0 0 21% !important; max-width: 21% !important; } /* "Toplu" rozeti gereksiz — kart zaten Toplu Düellolar panelinde. Kullanıcı: "bir tane chip var toplu yazıyor, o çipe gerek yok." Toplu kartta `fa-bolt` ikonu TEKİL (ölçüldü: 8 rozetin yalnız birinde), bu yüzden güvenle hedeflenebiliyor. */ .duello-v2 .duel-list-card .dchip:has(.fa-bolt) { display: none !important; } .duello-v2 .js-toplu-card .tduelloTitle { font-size: .95rem !important; } /* 3) Toplu rozetler bireysel ölçüsüne insin. */ .duello-v2 .duel-list-card .dchip { font-size: .8rem !important; padding: 2px 7px !important; } /* 4) Metin grubu ve alıntı: HAP KILIĞI kalksın, bireysel tipografisi. İkisi ikon sınıfından ayırt ediliyor; `:has()` bu sayfada zaten üretimde (duello.css:159). */ .duello-v2 .duel-list-card .dchip:has(.fa-folder-open-o), .duello-v2 .duel-list-card .dchip:has(.fa-file-text-o) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } .duello-v2 .duel-list-card .dchip:has(.fa-folder-open-o) { font-size: .82rem !important; /* bireysel .duel-meta ile ayni */ font-weight: 700 !important; } .duello-v2 .duel-list-card .dchip:has(.fa-file-text-o) { /* Bireysel .duel-preview .82rem'e cikti (kontrast duzeltmesi 2026-08-23); bu kural "onunla ayni" diyor, birlikte tasiniyor. */ font-size: .82rem !important; /* bireysel .duel-preview ile ayni */ font-style: italic !important; } /* 7) Toplu kartın ORTA sütunu: 1. satır metin grubu + metin, 2. satır rozetler. Kullanıcı: "üst satırda metin grubu yanında metin, altında da çipler. bu bilgiler bana lazım" (yani hiçbiri silinmiyor). Kap `flex-wrap: wrap` (duello-cards.css:356). Sarma kararı TABAN genişliklere göre veriliyor, `flex-grow`a göre değil — bu yüzden metin rozetine büyük bir `flex-basis` veriliyor ki ilk satırda yalnız o ikisi kalsın, kalan rozetler alta sarksın. */ /* ⚠️ ESNETME YOK — bu iki rozet İÇERİK BOYUTUNDA kalmalı. Önce metin rozetine `flex: 1 1 58%` vermiştim (sarmayı zorlamak için). Kullanıcı sonucu gördü: "Sürpriz metin sola yaslanmış, Yarışma başlayınca göreceksiniz yazısı sağa yaslanmış, bunların ortada birleşmesi lazım." ÖLÇÜM kök nedeni verdi: `flex-grow` boştaki tüm alanı yutuyordu — "AKŞAM TURNUVASI 3" kartında grup 65px iken metin rozeti 365px'e uzuyor, ikisi zıt kenarlara itiliyordu. Esnetme kalkınca metin rozeti 201px'e (kendi içeriğine) iniyor ve kabın `justify-content: center`i ikisini ORTADA birleştiriyor. Sarma yine bozulmuyor: rozetler küçüldüğü için grup+metin ilk satıra sığıyor, üçüncü rozet doğal olarak alta geçiyor (ölçüldü: 2 satır). `max-width` uzun metin grubu adlarının satırı tek başına yutmasına karşı emniyet. */ /* 🔴 GARANTİLİ SATIR SONU. Esnetmeyi kaldırınca ilk satırda yer kaldı ve kısa başlıklı kartlarda rozet oraya sığdı — kullanıcı yakaladı: "AKŞAM TURNUVASI 3 bozuldu, Performans çipi üst satıra geldi, çipler her zaman alt satırda kalmalı." İçerik genişliğine bağlı sarma bunu garanti edemez ("Sürpriz" 65px, "Zabıt Katipliği Metinleri" 167px). Çözüm: kabın kendi `::before` sözde-öğesi bir FLEX ÖĞESİDİR; `flex-basis:100%` ile tam satır kaplayıp AYRAÇ görevi görüyor. `order` ile iki metin rozeti onun ÖNÜNE (-1), kalan rozetler ARKASINA (1) alınıyor. Ölçüldü: üç kartta da 2 satır, iki satır da tam ortalı (sapma 0). */ .duello-v2 .duel-list-card .col-6 { align-content: flex-start !important; } .duello-v2 .duel-list-card .col-6::before { content: ""; flex: 0 0 100%; height: 0; order: 0; } .duello-v2 .duel-list-card .dchip { order: 1; } .duello-v2 .duel-list-card .dchip:has(.fa-folder-open-o), .duello-v2 .duel-list-card .dchip:has(.fa-file-text-o) { order: -1; flex: 0 0 auto !important; max-width: 46% !important; /* Kullanıcı: "sağdaki metin eğer sığmıyorsa truncate edebiliriz, metnin başı görünsün yeter." `.dchip` taban hâlde `display:inline-flex`; flex kabında metin anonim bir flex öğesi olduğu için `text-overflow: ellipsis` UYGULANMIYOR — metin sert kesiliyordu. `display:block` ile metin normal satır içi akışa dönüyor ve gerçek "…" çıkıyor. `text-align:left` KUTU hizasını değil, kutunun İÇİNDEKİ yazıyı sola yaslıyor; kutular kabın `justify-content:center`i ile ortada birleşmeye devam ediyor. İkisi birlikte kullanıcının istediği: kutular ortada, yazı baştan başlıyor. */ display: block !important; text-align: left !important; text-overflow: ellipsis !important; overflow: hidden !important; white-space: nowrap !important; } /* 8) Toplu düello başlığı mavi duruyordu (duello-cards.css:756 `color:#4c63ff !important`). Nötr koyu tona alındı; punto zaten düşürülmüştü. ⚠️ GECE MODU KENDİ RENGİNİ KORUYOR: `body.dark .duello-page .tduelloTitle` (0,3,1) benim kuralımdan (0,3,0) daha spesifik, yani gecede o kazanmaya devam ediyor. Bilerek böyle — gece kontrastına dokunmuyorum. */ .duello-v2 .js-toplu-card .tduelloTitle { color: #21384d !important; font-weight: 700 !important; } /* 9b) Toplu kartta KURUCU ADI 20px ve kalındı — yani BAŞLIKTAN BÜYÜK (başlık 15.2px). Bilgi hiyerarşisi tersine dönmüştü: göz önce kullanıcı adına gidiyordu, düellonun adına değil. Şablonda `text-black font-weight-bold fs-4` yardımcı sınıfları var (duelloapp.js), o yüzden `!important` gerekiyor. */ .duello-v2 .js-toplu-card .min-w-0 > .fs-4 { font-size: .82rem !important; font-weight: 600 !important; } /* 9) Kullanıcı adı çok kalındı (taban `font-weight:700`, duello-cards.css:696). Kullanıcı: "çok göz yormasın." */ .duello-v2 .duel-card-grid .duel-name { font-weight: 600; font-size: .85rem; /* bkz. yukarıdaki punto notu */ } /* 6) Katıl düğmeleri: ikon YAZININ ALTINA, düğme kareye yakın. Kullanıcı: "katıl butonlarının ikonlarını altına alabilir misin, buton biraz kare olsa daha hoş olacak gibi." Hem bireysel hem toplu kart. İkon şablonda yazıdan SONRA geliyor (duelloapp.js:1346 / :1738), yani `column` yönünde doğal olarak alta düşüyor — sıra değiştirmeye gerek yok. */ .duello-v2 .duel-card-grid .duel-right .btn, .duello-v2 .duel-list-card .btn-primary, .duello-v2 .duel-list-card .btn-success { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px; line-height: 1.1; padding: .45rem .8rem !important; } /* İkonun satır içi boşluğu dikey dizilimde sola kayma yapıyor. */ .duello-v2 .duel-card-grid .duel-right .btn i, .duello-v2 .duel-list-card .btn-primary i, .duello-v2 .duel-list-card .btn-success i { margin: 0 !important; } /* 5) Toplu Katıl düğmesinin yazısı beyaz (bireyseldeki gibi). Ölçüm: toplu'da rgb(38,59,79) / mor zemin ≈ 3:1 kontrast (WCAG AA altı); beyaz ≈ 4,5:1. Hem istenen hem doğru olan. */ .duello-v2 .duel-list-card .btn-primary, .duello-v2 .duel-list-card .btn-primary * { color: #fff !important; } } /* --- C) Demo modu işareti -------------------------------------- /duellon linksiz ama HERKESE AÇIK (server.js:1785 noindex). Demo kartın gerçek sanılması hem ziyaretçiyi hem tasarım kararını yanıltır. Yeni sınıf olduğu için gece modunda rakip kural yok; yine de renk vermiyoruz, yalnızca içerik+geometri. */ .duello-v2 .demo-kart { position: relative; } .duello-v2 .demo-kart::after { content: "DEMO"; position: absolute; top: 3px; right: 6px; font-size: .58rem; font-weight: 700; letter-spacing: .08em; opacity: .45; pointer-events: none; z-index: 2; } /* ========================================================================= KART ARKASINDAKİ GRİ HALE KALDIRILDI (kullanıcı, 2026-08-22) ------------------------------------------------------------------------- "bireysel ve toplu düello ana kartlarının arkasında sanki bi grilik var onu kaldırır mısın" → sonra: "evet o gölge toplistte de var sanki olmaması lazım" ÖLÇÜM (tarayıcıya `CSS.getMatchedStylesForNode` ile soruldu — grep yetmedi, gece kuralını bulamamıştı): gündüz duello.css:80 `.row-g6 .card-box` 0 18px 40px rgba(39,55,77,.10) !important gündüz duello.css:155 `.card-boxduel, .duello-toplist-card…` aynı gölge GECE duello-cards.css:1931 `body.dark .duello-page #bireysel-card-container` 0 18px 38px rgba(0,0,0,.30) !important GECE `body.dark .row.small-gutter-row .card-box` 0 18px 42px rgba(0,0,0,.34) !important 40 px bulanıklık kartın arkasına yayılıp gri bir hale bırakıyordu. ⚠️ ÖNEKSİZ YAZILDI — dosyanın `.duello-v2` kuralına BİLEREK istisna. Gerekçe: toplist kartları (`Günün En İyileri`, `Haftanın En İyileri`, `Top 10 Listesi`) `.duello-v2` KAPSAMININ DIŞINDA (ölçüldü: `closest('.duello-v2')` → false). Önek kullanılamıyor. GÜVENLİ, çünkü bu dosyayı YALNIZ `duello.ejs` ve `duellon.ejs` yüklüyor → öneksiz kural da yalnız o iki sayfayı etkiler. ⚠️ MEDYA SORGUSU DIŞINDA — gri hale mobilde de aynı derecede yanlış. ⚠️ `!important` ZORUNLU: dört rakibin dördü de `!important`. ⚠️ `:not(.footer-wrap)` — sayfa altındaki footer kutusu da `.card-box` taşıyor, ona DOKUNULMUYOR (kullanıcı onu bildirmedi). Kartların KENARLIĞI duruyor (`1px solid`), sınır yine belli. */ .duello-v2 .duellocardrow .card-boxduel, .duello-v2 #bireysel-card-container, .duello-v2 #toplu-card-container, .card-box.pd-20:not(.footer-wrap) { box-shadow: none !important; } /* Gece rakibi: `body.dark .duello-page #bireysel-card-container` = (1,2,1). ⚠️ İLK DENEMEM `body.dark .duello-v2 #…` idi = AYNI (1,2,1) → BERABERE kaldı ve rakip sonra geldiği için KAZANDI. `duello.ejs`te duello-v2.css daha sonra yüklense de (satır 14 vs 12) tarayıcıya `CSS.getMatchedStyles` ile sorunca rakip kuralın sonda olduğu görüldü — dosya sırasına GÜVENME. Çözüm: `.duello-page.duello-v2` (ikisi de AYNI öğede, duello.ejs:18) ile ağırlığı (1,3,1)'e çıkarmak. Artık sıradan bağımsız kazanıyor. */ body.dark .duello-page.duello-v2 #bireysel-card-container, body.dark .duello-page.duello-v2 #toplu-card-container, body.dark .duello-page.duello-v2 .duellocardrow .card-boxduel, body.dark .card-box.pd-20:not(.footer-wrap) { box-shadow: none !important; } /* ========================================================================= GECE MODU: SOHBET BALONU KENARLIĞI (kullanıcı, 2026-08-22) ------------------------------------------------------------------------- "gece modunda sohbet kutucuklarında da border felan var olmamış gibi" ÖLÇÜM: gecede balonun ZEMİNİ koyulaşıyor (`linear-gradient(rgb(27,45,54), …)`) ama KENARLIĞI gündüzden kalıyor: `1px solid rgb(219,226,238)` — açık gri-mavi. Koyu zeminde bu, balonu beyazımsı bir çerçeveyle kutuluyor; ekran görüntüsüyle doğrulandı, gerçekten "yarım kalmış" duruyor. Kenarlık KALDIRILMIYOR, koyu tona çekiliyor: balon ile sohbet panelinin zemini birbirine yakın; kenarlık tamamen kalkarsa balon sınırı kayboluyor. Seçilen ton zeminden bir tık açık, göze çarpmayan bir ayrım. ⚠️ `!important` ve `body.dark` + `.duello-page.duello-v2` ile yazıldı: bu dosyada gölge işinde ölçüldü ki gece kuralları kimlik/çoklu sınıf taşıyor ve DOSYA SIRASINA GÜVENİLEMİYOR. */ body.dark .duello-page.duello-v2 .duello-chat-card #sohbet li .mesaj-alani { border-color: rgba(120, 152, 172, .20) !important; } /* ========================================================================= DÜELLO KARTI ZEMİN RENGİ (kullanıcı, 2026-08-23) ------------------------------------------------------------------------- "vip üye bireysel/toplu düello açtığında profilinden hangi rengi seçtiyse o renkte düello kartı… eğer yetkili ise yetki grubunun rengine göre" → sonra: "herhangi bir yetki grubuna (seviyeye bakılmaksızın) bağlı ise sohbette ve düello kartlarında o yetki grubunun rengi olmalı" Renk `--kart-bg` / `--kart-bg-gece` / `--kart-border` değişkenleriyle KART SARMALINA basılıyor (duelloapp.js `kartaRenkUygula`); buradaki kurallar onu içerideki gerçek karta uyguluyor. ⚠️ GECEDE AYRI ALFA: gündüz %12 koyu zeminde neredeyse görünmez. Gece %22 ile başlandı; ölçümle ayarlanacak. ⚠️ `!important` ve `.duello-page.duello-v2` ŞART: gece tabanı `duello-cards.css:1946` `body.dark .duello-page .duel-card-grid{…!important}` ve o kural (1,2,1); bu dosyada gölge işinde ölçüldü ki DOSYA SIRASINA GÜVENİLMEZ, ağırlık baştan yüksek yazılır. */ .duello-v2 .duel-card-renkli .duel-card-grid, .duello-v2 .duel-card-renkli .duel-list-card { background: var(--kart-bg) !important; border-color: var(--kart-border) !important; } body.dark .duello-page.duello-v2 .duel-card-renkli .duel-card-grid, body.dark .duello-page.duello-v2 .duel-card-renkli .duel-list-card { background: var(--kart-bg-gece) !important; border-color: var(--kart-border) !important; } /* ========================================================= KISA EKRAN (<=550px yükseklik) — AKTİF BÖLÜM SATIRI DOLDURSUN 2026-08-23 · kullanıcı şikâyeti 1067x493 `duello-cards.css:1585` aktif pane'e `height:100%!important` yazıyor ama KAYBEDİYOR: özgüllüğü (0,5,0), yukarıdaki `#tab-bireysel`/`#tab-toplu` kuralları ise KİMLİK taşıdığı için (1,3,0). Ölçüm: satır 328px iken pane tam 164px = %50. Sekme modunda tek bölüm görünürken satırın yarısını boş bırakmak, listeyi 80px'lik bir pencereye sıkıştırıyordu (311px içerik). ⚠️ Bu kural DOSYANIN SONUNDA durmalı: bu dosyada yedi ayrı `min-width:992px` bloğu var ve (1,3,0) eşitliğinde kararı KAYNAK SIRASI veriyor. Araya taşınırsa sessizce etkisizleşir. ⚠️ `:not(.bir-bolum-kapali)` korunuyor — katla/aç yolu (duelloapp.js:3280, duello-cards.css:2148+) bu sınıfla çalışıyor, düşürülürse katlama ölür. ========================================================= */ @media (min-width: 992px) and (max-height: 550px) { .duello-v2 .duellocardrow:not(.bir-bolum-kapali) > #tab-bireysel, .duello-v2 .duellocardrow:not(.bir-bolum-kapali) > #tab-toplu { height: 100% !important; } }