/**
 * Block styles.
 *
 * Loaded only on pages that render an evmc block. Every colour comes from the
 * theme's custom properties, so the plugin follows the site's light and dark
 * schemes without knowing anything about them.
 */

/* Fallbacks so the plugin still looks deliberate under a different theme.
   Scoped to :root rather than to a list of block class names. The list was a
   standing trap: any block added later that was not remembered got no values at
   all, so `fill: var(--_muted)` became invalid and fell back to inherited black -
   invisible on the dark background. That had already happened to .evmc-curve on
   the vehicle pages (the compare-page copy was fine only because it renders
   inside .evmc-compare) and to .evmc-ad. Declaring them once at the root cannot
   be forgotten. */
:root {
	--_base:    var(--evmc-base, #fff);
	--_surface: var(--evmc-surface, #f4f7f5);
	--_text:    var(--evmc-contrast, #0d1b17);
	--_muted:   var(--evmc-muted, #4d5f58);
	--_border:  var(--evmc-border, #dbe3df);
	--_accent:  var(--evmc-accent, #007a48);
	--_accent-soft: var(--evmc-accent-soft, #e2f6ec);
	--_radius:  var(--evmc-radius, 10px);
}

.evmc-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }

/* --------------------------------------------------------------------------
   Unit switch
   -------------------------------------------------------------------------- */

.evmc-unit-switch {
	display: inline-flex;
	border: 1px solid var(--_border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--_base);
}
.evmc-unit-switch button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--_muted);
	font: inherit;
	font-size: .8125rem;
	padding: .35rem .85rem;
	cursor: pointer;
	line-height: 1.4;
}
.evmc-unit-switch button.is-active {
	background: var(--_accent);
	color: var(--_base);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Model page
   -------------------------------------------------------------------------- */

.evmc-verdict {
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--_text);
	border-left: 3px solid var(--_accent);
	padding-left: 1rem;
	margin-block: 1.25rem 0;
	max-width: 46rem;
}

.evmc-keyfigs {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	background: var(--_border);
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	overflow: hidden;
}
.evmc-keyfigs__item {
	background: var(--_base);
	padding: .9rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.evmc-keyfigs__item dt {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--_muted);
	font-weight: 600;
}
.evmc-keyfigs__item dd {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}
.evmc-keyfigs__item dd .evmc-source { font-size: .75rem; font-weight: 400; }
.evmc-keyfigs__item--score { background: var(--_accent-soft); }
.evmc-keyfigs__outof { font-size: .8125rem; font-weight: 500; color: var(--_muted); }
.evmc-unit-switch-wrap { margin-top: .75rem; }

.evmc-cardfigs {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .85rem;
	font-size: .8125rem;
	color: var(--_muted);
}
.evmc-cardfigs li { display: flex; flex-direction: column; }
.evmc-cardfigs li span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; }
.evmc-cardfigs .evmc-val { color: var(--_text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Spec sheet
   -------------------------------------------------------------------------- */

.evmc-specsheet { margin-top: 3rem; }
.evmc-specsheet__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--_text);
	padding-bottom: .6rem;
}
.evmc-specsheet__head h2 { margin: 0; }
.evmc-specsheet__group { margin: 2rem 0 .25rem; font-size: 1.0625rem; }
.evmc-specsheet__note { margin: 0 0 .75rem; color: var(--_muted); font-size: .8125rem; max-width: 62ch; }

.evmc-spectable {
	min-width: 34rem; width: 100%; border-collapse: collapse; font-size: .9375rem; }
.evmc-spectable th,
.evmc-spectable td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--_border); vertical-align: top; }
.evmc-spectable th[scope="row"] { font-weight: 600; width: 42%; }
.evmc-spectable td { font-variant-numeric: tabular-nums; }
.evmc-spectable__help { display: block; font-weight: 400; font-size: .75rem; color: var(--_muted); margin-top: .15rem; }
.evmc-spectable__src { width: 22%; }

.evmc-val--empty { color: var(--_muted); }
.evmc-source { font-size: .75rem; color: var(--_muted); }
.evmc-source a { color: var(--_accent); }

/* --------------------------------------------------------------------------
   Degradation chart
   -------------------------------------------------------------------------- */

.evmc-degradation { margin-top: 3rem; }
.evmc-degradation__intro { color: var(--_muted); font-size: .875rem; max-width: 62ch; }
.evmc-degradation__svg { width: 100%; min-width: 300px; max-width: 640px; height: auto; }
.evmc-degradation__axis  { stroke: var(--_border); stroke-width: 1.4; }
.evmc-degradation__line  { fill: none; stroke: var(--_accent); stroke-width: 3; stroke-linejoin: round; }
.evmc-degradation__dot   { fill: var(--_accent); }
.evmc-degradation__tick  { fill: var(--_muted); font-size: 16px; text-anchor: middle; }
.evmc-degradation__value { fill: var(--_text); font-size: 17px; font-weight: 700; text-anchor: middle; }
/* Scale, fill and warranty floor. Label sizes are in viewBox units: at a
   phone width the 640-unit chart draws at about 350px, so 15px here is 8px on
   screen - the same tier the tick labels were already sized for. The chart used to be one line floating in
   a blank box; the grid gives the eye a scale, the fill gives the line a
   body, and the dashed floor turns the empty band under a healthy pack into
   what it actually is - the distance to a warranty claim. Stop colours are
   set here rather than in the SVG so the fill follows the colour scheme. */
.evmc-degradation__grid       { stroke: var(--_border); stroke-width: 1; stroke-dasharray: 3 5; }
.evmc-degradation__gridlabel  { fill: var(--_muted); font-size: 15px; text-anchor: end; }
.evmc-degradation__area       { fill: url(#evmc-deg-fill); }
.evmc-degradation__stop-a     { stop-color: var(--_accent); stop-opacity: .26; }
.evmc-degradation__stop-b     { stop-color: var(--_accent); stop-opacity: 0; }
.evmc-degradation__floor      { stroke: var(--evmc-warn, #8a5200); stroke-width: 1.5; stroke-dasharray: 6 5; }
.evmc-degradation__floorlabel { fill: var(--evmc-warn, #8a5200); font-size: 15px; font-weight: 600; text-anchor: end; }
.evmc-degradation__warranty {
	background: var(--_surface);
	border-radius: var(--_radius);
	padding: .75rem 1rem;
	font-size: .875rem;
	color: var(--_muted);
}

/* --------------------------------------------------------------------------
   Sources
   -------------------------------------------------------------------------- */

.evmc-sources { margin-top: 3rem; }
.evmc-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.evmc-sources li {
	border-left: 2px solid var(--_border);
	padding-left: .8rem;
	font-size: .875rem;
}
.evmc-sources__fields { display: block; color: var(--_muted); font-size: .75rem; margin-top: .1rem; }

.evmc-comparecta { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.evmc-comparecta a {
	display: inline-block;
	border: 1px solid var(--_border);
	border-radius: 999px;
	padding: .4rem .9rem;
	font-size: .875rem;
	text-decoration: none;
}
.evmc-comparecta a:hover { border-color: var(--_accent); color: var(--_accent); }

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */

.evmc-ticker {
	border-block: 1px solid var(--_border);
	overflow: hidden;
	padding: .6rem 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.evmc-ticker__track {
	display: flex;
	gap: 2.5rem;
	white-space: nowrap;
	animation: evmc-ticker 48s linear infinite;
	width: max-content;
}
/* Duraklatma SADECE gercekten imlec olan cihazlarda. Eskiden bu kural medyasizdi
   ve dokunmatik ekranda kalici tuzak kuruyordu: telefonda bir seride baglantiya
   dokunmak hem taklit :hover durumunu birakiyor hem de :focus-within'i tetikliyor,
   ve parmagi "baska yere goturmek" diye bir sey olmadigi icin serit BIR DAHA
   hic donmuyordu. Masaustunde fare uzaklasinca cozuluyordu, o yuzden yalnizca
   mobilde gorunen bir kusurdu. */
@media (hover: hover) and (pointer: fine) {
	.evmc-ticker:hover .evmc-ticker__track { animation-play-state: paused; }
}
/* Klavye kullanicisi seridi durdurabilmeli — ama :focus-within dokunusla da
   tetiklendigi icin :focus-visible'a daraltiliyor: fare/dokunma odagi degil,
   yalnizca klavye odagi duraklatir. */
.evmc-ticker:has(:focus-visible) .evmc-ticker__track { animation-play-state: paused; }
.evmc-ticker a {
	display: inline-flex;
	gap: .5rem;
	align-items: baseline;
	font-size: .875rem;
	text-decoration: none;
	color: var(--_muted);
}
.evmc-ticker a strong { color: var(--_text); }
.evmc-ticker__sep { color: var(--_border); margin-inline: .35rem; }
@keyframes evmc-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* A looping marquee is exactly the kind of motion this setting exists for, so the
   animation goes. What must NOT happen is what used to: `flex-wrap:wrap` with a
   2.5rem gap turned fifteen items into a ~1500px wall of text on a phone, so the
   accessibility fallback was the worst version of the page - served precisely to
   the people who asked for less motion. Now it becomes a swipeable row instead:
   no animation, no wall, and the content is still all reachable. */
@media (prefers-reduced-motion: reduce) {
	.evmc-ticker__track {
		animation: none;
		width: auto;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		gap: 1.25rem;
		padding-inline: .25rem;
	}
	.evmc-ticker { -webkit-mask-image: none; mask-image: none; overflow: visible; }
	/* The duplicate half exists only to make the loop seamless; with no loop it
	   is fifteen redundant links in the tab order and on screen. */
	.evmc-ticker__track [aria-hidden="true"] { display: none; }
}

.evmc-pairs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: .75rem;
	margin-top: 1rem;
}
.evmc-pairs__item {
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	padding: 1rem 1.1rem;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	transition: border-color .15s, transform .15s;
}
/* Hover keeps the ordinary frame. Recolouring the border to the accent made the
   hovered card read as a selected or focused box rather than as one card of eight
   - it looked like the page had picked one for you. The lift alone is enough of an
   affordance, and the underline is suppressed because the theme's generic a:hover
   rule would otherwise underline the title inside this card-sized link.
   Keyboard focus is deliberately NOT touched: :focus-visible still draws the
   browser's own ring, which is the one case where a frame SHOULD appear. */
.evmc-pairs__item:hover { transform: translateY(-2px); }
.evmc-pairs__item:hover .evmc-pairs__names,
.evmc-pairs__item:hover .evmc-pairs__names * { text-decoration: none; }
.evmc-pairs__names { font-weight: 600; }
.evmc-pairs__names em { color: var(--_muted); font-style: normal; font-weight: 400; }
.evmc-pairs__meta { font-size: .75rem; color: var(--_muted); text-transform: uppercase; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */

.evmc-compare__controls {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.evmc-compare__pickers { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.evmc-compare__picker { position: relative; display: inline-flex; align-items: center; }
.evmc-compare__picker select {
	font: inherit;
	font-size: .9375rem;
	padding: .45rem 2rem .45rem .75rem;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: var(--_base);
	color: inherit;
	max-width: 16rem;
}
.evmc-compare__remove {
	position: absolute;
	right: -.4rem;
	top: -.4rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	border: 1px solid var(--_border);
	background: var(--_base);
	color: var(--_muted);
	font-size: .75rem;
	line-height: 1;
	cursor: pointer;
}
.evmc-compare__add {
	border: 1px dashed var(--_border);
	border-radius: var(--_radius);
	background: transparent;
	color: var(--_muted);
	font: inherit;
	font-size: .875rem;
	padding: .45rem .85rem;
	cursor: pointer;
}
.evmc-compare__add:hover { border-color: var(--_accent); color: var(--_accent); }
.evmc-compare__toggles { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.evmc-compare__diffonly { font-size: .8125rem; color: var(--_muted); display: inline-flex; align-items: center; gap: .35rem; }

.evmc-compare__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .9375rem;
	min-width: 40rem;
}
/* Docks under the sticky site header rather than behind it. `top:0` used to
   resolve against the viewport - .evmc-scroll-x only scrolls horizontally, so it
   is not a vertical containing block - which put the car-name row and the site
   header in the same band, and z-index 20 beat z-index 2. The car names simply
   vanished while you scrolled the table. */
.evmc-compare__table thead th {
	position: sticky;
	top: var(--evmc-header-h, 3.5rem);
	z-index: 2;
	background: var(--_base);
	border-bottom: 2px solid var(--_text);
	padding: .75rem;
	text-align: left;
	vertical-align: bottom;
}
.evmc-compare__table thead th a { text-decoration: none; font-size: 1.0625rem; }
.evmc-compare__brand {
	display: block;
	font-size: .6875rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--_muted);
}
/* The first column stays put while the rest scrolls, so a row never loses
   its label on a phone. */
.evmc-compare__table :is(th, td):first-child {
	position: sticky;
	left: 0;
	background: var(--_base);
	z-index: 1;
}
.evmc-compare__table thead th:first-child { z-index: 3; }

.evmc-compare__table tbody th,
.evmc-compare__table tbody td {
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--_border);
	text-align: left;
	vertical-align: top;
}
.evmc-compare__table tbody td { font-variant-numeric: tabular-nums; }
.evmc-compare__help { display: block; font-weight: 400; font-size: .75rem; color: var(--_muted); margin-top: .15rem; max-width: 34ch; }

.evmc-compare__grouprow th {
	background: var(--_surface);
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--_muted);
	padding: .5rem .75rem;
	position: sticky;
	left: 0;
}

.evmc-compare__table td.is-best {
	background: var(--_accent-soft);
	font-weight: 700;
}
/* Colour alone must not carry the meaning. */
.evmc-compare__table td.is-best .evmc-val::after {
	content: "";
	display: inline-block;
	width: .5em; height: .5em;
	margin-left: .4em;
	border-radius: 50%;
	background: var(--_accent);
	vertical-align: .05em;
}

.evmc-compare__table tr.is-same { display: none; }
.evmc-compare__legend { font-size: .8125rem; color: var(--_muted); margin-top: 1rem; max-width: 70ch; }

.evmc-tag {
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	padding: .1rem .4rem;
	border-radius: 999px;
	background: var(--_surface);
	color: var(--_muted);
	vertical-align: .1em;
}
.evmc-tag--estimate { background: var(--evmc-warn-soft, #fdf3e2); color: var(--evmc-warn, #8a5200); }
.evmc-tag--good     { background: var(--_accent-soft); color: var(--_accent); }

/* --------------------------------------------------------------------------
   Calculator
   -------------------------------------------------------------------------- */

.evmc-tco { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) {
	.evmc-tco { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
	.evmc-tco__assumptions { grid-column: 1 / -1; }
}

.evmc-tco__form { display: grid; gap: 1rem; }
.evmc-tco__fieldset {
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	padding: 1rem 1.1rem 1.2rem;
	margin: 0;
	display: grid;
	gap: .8rem;
}
.evmc-tco__fieldset legend {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	color: var(--_muted);
	padding: 0 .35rem;
}
.evmc-tco__regions { display: flex; gap: .4rem; flex-wrap: wrap; }
.evmc-tco__region { font-size: .875rem; display: inline-flex; align-items: center; gap: .3rem; }
.evmc-tco__hint { font-size: .75rem; color: var(--_muted); margin: 0; }

.evmc-tco__field { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; align-items: center; font-size: .875rem; }
.evmc-tco__field > span { grid-column: 1 / -1; color: var(--_muted); }
.evmc-tco__field input,
.evmc-tco__field select {
	font: inherit;
	padding: .4rem .55rem;
	border: 1px solid var(--_border);
	border-radius: 6px;
	background: var(--_base);
	color: inherit;
	width: 100%;
	min-width: 0;
}
.evmc-tco__field input[type="range"] { padding: 0; }
.evmc-tco__field em,
.evmc-tco__field output { font-style: normal; font-size: .75rem; color: var(--_muted); white-space: nowrap; }

.evmc-tco__headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1px; background: var(--_border); border: 1px solid var(--_border); border-radius: var(--_radius); overflow: hidden; }
.evmc-tco__stat { background: var(--_base); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
.evmc-tco__stat span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--_muted); font-weight: 600; }
.evmc-tco__stat strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.evmc-tco__stat--accent { background: var(--_accent-soft); }
.evmc-tco__stat--accent strong { color: var(--_accent); }

.evmc-tco__perdistance,
.evmc-tco__breakeven { font-size: .9375rem; margin: 1rem 0 0; }
.evmc-tco__table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin-top: 1rem; min-width: 30rem; }
.evmc-tco__table :is(th, td) { padding: .5rem .7rem; border-bottom: 1px solid var(--_border); text-align: left; font-variant-numeric: tabular-nums; }
.evmc-tco__table td.is-best { color: var(--_accent); font-weight: 700; }

.evmc-tco__secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.evmc-tco__secondary > div { background: var(--_surface); border-radius: var(--_radius); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.evmc-tco__secondary span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--_muted); font-weight: 600; }
.evmc-tco__secondary strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.evmc-tco__secondary em { font-style: normal; font-size: .75rem; color: var(--_muted); }

.evmc-tco__assumptions { border-top: 1px solid var(--_border); padding-top: 1rem; }
.evmc-tco__assumptions summary { cursor: pointer; font-weight: 600; font-size: .9375rem; }
.evmc-tco__assumptions p { font-size: .875rem; color: var(--_muted); max-width: 70ch; }

.evmc-note {
	background: var(--_surface);
	border-left: 3px solid var(--_border);
	padding: .7rem 1rem;
	font-size: .875rem;
	color: var(--_muted);
}
.evmc-empty { color: var(--_muted); }

/* Charging curve ------------------------------------------------------- */
.evmc-curve { margin-block: var(--wp--preset--spacing--50, 2.5rem); }
.evmc-curve__intro { color: var(--_muted); font-size: 0.95rem; max-width: 62ch; }
.evmc-curve__svg { width: 100%; min-width: 320px; max-width: 660px; height: auto; }
.evmc-curve__axis   { stroke: var(--_border); stroke-width: 1.4; }
.evmc-curve__grid   { stroke: var(--_border); stroke-width: 1.2; opacity: 0.45; }
.evmc-curve__marker { stroke: var(--_border); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: 0.9; }
.evmc-curve__line   { fill: none; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.evmc-curve__tick,
.evmc-curve__ylabel { fill: var(--_muted); font-size: 16px; }
.evmc-curve__tick   { text-anchor: middle; }
.evmc-curve__ylabel { text-anchor: end; }
.evmc-curve__axistitle { fill: var(--_muted); font-size: 16px; font-weight: 600; }
.evmc-curve__legend { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.85rem; color: var(--_muted); }
.evmc-curve__key { display: flex; align-items: center; gap: 0.4rem; }
.evmc-curve__swatch { width: 0.85rem; height: 0.2rem; border-radius: 2px; display: inline-block; }

/* Advertisement ---------------------------------------------------------
   Deliberately visible as an ad: its own rule above, its own label, and
   generous space either side. A unit that blends into the article is the
   thing that produces accidental clicks. */
.evmc-ad { margin-block: var(--wp--preset--spacing--50, 2.5rem); padding-block-start: 0.9rem; border-top: 1px solid var(--_border); }
.evmc-ad__label { display: block; margin-bottom: 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--_muted); }
.evmc-ad__unit { display: block; min-height: 0; }
/* Reklam DOLMADIYSA blok tamamen gizlenir. AdSense doldurmadigi birime
   data-ad-status="unfilled" yazar; hesap incelemedeyken bu her sayfada oluyordu ve
   "Advertisement" etiketi + bos bir alan kaliyordu (kullanici telefondan bildirdi,
   2026-09-09). Google'in kendi onerdigi secici bu; politikaya uygun. */
.evmc-ad__unit[data-ad-status="unfilled"] { display: none !important; height: 0 !important; }
.evmc-ad:has(.evmc-ad__unit[data-ad-status="unfilled"]) { display: none; }
/* Canlida olculen asil durum (2026-09-09): AdSense birime data-ad-status YAZMADAN
   inline "height:280px" koyuyor ve hesap incelemedeyken hic doldurmuyor — 280 px bos
   alan. Cozum: birim DOLANA kadar (data-ad-status="filled") yuksekligi sifir, etiket ve
   cerceve gizli; genislik korunur ki AdSense olcup doldurabilsin. Dolunca inline
   yukseklik geri gelir ve blok kendiliginden acilir. display:none KULLANILMAZ:
   sifir genislikli birime AdSense hic istek atmaz. */
.evmc-ad__unit:not([data-ad-status="filled"]) { height: 0 !important; min-height: 0 !important; overflow: hidden; }
.evmc-ad:not(:has(.evmc-ad__unit[data-ad-status="filled"])) { margin-block: 0; padding-block-start: 0; border-top: 0; }
.evmc-ad:not(:has(.evmc-ad__unit[data-ad-status="filled"])) .evmc-ad__label { display: none; }

/* Ranking tables -------------------------------------------------------- */
.evmc-ranking { min-width: 34rem; width: 100%; border-collapse: collapse; font-size: .9375rem; }
.evmc-ranking caption { text-align: left; }
.evmc-ranking th, .evmc-ranking td { padding: .7rem .6rem; border-bottom: 1px solid var(--_border); text-align: left; vertical-align: top; }
.evmc-ranking thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--_muted); border-bottom: 2px solid var(--_border-firm, var(--_border)); }
.evmc-ranking__rank { width: 2.5rem; color: var(--_muted); font-variant-numeric: tabular-nums; }
.evmc-ranking__car { font-weight: 600; }
.evmc-ranking__car a { text-decoration: none; }
.evmc-ranking__car a:hover { text-decoration: underline; }
.evmc-ranking__brand { display: block; font-weight: 400; font-size: .75rem; color: var(--_muted); text-transform: uppercase; letter-spacing: .04em; }
/* The ranked column is the point of the table, so it is the one that is heavy. */
.evmc-ranking__value { font-weight: 700; white-space: nowrap; }
/* The source credit sits in the same cell as the value and inherits its
   nowrap, so "17 min" and "EV Database" ran together as one word. The credit
   goes on its own line, in the credit's own weight, and may wrap. */
.evmc-ranking__value .evmc-source { display: block; white-space: normal; font-weight: 400; margin-top: .2rem; }
/* Same treatment in the charging table, so a credited time reads the same way
   everywhere: the number first, the source under it. */
.evmc-charging__time .evmc-source { display: block; white-space: normal; font-weight: 400; margin-top: .2rem; }
.evmc-ranking tbody tr:first-child .evmc-ranking__value { color: var(--_accent); }
.evmc-ranking__secondary { color: var(--_muted); white-space: nowrap; }
.evmc-ranking__note { font-size: .8125rem; color: var(--_muted); max-width: 62ch; margin-top: .6rem; }

/* Charging time and cost ------------------------------------------------ */
.evmc-charging { margin-block: var(--wp--preset--spacing--50, 2.5rem); }
.evmc-charging__table { min-width: 34rem; width: 100%; border-collapse: collapse; font-size: .9375rem; }
.evmc-charging__table caption { text-align: left; }
.evmc-charging__table th, .evmc-charging__table td { padding: .7rem .6rem; border-bottom: 1px solid var(--_border); text-align: left; vertical-align: top; }
.evmc-charging__table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--_muted); border-bottom: 2px solid var(--_border); }
.evmc-charging__table th[scope="row"] { font-weight: 600; }
/* The row a reader came for gets the emphasis. */
.evmc-charging__table .is-headline { background: var(--_accent-soft); }
.evmc-charging__table .is-compare th[scope="row"] { font-weight: 400; color: var(--_muted); font-style: italic; }
.evmc-charging__time, .evmc-charging__cost { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.evmc-charging__note { display: block; font-weight: 400; font-size: .75rem; color: var(--_muted); margin-top: .15rem; }
.evmc-charging__assumptions { font-size: .8125rem; color: var(--_muted); max-width: 68ch; margin-top: .8rem; }

/* --------------------------------------------------------------------------
   Comparison summary
   Sits above the table and says what differs. Styled as prose rather than as a
   panel: it is an explanation of the table, not a competing widget.
   -------------------------------------------------------------------------- */

.evmc-cmpsum {
	border-left: 3px solid var(--_accent);
	padding: .1rem 0 .1rem 1rem;
	margin: 0 0 1.5rem;
}
.evmc-cmpsum__title { font-size: 1.1rem; margin: 0 0 .5rem; }
.evmc-cmpsum__list { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.evmc-cmpsum__list li { line-height: 1.5; }
.evmc-cmpsum__note {
	font-size: .8rem;
	color: var(--_muted);
	margin: .75rem 0 0;
}
@media (max-width: 40rem) {
	.evmc-cmpsum { padding-left: .75rem; }
	.evmc-cmpsum__list { padding-left: 1rem; }
}

/* --------------------------------------------------------------------------
   EPA dataset table
   403 rows, server-rendered. The height cap turns the page from an endless
   scroll into a browsable panel without hiding anything from a crawler: the
   rows are all in the DOM, the container just scrolls.
   -------------------------------------------------------------------------- */

.evmc-epa { margin: 1.5rem 0 2rem; }
.evmc-epa__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-bottom: .75rem;
}
.evmc-epa__controls input[type="search"],
.evmc-epa__controls select {
	font: inherit;
	font-size: .9375rem;
	padding: .45rem .7rem;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: var(--_base);
	color: var(--_text);
	min-height: 44px;
}
.evmc-epa__controls input[type="search"] { min-width: 16rem; flex: 1 1 16rem; }
.evmc-epa__count { margin: 0 0 0 auto; font-size: .8125rem; color: var(--_muted); }

.evmc-epa .evmc-scroll-x { max-height: 34rem; overflow-y: auto; border: 1px solid var(--_border); border-radius: var(--_radius); }
.evmc-epa__table { min-width: 44rem; }
.evmc-epa__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--_surface);
}
.evmc-epa__table th[scope="row"] { font-weight: 600; }
.evmc-epa__my { color: var(--_muted); font-weight: 400; font-size: .75rem; margin-left: .35rem; }
.evmc-epa__full {
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--_accent);
	margin-left: .3rem;
}
.evmc-epa__table th.is-sortable { cursor: pointer; }
.evmc-epa__table th.is-sortable:focus-visible { outline: 2px solid var(--_accent); outline-offset: -2px; }
.evmc-epa__table th[aria-sort]::after { content: " \2193"; }
.evmc-epa__table th[aria-sort="ascending"]::after { content: " \2191"; }
.evmc-epa__note { font-size: .8125rem; color: var(--_muted); margin-top: .75rem; max-width: 70ch; }

@media (max-width: 40rem) {
	.evmc-epa__count { margin-left: 0; width: 100%; }
	.evmc-epa .evmc-scroll-x { max-height: 26rem; }
}