/* ============================================================ HYPNOSHUB — Clash Royale Analiz Platformu Shared stylesheet. Clean white base, blue + gold accents. Light/Dark theme via [data-theme] on . ============================================================ */ :root { /* Accent (blue) — used sparingly on a neutral base */ --blue-900: #1f2937; /* dark charcoal for footer / dark strips (neutral, not navy) */ --blue-700: #1d4ed8; --blue-600: #2563eb; --blue-500: #3b82f6; --blue-100: #eaf1fe; /* Muted amber — only for trophies / #1 medal, never as a theme color */ --gold-600: #9a7b2e; --gold-500: #c99a3a; --gold-400: #e2c079; --gold-100: #f4eede; --green-600: #12885a; --green-500: #1ea567; --green-400: #4cc487; /* Surfaces (açık / nötr) Eskiden zemin #f6f8fb, kart yüzeyi ise saf #ffffff idi. Sayfanın çoğunu kartlar kapladığı için ekran neredeyse bembeyaz oluyordu: hem göz alıyor, hem de yüzey/zemin farkı 2-3 birime düştüğü için kartların kenarı seçilmiyordu. Artık hiçbir yüzey saf beyaz değil ve basamaklar arasında görünür fark var. */ --bg: #e9edf3; /* sayfa zemini — en koyu basamak */ --bg-soft: #e1e7ef; --surface: #f8fafc; /* kart yüzeyi — beyaza yakın ama beyaz değil */ --surface-2: #edf1f6; /* girdi/ikincil yüzey */ --border: #d4dbe5; --border-strong: #bcc6d4; --text: #1b232e; --text-soft: #505a68; --text-muted: #7d8695; --link: var(--blue-600); --shadow: 0 8px 28px rgba(30, 40, 60, 0.07); --shadow-sm: 0 2px 10px rgba(30, 40, 60, 0.05); --radius: 16px; --radius-sm: 10px; /* Content column. 1180px left ~340px of dead margin on each side of a 1861px viewport, which read as the page sitting off to one side; 1360 uses the width without letting text lines get uncomfortably long. */ --maxw: 1360px; /* Rarity */ --r-common: #9aa7bd; --r-rare: #c99a3a; --r-epic: #9a6fe0; --r-legendary: linear-gradient(135deg,#8be9ff,#c58bff,#ffb0e6); --r-champion: #d9a441; } [data-theme="dark"] { --bg: #0f141c; --bg-soft: #131a24; --surface: #171e28; --surface-2: #1c2530; --border: #2a333f; --border-strong: #384250; --text: #e9edf3; --text-soft: #aab3c0; --text-muted: #7a838f; --link: #6ea0ff; --blue-100: #1a2740; --gold-100: #241f12; --shadow: 0 10px 34px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } /* `hidden` niteliği HER ZAMAN gizlesin. Tarayıcı bunu kendi stil dosyasındaki [hidden]{display:none} ile yapar, ama yazar kuralları tarayıcınınkini her koşulda ezer. Yani .collection gibi `display:grid` verilmiş bir öğeye hidden koymak hiçbir işe yaramıyordu: nitelik duruyor, öğe ekranda kalıyordu (ölçüldü — kart koleksiyonu hidden olmasına rağmen 2810 piksel yer kaplıyordu). Bu satır, hidden kullanan her yeri de baştan güvenceye alıyor. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background .3s ease, color .3s ease; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .section { padding: 46px 0; } .section-tight { padding: 28px 0; } h1,h2,h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; } .eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 800; color: var(--gold-600); } .section-title { font-size: 1.5rem; font-weight: 900; } .section-title .accent { color: var(--blue-600); } .muted { color: var(--text-muted); } .soft { color: var(--text-soft); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-weight: 800; padding: 11px 18px; border-radius: 12px; font-size: .92rem; transition: transform .12s ease, box-shadow .2s ease, background .2s; font-family: inherit; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn-primary { background: var(--blue-600); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.25); } .btn-primary:hover { background: var(--blue-700); } .btn-gold { background: var(--surface); color: var(--blue-700); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); } .btn-gold:hover { border-color: var(--blue-500); } .btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn-lg { padding: 16px 26px; font-size: 1.05rem; border-radius: 14px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; /* Aradaki boşluk 20px'ken menü satırı 1360px'e sığmıyordu ve EĞLENCE kırpılıyordu. Boşluğu kısmak 24px kazandırdı. */ display: flex; align-items: center; gap: 12px; } .brand { display: flex; align-items: center; gap: 11px; } .brand-logo { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; overflow: hidden; } .brand-logo img { width: 100%; height: 100%; object-fit: contain; } .brand-logo svg { width: 28px; height: 28px; } @media (max-width: 620px){ .brand-logo { width: 38px; height: 38px; } } .brand-text { line-height: 1; } .brand-name { font-size: 1.32rem; font-weight: 900; letter-spacing: .02em; white-space: nowrap; } /* HYPNOS = white (outlined so it stays readable on light header), COUT = blue */ .brand-name .w { color: #ffffff; -webkit-text-stroke: 0.8px #22304a; text-stroke: 0.8px #22304a; text-shadow: 0 1px 1px rgba(0,0,0,.18); } .brand-name .b { color: var(--blue-600); } [data-theme="dark"] .brand-name .w { -webkit-text-stroke: 0.6px rgba(0,0,0,.4); } /* On dark footer the white needs no strong outline */ .site-footer .brand-name .w { -webkit-text-stroke: 0; text-shadow: none; } .brand-sub { font-size: .58rem; font-weight: 800; letter-spacing: .18em; color: var(--text-muted); text-transform: uppercase; margin-top: 3px; } .brand:hover { text-decoration: none; } .main-nav { display: flex; gap: 2px; margin-left: 4px; } .main-nav a { padding: 9px 10px; border-radius: 10px; color: var(--text-soft); font-weight: 800; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; /* Two-word labels ("ANA SAYFA", "SON MAÇLAR") were breaking onto a second line and making the header look ragged. */ white-space: nowrap; } .main-nav a:hover { background: var(--blue-100); color: var(--blue-700); text-decoration: none; } .main-nav a.active { color: var(--blue-700); background: var(--blue-100); } /* Eğlence opens a submenu instead of spilling each game into the top bar. The wrapper keeps no gap between the link and the panel, so the pointer can travel from one to the other without the menu closing under it. */ .nav-item.has-sub { position: relative; display: inline-flex; } .nav-sub { display: none; position: absolute; top: 100%; left: 0; z-index: 70; min-width: 232px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,30,60,.20); padding: 6px; margin-top: 6px; } /* An invisible bridge across the 6px gap. */ .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } .nav-item.has-sub:hover .nav-sub, .nav-item.has-sub:focus-within .nav-sub { display: block; } .main-nav .nav-sub a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 700; white-space: nowrap; } .nav-sub .ns-ic { font-size: 1rem; width: 20px; text-align: center; } /* The header is a single non-wrapping row, so everything in it has to be allowed to shrink — otherwise the last item (the account button) is pushed past the right edge and clipped. The search box gives up width first. */ /* `flex-wrap: wrap` bir kırılma noktasına bağlı DEĞİL: arama kutusuna 240 piksellik bir taban verildiği için, satıra sığmadığı anda kutu kendiliğinden alt satıra iniyor. Eskiden tek satıra zorlanıyordu ve sığmayınca kutunun çocukları (metin alanı, büyüteç) dışarı taşıp yandaki düğmelerin üstüne biniyordu — 768 pikselde ölçüldü. */ .header-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; row-gap: 8px; } .header-tools .search-box { flex: 1 1 240px; min-width: 0; max-width: 380px; } /* Yazı alanının genişliği `width` ile veriliyor, `min-width` ile DEĞİL. Fark önemli: boş bir metin kutusunun doğal genişliği sıfıra yakındır, o yüzden başlık ona hiç yer ayırmıyordu (ölçtük: 94 piksel kalıyor, yer tutucu yarıda kesiliyordu). `min-width` vermek de çözmedi, tersine bozdu — kutu daralabildiği hâlde çocuklar daralamayınca düğme kutunun çerçevesinin DIŞINA taşıyordu; büyütecin kopuk görünmesinin sebebi buydu (1500 pikselde bile 58 piksel dışarı çıkıyordu). `width` doğal genişliği tanımlı kılıyor: başlık 160 piksel yer ayırıyor, `min-width:0` sayesinde yer yoksa daralabiliyor, yani taşma imkânsız. */ (`overflow:hidden` ile kırpmak akla geliyor ama olmaz: kutunun altından açılan öneri listesini de keser — bkz. yukarıdaki not.) */ .header-tools .search-box input { width: 160px; min-width: 0; flex: 1 1 auto; } .header-tools .icon-btn { flex: none; } .header-inner { min-width: 0; } /* Menü ASLA kısalmaz: kısalınca son sıradaki EĞLENCE kırpılıyordu ve sağ üstte hiç görünmüyordu. Baskıyı arama kutusu emiyor (o da 1180px altında zaten menüyle birlikte gizleniyor). `overflow: hidden` de kalktı — Eğlence'nin alt menüsü aşağı sarktığı için o kutu tarafından kesiliyordu. */ .main-nav { min-width: 0; flex-shrink: 0; } /* The menu button moved out of header-tools and into the empty space on the far left, which also relieved the crowded right-hand side. */ .header-inner > .menu-btn { flex: none; margin-right: 2px; } /* NOTE: no `overflow: hidden` here. It used to clip the select/button into the rounded corner, but it also clipped the type-ahead dropdown that hangs below the box, so the corners are rounded on the children instead. */ .search-box { display: flex; align-items: stretch; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; position: relative; } .search-box > select, .search-box > input:first-child { border-radius: 11px 0 0 11px; } .search-box > .search-go { border-radius: 0 11px 11px 0; } .search-box select { border: none; background: var(--blue-100); color: var(--blue-700); font-weight: 800; font-size: .8rem; padding: 0 10px; cursor: pointer; font-family: inherit; outline: none; } .search-box input { border: none; background: transparent; padding: 9px 12px; min-width: 210px; color: var(--text); font-size: .88rem; font-family: inherit; outline: none; } .search-box input::placeholder { color: var(--text-muted); } .search-box .search-go { border: none; background: var(--blue-600); color: #fff; padding: 0 14px; cursor: pointer; display: grid; place-items: center; } /* Büyütecin boyutu. Bu kural yoktu: SVG'nin kendi ölçüsü olmadığı için düğmenin içinde 0×0 çiziliyordu — yani buton bomboş bir mavi kutu gibi görünüyordu. Sayfadaki diğer simgelerin hepsinde böyle bir kural var (.icon-btn svg, .social-link svg …), atlanan tek yer burasıydı. */ .search-box .search-go svg { width: 17px; height: 17px; flex: none; } .search-box .search-go:hover { background: var(--blue-700); } .icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); cursor: pointer; display: grid; place-items: center; font-weight: 800; font-size: .8rem; transition: .15s; } .icon-btn:hover { color: var(--blue-700); border-color: var(--blue-500); } .icon-btn svg { width: 18px; height: 18px; } /* mobile nav toggle */ .nav-toggle { display: none; } /* ---------- Hero (light / neutral) ---------- */ .hero { position: relative; overflow: hidden; /* Sabit #ffffff yerine yüzey rengi: tema değişince kendiliğinden uyuyor. */ background: radial-gradient(900px 340px at 82% -20%, rgba(37,99,235,.08), transparent 60%), linear-gradient(180deg, var(--surface), var(--bg)); color: var(--text); padding: 54px 0 44px; border-bottom: 1px solid var(--border); } .hero .container { position: relative; z-index: 2; } .hero .eyebrow { color: var(--blue-600); } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; max-width: 18ch; color: var(--text); } .hero h1 .b { color: var(--blue-600); } .hero p { font-size: 1.04rem; color: var(--text-soft); max-width: 60ch; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } /* Filigran tokmak. %7 opaklık koyu zeminde iş görüyordu ama açık temada neredeyse beyaz üstünde beyaz kalıyordu — görünmüyordu. Açık temada daha belirgin, koyu temada eski değerinde. */ .hero-watermark { position: absolute; right: -30px; top: 50%; transform: translateY(-50%) rotate(-8deg); opacity: .16; z-index: 1; pointer-events: none; } [data-theme="dark"] .hero-watermark { opacity: .10; } .hero-watermark img, .hero-watermark svg { width: 380px; height: 380px; object-fit: contain; } /* Tokmakçılar tablosu tek sütuna düşünce (≤1100px) sağdaki alan bomboş kalıyordu. Filigranı gizlemek yerine oraya, arama kartlarının hizasına çekiyoruz — boşluğu o dolduruyor. */ @media (max-width: 1100px) { .hero-watermark { right: -40px; top: auto; bottom: 0; transform: rotate(-8deg); } .hero-watermark img, .hero-watermark svg { width: 320px; height: 320px; } } .hero-stats { display: flex; gap: 30px; margin-top: 28px; flex-wrap: wrap; } .hero-stat b { display: block; font-size: 1.6rem; font-weight: 900; color: var(--blue-600); } .hero-stat span { font-size: .82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; } /* ---------- Cards / grid ---------- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; } .card.hoverable { transition: transform .16s ease, box-shadow .2s ease; } .card.hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .card-head .dot { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-700); } .card-head h3 { margin: 0; font-size: 1.05rem; font-weight: 900; } .card-head .badge { margin-left: auto; } .badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); } .badge.gold { background: var(--gold-100); color: var(--gold-600); } .badge.green { background: rgba(47,191,106,.15); color: var(--green-600); } .badge.max { background: linear-gradient(135deg,var(--gold-500),var(--gold-600)); color:#2a1e00; } /* ---------- Cards (game cards) ---------- */ .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .card-grid.eight { grid-template-columns: repeat(4, 1fr); } /* Tüm kartlar ızgarası (Kartlar sayfası). Sütun sayısı ekrana göre iniyor; ölçüldü: sabit sekiz sütunda 390 piksellik ekranda kart 33×40 piksele düşüyor ve resim iksir rozetinin altında kayboluyor. */ .card-grid.tumu { grid-template-columns: repeat(8, 1fr); } @media (max-width: 1180px){ .card-grid.tumu { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 900px) { .card-grid.tumu { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 620px) { .card-grid.tumu { grid-template-columns: repeat(4, 1fr); } .card-grid { gap: 8px; } /* Küçük kartta 22 piksellik rozet resmi yutuyor — onunla birlikte küçülsün. */ .cr-card .elixir { width: 19px; height: 19px; font-size: .6rem; top: 3px; right: 3px; } } @media (max-width: 400px) { .card-grid.tumu { grid-template-columns: repeat(3, 1fr); } } .cr-card { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); aspect-ratio: 5 / 6; display: flex; flex-direction: column; } .cr-card .art { flex: 1; display: grid; place-items: center; overflow: hidden; position: relative; } .cr-card .art img { width: 100%; height: 100%; object-fit: contain; } .cr-card .art .fallback { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: .8rem; padding: 6px; color: var(--text-soft); background: linear-gradient(160deg,var(--blue-100),var(--surface-2)); } .cr-card .lvl { text-align: center; font-size: .72rem; font-weight: 900; padding: 4px; background: var(--blue-900); color: #fff; } .cr-card .lvl.max { background: linear-gradient(135deg,var(--gold-500),var(--gold-600)); color:#2a1e00; } .cr-card.evo { border: 2px solid transparent; background: linear-gradient(var(--surface-2),var(--surface-2)) padding-box, linear-gradient(135deg,#8be9ff,#c58bff,#ff9ce4) border-box; } /* NOTE: the champion modifier is ".champ", never ".hero" — ".hero" is already the landing-page banner section (padding: 54px 0 44px), and a card carrying that class inherits the padding and clips its own artwork. */ .cr-card.champ:not(.evo) { border: 2px solid transparent; background: linear-gradient(var(--surface-2),var(--surface-2)) padding-box, linear-gradient(135deg,var(--gold-400),var(--gold-600)) border-box; } .cr-card .evo-tag, .cr-card .hero-tag, .cr-card .heroslot-tag { position: absolute; top: 5px; left: 5px; z-index: 2; font-size: .58rem; font-weight: 900; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; text-transform: uppercase; } /* Evolution and champion must never read as the same thing. Evolution keeps the game's purple; champion is gold. Nothing else uses either colour. */ .cr-card .evo-tag { background: linear-gradient(135deg,#8b5cf6,#6d28d9); color:#fff; } .cr-card .hero-tag { background: linear-gradient(135deg,var(--gold-400),var(--gold-600)); color:#2a1e00; } /* An evolution whose artwork was never published: the plain card is shown, so the purple outline is dashed to say "this picture is not the evolved one". The tooltip spells it out. */ .cr-card.no-evo-art { outline: 2px dashed rgba(139,92,246,.75); outline-offset: -2px; } /* A HERO slot: the game's gold, clearly not the evolution purple. */ .cr-card .heroslot-tag { background: linear-gradient(135deg,#ffd75e,#e0a800); color:#3a2a00; } .cr-card.heroslot { box-shadow: 0 0 0 2px #e0a800 inset; } .di.heroslot { box-shadow: 0 0 0 2px #e0a800 inset; border-radius: 8px; } .cr-card .elixir { position: absolute; top: 5px; right: 5px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#e884ff,#a01bd6); color:#fff; font-size: .7rem; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(160,27,214,.5); } /* ---------- Kart rozetleri kartla birlikte ölçeklenir ---------- Rozetlerin boyu SABİTTİ (iksir 22px, seviye .72rem) ama kart her yerde aynı boyda değil. Ölçüldü — 390 piksellik telefonda: anti listesi kart 33px → iksir rozeti kartın %67'si meta destesi kart 73px → evrim etiketi %44'ü koleksiyon kart 71px → seviye çubuğu %30'u Yani küçük kartlarda rozet kartın kendisini örtüyordu; ekranda kart sanatı değil mor bir daire görünüyordu. Çözüm kapsayıcı sorgusu (container query): rozetler artık kartın GENİŞLİĞİNE göre ölçekleniyor (cqw). clamp() ile alt/üst sınır var — büyük kartta rozet devleşmesin, küçük kartta okunmaz hâle gelmesin. Çok küçük kartlarda (≤44px, ör. yan yana sekiz kart) rozetler tamamen gizleniyor: o boyutta kartı tanıtan şey sanatıdır, üstündeki rakam değil. Evrim/kahraman bilgisi yine görünür kalıyor çünkü onu çerçeve taşıyor (evrimde renkli kenarlık, kahramanda altın iç gölge). */ .cr-card { container-type: inline-size; } .cr-card .elixir { width: clamp(10px, 26cqw, 22px); height: clamp(10px, 26cqw, 22px); font-size: clamp(.4rem, 15cqw, .7rem); top: clamp(2px, 5cqw, 5px); right: clamp(2px, 5cqw, 5px); } .cr-card .lvl { font-size: clamp(.4rem, 14cqw, .72rem); padding: clamp(1px, 3cqw, 4px) 2px; } .cr-card .evo-tag, .cr-card .hero-tag, .cr-card .heroslot-tag { /* "KAHRAMAN" sekiz harf ve dar kartta sığmayıp "KAHR…" diye kesiliyordu. Harf aralığı da kartla birlikte küçülünce tam sığıyor; kesme yalnızca son çare olarak duruyor. */ font-size: clamp(.28rem, 9.5cqw, .58rem); letter-spacing: clamp(0em, .6cqw, .04em); padding: clamp(0px, 1.5cqw, 2px) clamp(2px, 4cqw, 6px); top: clamp(2px, 5cqw, 5px); left: clamp(2px, 5cqw, 5px); /* Sağdan ayrılan pay = iksir rozetinin yeri, o da kartla ölçekleniyor. */ max-width: calc(100% - clamp(12px, 30cqw, 30px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @container (max-width: 44px) { .cr-card .elixir, .cr-card .evo-tag, .cr-card .hero-tag, .cr-card .heroslot-tag { display: none; } } /* Kapsayıcı sorgusunu tanımayan eski tarayıcı: rozetler eski sabit boyutlarında kalır — kötü görünür ama hiçbir şey kırılmaz. */ /* ---------- Tables ---------- */ /* Tablo sarmalayıcısı. `overflow:hidden` idi ve mobilde asıl sorun buydu: 375 piksellik ekranda 721 piksellik sıralama tablosu kırpılıyor, sağdaki sütunlar (MADALYON, DESTE) hiç görülemiyordu — kaydırmak da mümkün değildi çünkü hidden kaydırmayı kapatıyor. `auto` ile artık parmakla yana kaydırılıyor; köşe yuvarlaklığı da korunuyor. `overscroll-behavior-x` yatay kaydırma bitince hareketin sayfaya (ve tarayıcının "geri" hareketine) sıçramasını engelliyor. */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: .9rem; } table.data thead th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); background: var(--surface-2); padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 800; white-space: nowrap; } table.data tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: var(--surface-2); } table.data .rank { font-weight: 900; color: var(--text-muted); width: 54px; } table.data .rank.top1 { color: var(--gold-500); } table.data .rank.top2 { color: #9fb0c9; } table.data .rank.top3 { color: #c98a3f; } .player-link { font-weight: 800; } .tag { font-size: .78rem; color: var(--text-muted); font-weight: 700; } .trophy { font-weight: 900; color: var(--gold-600); } .trophy::before { content: "🏆"; margin-right: 5px; font-size: .8em; } .clan-chip { display: inline-flex; align-items: center; gap: 8px; } .clan-crest { width: 22px; height: 26px; flex: none; } /* rank medal for leaderboard top 3 */ .rank-badge { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; font-weight:900; font-size:.85rem; } .rank-badge.g1{ background:linear-gradient(135deg,#ffe08a,#f2b807); color:#4a3400; } .rank-badge.g2{ background:linear-gradient(135deg,#e9eef6,#b7c3d6); color:#39485e; } .rank-badge.g3{ background:linear-gradient(135deg,#f4c58a,#cd8a3f); color:#4a2c07; } /* ---------- Wheel / deck generator ---------- */ .generator { background: radial-gradient(700px 260px at 15% -10%, rgba(47,191,106,.16), transparent 60%), var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 30px; box-shadow: var(--shadow); } .gen-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; } .wheel-wrap { position: relative; display: grid; place-items: center; } .wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 24px solid var(--gold-500); z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .wheel { width: 300px; height: 300px; border-radius: 50%; border: 10px solid var(--blue-900); box-shadow: 0 12px 40px rgba(11,31,77,.35), inset 0 0 0 6px var(--gold-500); transition: transform 4.6s cubic-bezier(.15,.9,.2,1); } .wheel-hub { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg,var(--gold-400),var(--gold-600)); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); border: 4px solid #fff; } .wheel-hub svg { width: 30px; height: 30px; } .gen-btn-col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .big-green-btn { width: 100%; background: linear-gradient(180deg,#3fd47b,#1f9d4d); color: #06340f; font-weight: 900; font-size: 1.15rem; letter-spacing: .01em; border: none; border-radius: 16px; padding: 20px 22px; cursor: pointer; box-shadow: 0 8px 0 #14712f, 0 14px 24px rgba(31,157,77,.4); text-transform: uppercase; position: relative; top: 0; transition: top .08s, box-shadow .08s; background-image: linear-gradient(180deg,#3fd47b,#1f9d4d), repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px); } .big-green-btn:hover { filter: brightness(1.04); } .big-green-btn:active { top: 6px; box-shadow: 0 2px 0 #14712f, 0 6px 12px rgba(31,157,77,.4); } .big-green-btn:disabled { opacity: .7; cursor: wait; } .deck-result { margin-top: 26px; border-top: 1px dashed var(--border-strong); padding-top: 24px; display: none; } .deck-result.show { display: block; animation: fadeUp .4s ease; } .deck-result h3 { font-size: 1.25rem; font-weight: 900; } .deck-result h3 .name { color: var(--blue-600); } .deck-meta { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 18px; font-size: .85rem; color: var(--text-soft); } .deck-meta b { color: var(--text); } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px);} to {opacity:1; transform:none;} } /* ---------- Player dashboard sample ---------- */ .dash { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .stat-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; } .stat-tile .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 800; } .stat-tile .v { font-size: 1.5rem; font-weight: 900; margin-top: 2px; } .battle-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .battle-row:last-child { border-bottom: none; } .result-pill { font-size: .72rem; font-weight: 900; padding: 3px 10px; border-radius: 999px; } .result-pill.win { background: rgba(47,191,106,.16); color: var(--green-600); } .result-pill.loss { background: rgba(224,60,60,.14); color: #d23c3c; } .result-pill.draw { background: var(--surface-2); color: var(--text-muted); } /* ---------- ANTİ DESTE 🛡️ ---------- Tasarımın tek kuralı: sekiz kart TEK SIRADA. Önce yatay kaydırmalı bir ray vardı ve her deste iki satır hâlinde çiziliyordu. Telefonda iki sorun birden çıkıyordu: listeye ancak iki deste sığıyordu ve "hangi desteler var" sorusunun cevabı için parmakla savurmak gerekiyordu. Sekiz kartı tek sıraya alınca bir deste ~90 piksel tutuyor, sekiz deste tek ekrana giriyor ve seçim tek dokunuş oluyor. 390 px ekranda kart genişliği ~37 px; oyunun kendi deste ekranıyla aynı mertebe, kart sanatı bu boyutta tanınıyor. ---------------------------------------------------------------- */ .anti-liste { display:flex; flex-direction:column; gap:8px; } .anti-satir { display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; background:var(--surface); border:2px solid var(--border); border-radius:14px; padding:10px 12px; transition:border-color .15s, background .15s; } .anti-satir:hover { border-color:var(--blue-600); } .anti-satir.secili { border-color:var(--blue-600); background:rgba(30,90,224,.06); } .anti-satir .as-ust { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; } .anti-satir .as-ad { font-weight:900; font-size:.86rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .anti-satir .as-bilgi { margin-left:auto; font-size:.74rem; color:var(--text-muted); font-weight:700; white-space:nowrap; } /* Sekiz kartlık sıra. `.mini-cards` ızgarası her kullanıldığı yerde AYRI tanımlı (`.metadeck`, `.modal-box`, …) — ortak kural yok, o yüzden burada kendi ızgaramızı yazıyoruz. Yazmayı atlarsak kartlar alt alta diziliyor. */ /* max-width ŞART: geniş ekranda sekiz kart 1/8'er pay alınca her biri 160 pikselin üstüne çıkıyor ve tek bir deste satırı 241 piksel oluyordu — listenin kompakt olması bütün tasarımın amacıydı. Üst sınır kartı ~62 piksele sabitliyor; telefonda zaten sınırın altında kalıyor. */ .as-kartlar { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-width:540px; } .as-kartlar .cr-card { aspect-ratio:4/5; width:100%; } /* Evrim/kahraman etiketleri kart 37 piksele inince kartın yüzünü kaplıyor. */ .as-kartlar .cr-card .evo-tag, .as-kartlar .cr-card .hero-tag, .as-kartlar .cr-card .heroslot-tag { font-size:.4rem; padding:0 2px; } /* Aynı sebeple seviye/iksir rozetleri de küçülüyor. */ .as-kartlar .cr-card .lvl, .as-kartlar .cr-card .cost { font-size:.5rem; } /* Arketip çipleri tek satırda yana kayıyor: 24 çip sarınca telefonda sekiz satır tutuyor ve asıl deste listesini ekranın dışına itiyor. */ .anti-koclar { display:flex; gap:7px; overflow-x:auto; padding-bottom:10px; margin-bottom:4px; scrollbar-width:thin; } .anti-koc { flex:0 0 auto; font:inherit; font-size:.75rem; font-weight:800; cursor:pointer; padding:5px 11px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-soft); } .anti-koc:hover { border-color:var(--blue-600); color:var(--blue-600); } .anti-koc.secili { background:var(--blue-600); border-color:var(--blue-600); color:#fff; } /* ---- sonuç ---- */ .anti-bas-kart { margin-bottom:14px; } .anti-sonuc { margin-bottom:12px; } .anti-sonuc .as-ust { display:flex; align-items:center; gap:10px; } .anti-sonuc .as-sira { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--text-muted); font-size:.72rem; font-weight:900; display:grid; place-items:center; } .anti-sonuc .as-yuzde { font-size:1.6rem; font-weight:900; color:var(--green-600); font-variant-numeric:tabular-nums; line-height:1; } .anti-sonuc .as-ad { display:flex; flex-direction:column; line-height:1.3; font-weight:900; font-size:.92rem; min-width:0; } .anti-sonuc .as-ad .muted { font-weight:600; font-size:.75rem; } /* Oranı GÖZLE okutuyor: %66 ile %56 farkı sayıdan çok buradan anlaşılıyor. Boş kalan kısım rakibin payı, o yüzden zemin şeffaf değil kırmızıya çalıyor. */ .anti-cubuk { height:7px; border-radius:999px; background:rgba(224,60,60,.2); overflow:hidden; margin:10px 0 12px; } .anti-cubuk span { display:block; height:100%; border-radius:999px; background:var(--green-600); } .anti-sonuc .as-alt { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:.78rem; } .as-kopya { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.8rem; padding:8px 14px; } .as-kopya svg { width:15px; height:15px; } .anti-kisa { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:.86rem; } .anti-kisa:last-child { border-bottom:none; } .anti-kisa-p { font-weight:900; font-variant-numeric:tabular-nums; color:var(--text-muted); min-width:44px; } .anti-kisa-p.iyi { color:var(--green-600); } @media (max-width: 560px){ .anti-satir { padding:9px 10px; } .as-kartlar { gap:3px; } .anti-sonuc .as-yuzde { font-size:1.35rem; } /* Kopyala düğmesi tam genişliğe geçiyor: asıl eylem o, köşede küçük kalmamalı ve başparmakla rahat basılmalı. */ .as-kopya { margin-left:0; flex-basis:100%; justify-content:center; padding:11px 14px; } } /* ---------- Eşleşme rozeti ⚔️ ---------- "Bu karşılaşmada kim kazanıyor?" — savaş günlüğünde ve Son Maçlar akışında görünüyor. Dört hâli var: oyuncu favori (up), rakip favori (down), başabaş/ayna (even) ve örneklem yetersiz (thin). `thin` bilerek soluk ve çerçevesiz: "60 maçtan az veri" bir sonuç değil, sonucun HENÜZ olmadığının bildirimi — diğer üçüyle aynı görsel ağırlıkta durursa okuyan onu da bir oran sanıyor. Renkler yalnız arka planı taşıyor, metin her iki temada da kendi belirteciyle yazılıyor; alfa'lı zeminler koyu temada da okunur. */ .mu-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; font-size:.72rem; font-weight:800; line-height:1.35; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--text-soft); border:1px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mu-chip b { font-weight:900; } .mu-chip.up { background:rgba(47,191,106,.16); color:var(--green-600); } .mu-chip.down { background:rgba(224,60,60,.14); color:#d23c3c; } .mu-chip.even { background:var(--surface-2); color:var(--text-soft); border-color:var(--border); } .mu-chip.thin { background:transparent; color:var(--text-muted); font-weight:700; border-color:var(--border); } /* Günlükte kendi satırında durur: taç/lig etiketlerinin arasına sıkışınca dar ekranda okunmuyordu. */ .bl-mu { margin:0 0 10px; } /* Akışta maç türü ile zaman damgasının arasında. `mago` zaten margin-left:auto ile sağa yaslı, yani rozet ortada kalıyor. */ .match-top .mu-chip { flex:0 1 auto; min-width:0; } @media (max-width: 560px){ /* Dar ekranda iki kart adı + iki yüzde tek satıra sığmıyor; rozet tam genişliğe geçiyor ve kısaltma yerine sarmalıyor. */ .mu-chip { white-space:normal; font-size:.7rem; } .match-top .mu-chip { order:3; flex-basis:100%; } .match-top .mago { order:2; } } /* Profile battle log */ .bl-row { border-bottom: 1px solid var(--border); padding: 14px 0; } .bl-row:last-child { border-bottom: none; } .bl-lbl { font-size: .72rem; font-weight: 800; margin-bottom: 4px; color: var(--text-muted); } /* trophy chart */ .spark { width: 100%; height: 90px; display: block; } .trophy-graph { width: 100%; height: 180px; display:block; } /* ---------- Profile header ---------- */ .profile-hero { background: linear-gradient(135deg,var(--blue-900),var(--blue-700)); color:#fff; border-radius: 20px; padding: 26px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; } .profile-hero .avatar { width:76px; height:76px; border-radius:18px; background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); display:grid; place-items:center; font-size:2rem; flex:none; } /* Lig rozeti taşındığında altın kare fazlalık — görsel kendi zemininde durur. */ .profile-hero .avatar.lig { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); } .profile-hero .avatar.lig img { width:60px; height:60px; object-fit:contain; display:block; } .profile-hero .ph-body { min-width:0; flex:1 1 240px; } .profile-hero h1 { margin:0; font-size:1.7rem; } /* Etiket satırı esnek bir sıra. Eskiden düz metindi ve içindeki klan arması (22×26 blok) satır hizasından yukarı kaçıyordu; şimdi hepsi ortadan hizalı ve dar ekranda temiz sarıyor. */ .profile-hero .tag { color:#cdd9f2; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .profile-hero .tag i { font-style:normal; opacity:.45; } .profile-hero .tag .clan-chip { gap:6px; } .profile-hero .tag .clan-badge { width:22px; height:22px; display:block; } .profile-hero .p-stats { margin-left:auto; display:flex; gap:26px; flex-wrap:wrap; } /* Sayaçlar alttan hizalı. Lig sayacının değeri yazı olduğu için (ASİL ŞAMPİYON) ötekilerden küçük punto; üstten hizalıyken alt satır 13 piksel yukarıda kalıyordu, yani "LİG" ile "KUPA YOLU" aynı çizgide değildi. Alttan hizalayınca etiket satırı hepsinde aynı yere düşüyor ve değerlerin alt kenarları da kendiliğinden çakışıyor. */ .profile-hero .p-stats > div { display:flex; flex-direction:column; justify-content:flex-end; } .profile-hero .p-stats b { display:block; font-size:1.5rem; color:var(--gold-400); } /* Sayı yerine lig adı yazınca 1.5rem taşıyordu. */ .profile-hero .p-stats b.sm { font-size:1.05rem; line-height:1.45; } .profile-hero .p-stats span { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#c3d1ee; } /* ---------- Lig geçmişi ---------- */ .lg-strip { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; } .lg-step { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:.72rem; font-weight:900; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); } .lg-step.on { background:var(--blue-100); border-color:var(--blue-500); color:var(--blue-600); } .lg-step.now { background:var(--blue-600); border-color:var(--blue-600); color:#fff; } .lg-bars { display:flex; flex-direction:column; gap:14px; } /* ÜÇÜNCÜ SÜTUN SABİT OLMAK ZORUNDA. `auto` iken sütunun genişliği yazının uzunluğuna göre değişiyordu: "NİHAİ ŞAMPİYON ESKİ ÖLÇEK" satırında yazı geniş olduğu için çubuk rayı daralıyor, dolayısıyla DAHA YÜKSEK madalyonlu satırın çubuğu daha kısa görünüyordu. Ray artık her satırda aynı genişlikte, yani çubuklar gerçekten karşılaştırılabilir. */ .lg-row { display:grid; grid-template-columns:96px minmax(0,1fr) 184px; align-items:center; gap:12px; } .lg-note { margin:14px 0 0; font-size:.76rem; color:var(--text-muted); } .lg-lbl { font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); } .lg-track { position:relative; height:26px; border-radius:8px; background:var(--surface-2); overflow:hidden; } .lg-fill { height:100%; border-radius:8px; background:linear-gradient(90deg,var(--blue-500),var(--blue-700)); } .lg-row.best .lg-fill { background:linear-gradient(90deg,var(--gold-400),var(--gold-600)); } .lg-ic { position:absolute; right:4px; top:50%; transform:translateY(-50%); object-fit:contain; } .lg-val { text-align:right; line-height:1.35; } .lg-val b { display:block; font-size:.9rem; } .lg-val span { font-size:.76rem; color:var(--text-soft); } .lg-old { font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:1px 5px; border-radius:5px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); vertical-align:2px; } /* Dönemi okunamayan kayıt işareti. Uydurulmuş bir lig adını sessizce göstermek yerine belirsizliği görünür kılıyor; ipucu iki okumayı da yazar. */ .lg-quest { display:inline-grid; place-items:center; width:16px; height:16px; margin-left:5px; border-radius:50%; font-size:.62rem; font-weight:900; cursor:help; vertical-align:2px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); } @media (max-width: 620px) { .lg-row { grid-template-columns:1fr; gap:4px; } .lg-val { text-align:left; } } /* ---------- Meta deck cards ---------- */ .metadeck { } .metadeck .mini-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0; } .metadeck .mini-cards .cr-card { aspect-ratio: 4/5; } .metadeck .foot { display:flex; align-items:center; gap:14px; font-size:.82rem; color:var(--text-soft); } .metadeck .foot .wr { color: var(--green-600); font-weight:900; } .elixir-badge { display:inline-flex; align-items:center; gap:4px; font-weight:800; color:#a01bd6; } /* ---------- Notice / API status ---------- */ .api-status { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); } .api-status .led { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 3px rgba(242,184,7,.2); } .api-status.live .led { background: var(--green-500); box-shadow: 0 0 0 3px rgba(47,191,106,.2); } .notice { background: var(--gold-100); border: 1px solid #f0dca0; color: #7a5c05; padding: 12px 16px; border-radius: 12px; font-size: .86rem; display:flex; gap:10px; align-items:flex-start; } [data-theme="dark"] .notice { border-color:#5a4a12; color: var(--gold-400); } /* ---------- Resmi hesap tiki ---------- Rozet mavi, içindeki onay beyaz. Adın hemen yanında durur. */ .vtick { display:inline-flex; width:1em; height:1em; vertical-align:-0.12em; margin-left:.28em; color:var(--blue-600); flex:none; } .vtick svg { width:100%; height:100%; display:block; } h1 .vtick { width:.82em; height:.82em; } /* Resmi hesap satırı listede hafifçe öne çıksın. */ .res-row.vf { border-color: var(--blue-500); background: color-mix(in srgb, var(--blue-600) 6%, var(--surface)); } /* PRO — Nihai Kademe dünya ilk 100. Tikten ayrı dursun diye altın rozet. */ .protag { display:inline-block; margin-left:.3em; padding:1px 6px; border-radius:6px; background:linear-gradient(135deg,var(--gold-500),var(--gold-600)); color:#fff; font-size:.62em; font-weight:900; letter-spacing:.06em; vertical-align:middle; line-height:1.5; white-space:nowrap; } /* ---------- PRO başvurusu (oyuncu formu) ---------- */ .pro-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .pro-form input, .pro-form select { font-family:inherit; font-size:.88rem; padding:9px 11px; border-radius:11px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); } .pro-form #paTag { width:150px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .pro-form #paNote { flex:1; min-width:200px; } /* ---------- PRO başvuruları (yönetici paneli) ---------- */ .pa-list { display:flex; flex-direction:column; gap:10px; max-height:56vh; overflow-y:auto; } .pa-row { border:1px solid var(--border); border-radius:12px; padding:11px 13px; background:var(--surface-2); } .pa-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.92rem; } .pa-stats { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; } .pa-stat { font-size:.79rem; color:var(--text-soft); } .pa-note { margin-top:7px; font-size:.83rem; background:var(--surface); border-radius:9px; padding:7px 10px; } .pa-foot { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:9px; font-size:.78rem; } .pa-foot .btn { padding:5px 12px; font-size:.8rem; margin-left:0; } .pa-foot .btn-primary { margin-left:auto; } .pa-manual { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; padding:10px; border:1px dashed var(--border-strong); border-radius:12px; } .pa-manual input, .pa-manual select { font-family:inherit; font-size:.85rem; padding:7px 10px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); } .pa-manual #pgTag { width:140px; font-weight:800; text-transform:uppercase; } .pa-manual #uaQ { flex:1; min-width:160px; } .pa-manual .btn { padding:6px 12px; font-size:.82rem; } /* ---------- Kullanıcı yönetimi (yasaklama) ---------- */ .ua-row { display:flex; align-items:center; gap:11px; border:1px solid var(--border); border-radius:12px; padding:9px 12px; background:var(--surface-2); } .ua-row.banned { border-color:rgba(224,67,95,.45); background:rgba(224,67,95,.06); } .ua-av { width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center; background:var(--blue-600); color:#fff; font-weight:900; font-size:.9rem; } .ua-tx { display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; flex:1; } .ua-tx b { font-size:.92rem; } .ua-sub { width:100%; font-size:.75rem; color:var(--text-muted); } .ua-row .btn { padding:5px 11px; font-size:.8rem; flex:none; } .ua-row .ua-ban:hover { border-color:#e0435f; color:#e0435f; } /* ---------- Özel mesajlar ---------- Sohbet iki taraflı: "me" sağda mavi, karşı taraf solda nötr. */ .msg-list { display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow-y:auto; padding:4px 2px; } #msgBox { max-height:46vh; overflow-y:auto; } .msg-b { max-width:78%; padding:9px 12px; border-radius:14px; display:flex; flex-direction:column; gap:3px; } .msg-b .msg-t { font-size:.88rem; line-height:1.4; white-space:pre-wrap; word-break:break-word; } .msg-b .msg-at { font-size:.68rem; opacity:.7; } .msg-b.me { align-self:flex-end; background:var(--blue-600); color:#fff; border-bottom-right-radius:5px; } .msg-b.them { align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:5px; } .msg-send { display:flex; gap:8px; align-items:flex-end; margin-top:12px; } .msg-send textarea { flex:1; min-width:0; resize:vertical; font-family:inherit; font-size:.88rem; padding:9px 11px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); } .msg-threads { display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto; } .msg-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:9px 12px; cursor:pointer; font-family:inherit; color:inherit; } .msg-row:hover { border-color:var(--blue-500); } .msg-av { width:30px; height:30px; border-radius:9px; background:var(--blue-600); color:#fff; display:grid; place-items:center; font-weight:900; font-size:.82rem; flex:none; } .msg-main { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .msg-u { font-weight:800; font-size:.88rem; } .msg-last { font-size:.78rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .msg-badge { background:#e0435f; color:#fff; font-size:.72rem; font-weight:900; padding:2px 7px; border-radius:999px; flex:none; } /* Tokmakçılar tablosunda yönetici yasaklama düğmesi */ .board-ban { border:none; background:transparent; cursor:pointer; font-size:.9rem; line-height:1; padding:3px 5px; border-radius:7px; opacity:.5; flex:none; } .board-ban:hover { opacity:1; background:rgba(224,67,95,.14); } /* ---------- Açılır kapanır kart başlığı ---------- Başlık