/* ==========================================================================
   Vice Home Portal — Large Screen Scale & Interaction Pass (2026)
   --------------------------------------------------------------------------
   Scope: homepage-only widgets — "Vice Durumum" (.vc-my-vice), "Şehir Hayatı
   & Etkinlikler" (.vc-city-life) and "Vice Enleri" (.vc-feature-rankings).

   Problem: vice-dark-2026.css sets these widgets in fixed px type (as small
   as 6-11px) inside a container capped at 1320px regardless of viewport.
   On 1920x1080 / 2560x1440 screens the box sits in a sea of empty margin
   and the copy inside reads as illegibly small.

   Approach: fluid clamp() typography/spacing so text scales continuously
   with viewport width instead of jumping at fixed breakpoints, a small
   fixed +70px width bump on the home container (legibility mainly comes
   from the type scale, not from stretching the layout), and a light
   interaction pass (lift, glow, motion) layered on the existing --vice-*
   token system — no new palette, no structural markup changes.
   ========================================================================== */

/* ---- 1. A small, fixed width bump for the home portal only — +70px over
   the site's usual 1320px measure (1390px total), the same on every large
   screen from a 1440px laptop up through a 2560px monitor. This is a
   modest breathing-room gain, not a full-bleed layout; the real fix for
   legibility on big screens is the fluid type scale in section 2 below.
   Inner pages (topics, boards, UCP, etc.) keep their existing 1320px
   measure untouched. ---- */
@media (min-width: 1440px) {
	body.vice-home-layout.vice-dark-2026 .vice-container,
	body.vice-home-layout.vice-dark-2026 #main_content_section.vice-container {
		max-width: min(1390px, calc(100% - (var(--vice-page-gutter) * 2)));
	}
}

/* ---- 2. Fluid type & spacing tokens, scoped to the three widgets. Values
   read comfortably from a 1280px laptop up through a 2560px monitor
   without a hard breakpoint jump. clamp(min, preferred, max). ---- */
body.vice-home-layout {
	--vhp-text-3xs: clamp(9px, 0.55vw + 6px, 12px);   /* kickers, eyebrow labels  (was 6-7px) */
	--vhp-text-2xs: clamp(10px, 0.6vw + 6px, 13px);   /* meta, timestamps, badges (was 7-8px) */
	--vhp-text-xs:  clamp(11px, 0.65vw + 7px, 14px);  /* lane status, small copy  (was 8-9px) */
	--vhp-text-sm:  clamp(12px, 0.7vw + 7px, 15px);   /* lane headings, list rows (was 9-11px) */
	--vhp-text-md:  clamp(14px, 0.85vw + 8px, 18px);  /* section headings         (was 12-15px) */
	--vhp-text-lg:  clamp(17px, 1.1vw + 9px, 22px);   /* widget titles            (was 15-17px) */
	--vhp-text-xl:  clamp(20px, 1.6vw + 10px, 28px);  /* story headline           (was 17px) */
	--vhp-gap:      clamp(8px, 0.6vw + 4px, 16px);
	--vhp-pad:      clamp(13px, 1vw + 6px, 22px);
	--vhp-radius:   clamp(12px, 0.4vw + 9px, 16px);
}

/* ---- 3. Vice Durumum (.vc-my-vice) ---- */
body.vice-home-layout .vc-my-vice {
	min-height: clamp(84px, 6vw + 40px, 108px);
	padding: var(--vhp-pad) clamp(14px, 1.2vw + 6px, 24px);
	gap: clamp(13px, 1vw + 6px, 22px);
	border-radius: var(--vhp-radius);
	transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

body.vice-home-layout .vc-my-vice:hover {
	border-color: rgba(129, 151, 187, 0.28);
	box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26);
}

body.vice-home-layout .vc-my-vice__mark,
body.vice-home-layout .vc-my-vice__avatar {
	width: clamp(56px, 3.2vw + 32px, 74px);
	height: clamp(56px, 3.2vw + 32px, 74px);
	font-size: var(--vhp-text-lg);
}

body.vice-home-layout .vc-my-vice__copy > span {
	font-size: var(--vhp-text-3xs);
	letter-spacing: 0.1em;
}

body.vice-home-layout .vc-my-vice__copy h2 {
	font-size: var(--vhp-text-lg);
	white-space: normal;
	overflow-wrap: anywhere;
}

body.vice-home-layout .vc-my-vice__copy p {
	font-size: var(--vhp-text-xs);
	white-space: normal;
}

body.vice-home-layout .vc-my-vice__switcher {
	flex-basis: clamp(112px, 8vw + 60px, 210px);
	max-width: clamp(140px, 9vw + 60px, 220px);
	height: clamp(26px, 1.6vw + 14px, 34px);
}

body.vice-home-layout .vc-my-vice__switcher select {
	font-size: var(--vhp-text-2xs);
}

body.vice-home-layout .vc-my-vice__balances {
	min-height: clamp(46px, 2.6vw + 26px, 60px);
	padding-inline: var(--vhp-gap);
}

body.vice-home-layout .vc-my-vice__balances strong {
	font-size: var(--vhp-text-sm);
}

body.vice-home-layout .vc-my-vice__balances small {
	font-size: var(--vhp-text-3xs);
}

body.vice-home-layout .vc-my-vice__actions a {
	min-height: clamp(34px, 2vw + 20px, 42px);
	padding-inline: clamp(12px, 1vw + 6px, 18px);
	font-size: var(--vhp-text-xs);
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.vice-home-layout .vc-my-vice__actions a:hover {
	transform: translateY(-1px);
}

body.vice-home-layout .vc-my-vice__actions a.is-primary:hover,
body.vice-home-layout .vc-my-vice__actions a.is-primary:focus-visible {
	box-shadow: 0 10px 24px rgba(189, 120, 152, 0.28);
}

/* ---- 4. Şehir Hayatı & Etkinlikler (.vc-city-life) ---- */
body.vice-home-layout .vc-city-life {
	padding: var(--vhp-pad);
	border-radius: var(--vhp-radius);
}

body.vice-home-layout .vc-city-life-kicker {
	font-size: var(--vhp-text-3xs);
	letter-spacing: 0.14em;
}

body.vice-home-layout .vc-city-life-header h2 {
	font-size: var(--vhp-text-lg);
	gap: clamp(9px, 0.6vw + 5px, 13px);
}

body.vice-home-layout .vc-city-life-header h2 > span {
	width: clamp(27px, 1.8vw + 14px, 38px);
	height: clamp(27px, 1.8vw + 14px, 38px);
	font-size: var(--vhp-text-sm);
}

body.vice-home-layout .vc-city-life-header p {
	max-width: min(46ch, 100%);
	font-size: var(--vhp-text-xs);
	line-height: 1.6;
}

body.vice-home-layout .vc-city-life-grid {
	gap: var(--vhp-gap);
}

body.vice-home-layout .vc-city-lane {
	min-height: clamp(250px, 12vw + 140px, 320px);
	padding: var(--vhp-pad);
	border-radius: clamp(10px, 0.3vw + 8px, 13px);
	transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

body.vice-home-layout .vc-city-lane:hover {
	background: rgba(17, 25, 38, 0.78);
	border-color: rgba(129, 151, 187, 0.24);
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

body.vice-home-layout .vc-city-lane-heading h3,
body.vice-home-layout .vc-feature-heading.vc-city-lane-heading h3 {
	font-size: var(--vhp-text-sm);
	gap: clamp(7px, 0.5vw + 4px, 10px);
}

body.vice-home-layout .vc-city-lane-heading h3 i {
	font-size: var(--vhp-text-xs);
}

body.vice-home-layout .vc-city-lane-status {
	padding: clamp(3px, 0.3vw + 2px, 5px) clamp(6px, 0.5vw + 3px, 9px);
	font-size: var(--vhp-text-3xs);
}

body.vice-home-layout .vc-city-empty-state strong {
	font-size: var(--vhp-text-xs);
}

body.vice-home-layout .vc-city-empty-state small {
	font-size: var(--vhp-text-2xs);
	line-height: 1.6;
}

body.vice-home-layout .vc-city-empty-icon {
	width: clamp(30px, 2vw + 16px, 40px);
	height: clamp(30px, 2vw + 16px, 40px);
	font-size: var(--vhp-text-sm);
}

body.vice-home-layout .vc-city-event-row {
	min-height: clamp(42px, 2.6vw + 24px, 54px);
	padding: clamp(5px, 0.5vw + 3px, 9px) clamp(7px, 0.6vw + 4px, 12px);
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.vice-home-layout .vc-city-event-row:hover {
	transform: translateX(2px);
}

body.vice-home-layout .vc-city-event-row strong {
	font-size: var(--vhp-text-xs);
	white-space: normal;
}

body.vice-home-layout .vc-city-event-row time {
	font-size: var(--vhp-text-3xs);
}

body.vice-home-layout .vc-city-lane-link {
	font-size: var(--vhp-text-2xs);
	padding-top: clamp(8px, 0.6vw + 4px, 12px);
}

/* ---- 4b. "Son Yarışlar" — race_history results. New component, styled
   from scratch to sit next to the events/news lanes it shares a column
   with (vc-city-lane). Podium rank badges reuse the existing gold/success
   accent tokens instead of inventing new colors. ---- */
body.vice-home-layout .vc-race-list {
	display: grid;
	gap: clamp(6px, 0.5vw + 3px, 10px);
	min-width: 0;
}

body.vice-home-layout .vc-race-row {
	min-width: 0;
	padding: clamp(8px, 0.7vw + 4px, 12px);
	background: rgba(8, 13, 22, 0.5);
	border: 1px solid var(--vice-border-faint);
	border-radius: 8px;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.vice-home-layout .vc-race-row:hover {
	background: rgba(18, 27, 41, 0.72);
	border-color: var(--vice-border-soft);
	transform: translateX(2px);
}

body.vice-home-layout .vc-race-row__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: clamp(6px, 0.5vw + 3px, 9px);
}

body.vice-home-layout .vc-race-row__event {
	overflow: hidden;
	color: var(--vice-text-soft);
	font-size: var(--vhp-text-xs);
	font-weight: 740;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.vice-home-layout .vc-race-row__date {
	flex: 0 0 auto;
	color: var(--vice-text-dim);
	font-size: var(--vhp-text-3xs);
	white-space: nowrap;
}

body.vice-home-layout .vc-race-podium {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vice-home-layout .vc-race-podium__item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

body.vice-home-layout .vc-race-podium__rank {
	display: inline-grid;
	flex: 0 0 auto;
	width: clamp(16px, 1vw + 9px, 20px);
	height: clamp(16px, 1vw + 9px, 20px);
	place-items: center;
	color: var(--vice-text-dim);
	background: rgba(129, 151, 187, 0.08);
	border-radius: 50%;
	font-size: var(--vhp-text-3xs);
	font-weight: 800;
}

body.vice-home-layout .vc-race-podium__item--1 .vc-race-podium__rank {
	color: #241a08;
	background: linear-gradient(145deg, #f2c579, #c99a4e);
}

body.vice-home-layout .vc-race-podium__item--2 .vc-race-podium__rank {
	color: #1a1e24;
	background: linear-gradient(145deg, #d7dee6, #a8b3c0);
}

body.vice-home-layout .vc-race-podium__item--3 .vc-race-podium__rank {
	color: #241a10;
	background: linear-gradient(145deg, #cf9a72, #a5714c);
}

body.vice-home-layout .vc-race-podium__item--1 .vc-race-podium__name {
	color: var(--vice-text);
	font-weight: 760;
}

body.vice-home-layout .vc-race-podium__name {
	overflow: hidden;
	color: var(--vice-text-muted);
	font-size: var(--vhp-text-xs);
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.vice-home-layout .vc-city-news .vc-news-entry-excerpt,
body.vice-home-layout .vc-city-news .vc-news-entry-copy > strong {
	font-size: var(--vhp-text-xs);
}

body.vice-home-layout .vc-city-news .vc-news-entry-meta small,
body.vice-home-layout .vc-city-news .vc-news-entry-meta time {
	font-size: var(--vhp-text-3xs);
}

body.vice-home-layout .vc-story-copy > span {
	font-size: var(--vhp-text-3xs);
}

body.vice-home-layout .vc-story-copy > strong {
	font-size: var(--vhp-text-xl);
}

body.vice-home-layout .vc-story-copy p {
	font-size: var(--vhp-text-xs);
	line-height: 1.6;
}

/* ---- 5. Vice Enleri (.vc-feature-rankings) ---- */
body.vice-home-layout .vc-feature-card {
	padding: var(--vhp-pad);
	border-radius: var(--vhp-radius);
}

body.vice-home-layout .vc-feature-heading h2 {
	font-size: var(--vhp-text-md);
}

body.vice-home-layout .vc-feature-heading-icon {
	width: clamp(22px, 1.4vw + 12px, 30px);
	height: clamp(22px, 1.4vw + 12px, 30px);
	font-size: var(--vhp-text-2xs);
}

body.vice-home-layout .vc-ranking-tabs button {
	font-size: var(--vhp-text-xs);
}

body.vice-home-layout .vc-ranking-compact-list li {
	min-height: clamp(38px, 2.4vw + 22px, 50px);
	padding-inline: clamp(4px, 0.4vw + 2px, 8px);
	gap: clamp(9px, 0.7vw + 5px, 14px);
	transition: background-color 180ms ease;
}

body.vice-home-layout .vc-ranking-compact-list li:hover {
	background: rgba(129, 151, 187, 0.06);
	border-radius: 8px;
}

body.vice-home-layout .vc-ranking-position {
	font-size: var(--vhp-text-sm);
}

body.vice-home-layout .vc-ranking-avatar {
	width: clamp(28px, 1.8vw + 16px, 38px);
	height: clamp(28px, 1.8vw + 16px, 38px);
	font-size: var(--vhp-text-xs);
}

body.vice-home-layout .vc-ranking-compact-list li > a {
	font-size: var(--vhp-text-sm);
}

body.vice-home-layout .vc-ranking-compact-list li > strong {
	font-size: var(--vhp-text-sm);
}

body.vice-home-layout .vc-ranking-compact-list li > strong small {
	font-size: var(--vhp-text-2xs);
}

body.vice-home-layout .vc-feature-more {
	min-height: clamp(30px, 1.8vw + 18px, 40px);
	font-size: var(--vhp-text-xs);
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.vice-home-layout .vc-feature-more:hover {
	transform: translateY(-1px);
}

/* ---- 5b. Server status strip (#sampServerCard). The IP "badge" and the
   online/offline dot were never actually styled by any loaded stylesheet
   (the files that defined them — vice-server-status.css,
   vice-legacy-structure.css — aren't linked from index.template.php), so
   they rendered as a bare native <button> and an invisible 0-size span:
   the "mavi/kaymış" badge the redesign is fixing. Everything below gives
   them real, on-brand styling instead of leaving them to the UA
   stylesheet. ---- */
body.vice-home-layout .server-card-container#sampServerCard {
	transition: border-color 220ms ease, box-shadow 220ms ease;
}

body.vice-home-layout .server-card-container#sampServerCard:hover {
	border-color: rgba(129, 151, 187, 0.28);
}

/* Player count + online dot */
body.vice-home-layout .server-card-container#sampServerCard .server-info-value.large {
	font-size: var(--vhp-text-xl);
	letter-spacing: -0.01em;
}

body.vice-home-layout .server-card-container#sampServerCard .server-status-dot {
	display: inline-block;
	position: relative;
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	margin-right: 6px;
	background: var(--vice-text-dim);
	border-radius: 50%;
}

body.vice-home-layout .server-card-container#sampServerCard .server-status-dot.is-online {
	background: var(--vice-success);
	box-shadow: 0 0 0 3px rgba(118, 170, 142, 0.18);
}

body.vice-home-layout .server-card-container#sampServerCard .server-status-dot.is-offline {
	background: var(--vice-error);
	box-shadow: 0 0 0 3px rgba(199, 120, 129, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
	body.vice-home-layout .server-card-container#sampServerCard .server-status-dot.is-online::after {
		content: "";
		position: absolute;
		inset: 0;
		background: inherit;
		border-radius: inherit;
		animation: vhp-dot-ping 2.2s ease-out infinite;
	}
}

body.vice-home-layout .server-card-container#sampServerCard .server-status-row {
	display: inline-flex;
	align-items: center;
}

body.vice-home-layout .server-card-container#sampServerCard .server-status-text {
	font-size: var(--vhp-text-2xs);
	font-weight: 700;
}

body.vice-home-layout .server-card-container#sampServerCard .server-status-text.is-offline {
	color: var(--vice-error);
}

body.vice-home-layout .server-card-container#sampServerCard .server-info-label {
	font-size: var(--vhp-text-3xs);
}

body.vice-home-layout .server-card-container#sampServerCard .server-info-value,
body.vice-home-layout .server-card-container#sampServerCard #gameMode {
	font-size: var(--vhp-text-sm);
}

/* IP "copy" chip — was an unstyled native <button> before this pass */
body.vice-home-layout .server-card-container#sampServerCard .server-ip-display {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: clamp(28px, 1.8vw + 16px, 34px);
	margin: 0;
	padding: 0 clamp(9px, 0.8vw + 4px, 13px);
	color: var(--vice-text-soft);
	font: inherit;
	font-size: var(--vhp-text-xs);
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	letter-spacing: 0.01em;
	white-space: nowrap;
	background: rgba(129, 151, 187, 0.08);
	border: 1px solid var(--vice-border-soft);
	border-radius: 999px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
}

body.vice-home-layout .server-card-container#sampServerCard .server-ip-display:hover {
	color: var(--vice-text);
	background: var(--vice-surface-hover);
	border-color: var(--vice-border-strong);
}

body.vice-home-layout .server-card-container#sampServerCard .server-ip-display:active {
	transform: scale(0.97);
}

body.vice-home-layout .server-card-container#sampServerCard .server-ip-display:focus-visible {
	outline: 2px solid rgba(115, 168, 178, 0.55);
	outline-offset: 2px;
}

body.vice-home-layout .server-card-container#sampServerCard .server-ip-display__icon {
	color: var(--vice-cyan);
	font-size: 0.9em;
	transition: color 180ms ease, transform 180ms ease;
}

body.vice-home-layout .server-card-container#sampServerCard .server-ip-display.is-copied {
	color: #f5f6f8;
	background: rgba(118, 170, 142, 0.22);
	border-color: rgba(118, 170, 142, 0.4);
}

body.vice-home-layout .server-card-container#sampServerCard .server-ip-display.is-copied .server-ip-display__icon {
	color: var(--vice-success);
	transform: scale(1.1);
}

/* Action buttons — give "Oyuna Gir" a clear primary role instead of three
   visually identical buttons. */
body.vice-home-layout .server-card-container#sampServerCard .server-action-btn {
	font-size: var(--vhp-text-xs);
	font-weight: 720;
	border-radius: clamp(8px, 0.3vw + 6px, 10px);
}

body.vice-home-layout .server-card-container#sampServerCard .server-action-btn.is-primary {
	color: #f5f6f8;
	background: linear-gradient(135deg, #9b647e, #8f5d75);
	border-color: rgba(189, 120, 152, 0.4);
	box-shadow: 0 8px 20px rgba(143, 93, 117, 0.28);
}

body.vice-home-layout .server-card-container#sampServerCard .server-action-btn.is-primary:hover,
body.vice-home-layout .server-card-container#sampServerCard .server-action-btn.is-primary:focus-visible {
	background: linear-gradient(135deg, #a66f8a, #98637d);
	border-color: rgba(189, 120, 152, 0.55);
	box-shadow: 0 10px 24px rgba(143, 93, 117, 0.36);
	transform: translateY(-1px);
}

body.vice-home-layout .server-card-container#sampServerCard .server-action-btn:not(.is-primary):hover {
	transform: translateY(-1px);
}

@keyframes vhp-dot-ping {
	0% {
		opacity: 0.55;
		transform: scale(1);
	}
	80%, 100% {
		opacity: 0;
		transform: scale(2.6);
	}
}

/* ---- 6. Micro-interactions: entrance motion + live-status pulse. Kept
   subtle and respects prefers-reduced-motion. ---- */
@media (prefers-reduced-motion: no-preference) {
	body.vice-home-layout .vc-my-vice,
	body.vice-home-layout .vc-city-life,
	body.vice-home-layout .vc-feature-rankings--wide {
		animation: vhp-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	body.vice-home-layout .vc-city-life-grid > .vc-city-lane:nth-child(1) { animation: vhp-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both; }
	body.vice-home-layout .vc-city-life-grid > .vc-city-lane:nth-child(2) { animation: vhp-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) 110ms both; }
	body.vice-home-layout .vc-city-life-grid > .vc-city-lane:nth-child(3) { animation: vhp-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both; }
	body.vice-home-layout .vc-city-life-grid > .vc-city-lane:nth-child(4) { animation: vhp-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) 210ms both; }

	body.vice-home-layout .vc-city-lane-status.is-live {
		animation: vhp-pulse 2.4s ease-in-out infinite;
	}
}

@keyframes vhp-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes vhp-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(117, 198, 163, 0.35);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(117, 198, 163, 0);
	}
}

/* ---- 7. Keyboard focus parity: the smaller the source font, the more
   focus rings matter for staff navigating via keyboard. ---- */
body.vice-home-layout .vc-city-lane-link:focus-visible,
body.vice-home-layout .vc-feature-more:focus-visible,
body.vice-home-layout .vc-ranking-compact-list li > a:focus-visible,
body.vice-home-layout .vc-my-vice__actions a:focus-visible {
	outline: 2px solid rgba(115, 168, 178, 0.55);
	outline-offset: 2px;
}