/* sunuculari.com — sunucu sayfasının tasarımda olmayan ekleri (sr.css'teki v12 stillerinin üstüne).
   Boş durumlar, "Ölçüm birikiyor", grafik ipucu, sahiplik kartı, bildir penceresi, sahibin yanıt alanı ve az görselli
   mozaik. Hepsi tasarımın değişkenleri ve ölçüleriyle. */

/* Yönetim çubuğu açıkken yapışkan parçalar başlığın altında kalsın. */
.admin-bar .sr-dnav { top: 96px; }
.admin-bar .sr-join { top: 172px; }
@media (max-width: 782px) { .admin-bar .sr-dnav { top: 110px; } }

/* Sahip satırındaki bağlantılar (Discord, site, "Bu sunucu senin mi?"). */
.sr-dt-own a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.sr-dt-own a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Hakkında: sahibin yazısı birden çok paragraf olabilir. */
.sr-dt-about > * + * { margin-top: .9em; }
.sr-dt-about a { text-decoration: underline; text-underline-offset: 3px; }
.sr-dt-about ul, .sr-dt-about ol { padding-left: 1.3em; }
.sr-dt-about li + li { margin-top: .3em; }
.sr-dt-about img { max-width: 100%; height: auto; border-radius: var(--r-m); }

/* Boş durum: simge, kısa açıklama, iş gösteren düğme. */
.sr-dt-empty { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-l); background: color-mix(in srgb, var(--bg-2) 55%, white); }
.sr-dt-empty__i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 21px; }
.sr-dt-empty > div > b { display: block; font-size: 16px; font-weight: 650; }
.sr-dt-empty > div > span { display: block; color: var(--ink-3); font-size: 14.5px; line-height: 1.5; }
.sr-dt-empty > .sr-btn { flex: none; }
.sr-rvs .sr-dt-empty { margin-bottom: 4px; }

/* Grafik: ölçüm azken. */
.sr-dt-chart0 { height: 220px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; border-radius: var(--r-l); background: repeating-linear-gradient(180deg, transparent 0 54px, var(--line) 54px 55px), var(--bg-2); color: var(--ink-3); padding: 0 24px; }
.sr-dt-chart0 i { font-size: 28px; color: var(--ink-3); }
.sr-dt-chart0 b { font-size: 16px; font-weight: 650; color: var(--ink); }
.sr-dt-chart0 span { font-size: 14px; max-width: 46ch; }

/* Grafik ipucu: dikey çizgi, nokta, değer kutusu. */
[data-chart] { position: relative; touch-action: pan-y; }
.sr-dt-tip { position: absolute; inset: 0; pointer-events: none; }
.sr-dt-tip__l { position: absolute; top: 0; bottom: 26px; left: var(--x); width: 1px; background: var(--ink-3); opacity: .35; }
.sr-dt-tip__d { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px #fff, var(--sh-1); }
.sr-dt-tip__b { position: absolute; left: var(--x); top: max(0px, calc(var(--y) - 64px)); margin-left: 12px; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.3; white-space: nowrap; box-shadow: var(--sh-2); }
.sr-dt-tip.is-r .sr-dt-tip__b { margin-left: 0; transform: translateX(calc(-100% - 12px)); }
.sr-dt-tip__b b { font-size: 16px; font-weight: 700; }
.sr-dt-tip__b small { display: block; opacity: .7; font-size: 12.5px; }

/* Tam ekran galeri: dar ekranda görsel ve küçük resim şeridi ekrana sığsın (ızgara sütunu içeriğe göre genişlemesin). */
.sr-lb { grid-template-columns: minmax(0, 1fr); }
.sr-lb__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.sr-lb__img { max-width: 100%; max-height: 100%; min-width: 0; justify-self: center; align-self: center; }
.sr-lb__th { justify-content: safe center; }
.sr-lb__cap { padding-inline: 16px; }

/* MOTD kutusu: kapalı sunucu. */
.sr-dt-motd-off { color: #ff5555; }

/* Az görselli mozaik (sahibin 1-4 görseli). */
.sr-mosaic.sr-dt-mosaic1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.sr-mosaic.sr-dt-mosaic2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.sr-mosaic.sr-dt-mosaic2 .sr-mosaic__i:first-child { grid-row: auto; }
.sr-mosaic.sr-dt-mosaic3 { grid-template-columns: 2fr 1fr; }
.sr-mosaic.sr-dt-mosaic4 { grid-template-columns: 2fr 1fr 1fr; }
.sr-mosaic.sr-dt-mosaic4 .sr-mosaic__i:nth-child(4) { grid-column: span 2; }

/* Katıl kartı: tek bilgi, sayı yerine durum (Açık, Kapalı, Ölçülüyor), ölçülmeyen oyun. */
.sr-join__facts.sr-dt-facts1 { grid-template-columns: 1fr; }
.sr-join__on.sr-dt-on-t { font-size: 22px; letter-spacing: -.02em; }
.sr-dt-cd { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-family: var(--f-mono); font-size: 15px; font-weight: 500; }
.sr-dt-cd i { font-size: 18px; }
.sr-join__live:has(> .sr-dt-na) { display: block; }
.sr-dt-na { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-3); font-size: 14.5px; line-height: 1.45; }
.sr-dt-na i { font-size: 17px; line-height: 1.25; }
a.sr-cta { text-decoration: none; }

/* Takım ilanlarında harf avatarı. */
.sr-r .sr-dt-lav { width: 48px; height: 48px; font-size: 18px; }
.sr-upd b a { color: inherit; }
.sr-upd b a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Sahiplik kartı: sahip satırı gibi, kart içinde. */
.sr-claim2 { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); }
.sr-claim2__i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--bg-2); color: var(--ink-2); font-size: 22px; }
.sr-claim2.is-done .sr-claim2__i { background: var(--warn-soft); color: var(--warn); }
.sr-claim2.is-pend .sr-claim2__i { background: var(--warn-soft); color: var(--warn); }
.sr-claim2__b { display: grid; gap: 8px; min-width: 0; }
.sr-claim2__b > b { font-size: 17px; font-weight: 650; }
.sr-claim2__b > p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 62ch; }
.sr-claim2__f { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sr-claim2__form { display: grid; gap: 10px; margin-top: 6px; }
.sr-dt-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; }
.sr-dt-alert i { font-size: 18px; line-height: 1.3; }
.sr-dt-alert.is-ok { background: var(--live-soft); color: var(--up); }
.sr-dt-alert.is-err { background: #fbeceb; color: var(--down); }

/* Bildir penceresi (sunucu ve yorum). */
.sr-dt-rep { gap: 10px; }
.sr-dt-rep h3 { margin-right: 44px; }
.sr-dt-rep__s { color: var(--ink-2); font-size: 15px; margin-bottom: 6px; }
.sr-dt-rep .sr-rvc__tags button { height: auto; min-height: 36px; padding: 7px 14px; text-align: left; line-height: 1.35; }
.sr-dt-rep .sr-rvc__f { margin-top: 8px; }

/* Sunucu sahibinin yanıt alanı (yorumun içinde). */
.sr-dt-rpc .sr-rvc__in { margin-top: 14px; padding: 16px 18px; box-shadow: none; }
.sr-rv__rp:disabled, .sr-rv__hp:disabled { opacity: .55; cursor: default; }
.sr-rv__hp:disabled:hover { background: none; }

/* Yorumlar uçtan gelirken. */
.sr-rvs.is-busy .sr-rvs__list { opacity: .5; transition: opacity .2s var(--ease); }

/* JS yoksa tavsiye çubuğu dolu gelir. */
html:not(.sr-js) .sr-rvs__meter i { transform: scaleX(var(--p)); }

/* Mobil alt çubuk: katıl kartı görünürken aşağı kayar. */
.sr-mbar { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sr-mbar.is-hid { transform: translateY(110%); }

@media (max-width: 760px) {
	.sr-dt-empty { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; gap: 12px 14px; }
	.sr-dt-empty__i { width: 40px; height: 40px; font-size: 19px; }
	.sr-dt-empty > .sr-btn { grid-column: 2; justify-self: start; }
	.sr-claim2 { grid-template-columns: minmax(0, 1fr); padding: 18px; }
	.sr-claim2__i { display: none; }
	.sr-dt-chart0 { height: 190px; }
	.sr-dt-tip__b { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.sr-mbar { transition: none; }
}