/**
 * Advenway Vites Hesaplayıcı — "Advenway Tech Core" tasarım dili.
 *
 * ÖLÇÜLER TASARIMDAN BİREBİR ALINMIŞTIR ve px cinsindendir (rem değil):
 * tema kök font boyutunu değiştirirse ölçekler kaymasın diye.
 *
 *   Tipografi   display-lg 48/1.1/800 · headline-lg 32/1.2/700
 *               headline-md 24/1.3/600 · body-lg 18 · body-md 16
 *               label-md 14/0.05em · label-sm 12/0.08em   (hepsi mono)
 *   Boşluk      birim 4 · gutter 16 · margin 24 · kap 1280
 *   Yarıçap     4px (tasarım: "evrensel 4px")
 *   Derinlik    gölge YOK — tonal katman + 1px saç teli kenar
 *
 * Kurallar:
 *  - Tüm seçiciler .advvites altında; tema stillerine sızmaz, temadan da
 *    sızıntı almamak için kontrollerin zemin/renk/font'u açıkça yazılır.
 *  - Panel zeminleri OPAK. Tasarımdaki cam efekti (rgba + backdrop-filter)
 *    kaldırıldı: bazı ortamlarda arkayı beyaz örnekleyip hücreleri okunmaz
 *    yapıyordu. Aynı renk opak yazıldı — görünüm aynı, risk yok.
 *  - Tablo yatay taşmaz: kendi kaydırma kabında taşar, sayfa gövdesi kaymaz.
 *  - Odak halkası hiçbir yerde kaldırılmaz.
 *
 * Düzen kırılımı container query iledir (viewport değil): araç temanın dar
 * yazı sütununda da durabiliyor, orada viewport genişliği yanıltıcı olurdu.
 *
 * ÖZGÜLLÜK NOTU — neden bazı seçiciler `.advvites h3.advvites__x` gibi yazılı:
 * Tema (CheerUp), yazı içeriğine ETİKET tabanlı kurallar uyguluyor:
 *     .post-content h2/h3 { margin: 1.2em 0 1em }
 *     .post-content p     { margin: 0 0 1.6em }
 *     tr:nth-child(odd) td { background: #fafafa }
 * Bunlar modülün içine de işliyor. Tek sınıflı kurallarımız (0,1,0) temanın
 * (0,1,1) kurallarını yenemiyor; üstelik tema CSS'i eklentiden SONRA
 * yüklendiği için beraberlikte de tema kazanıyor. Bu yüzden etiketle
 * eşleşen her kural kök sınıfla + etiketle yazılır → (0,2,1).
 * Aynı kuralın duyarlı (container query) karşılığı da AYNI özgüllükte
 * olmalı, yoksa dar ekranda küçültme uygulanmaz.
 * Deneme sayfası bu tema kurallarını taklit eder; regresyon oradan yakalanır.
 */

.advvites {
	/* --- Yüzeyler (tasarım paleti) --- */
	--adv-zemin:   #0f1113;   /* surface-deep */
	--adv-yuzey:   #111417;   /* surface / surface-dim */
	--adv-kap:     #1d2024;   /* surface-container */
	--adv-vurgulu: #2a2e35;   /* surface-accent */
	--adv-cam:     #1f2227;   /* glass-panel'in opak karşılığı */

	/* --- Metin --- */
	--adv-metin:   #e1e2e8;   /* on-surface — KOYU panellerin içinde */
	--adv-soluk:   #e2bfb0;   /* on-surface-variant — koyu panel içinde */
	--adv-sayfa:   #1c1f23;   /* AÇIK sayfa zemininde duran metin */

	/* --- Vurgu --- */
	--adv-turuncu:    #ff6b00;   /* primary-container — eylem rengi */
	--adv-turuncu-ac: #ffb693;   /* primary */
	--adv-turuncu-ko: #572000;   /* on-primary-container */
	--adv-mavi:       #00a2fd;   /* secondary-container */
	--adv-mavi-ac:    #98cbff;   /* secondary */
	--adv-mavi2:      #059eff;   /* tertiary-container */

	/* --- Durum --- */
	--adv-iyi:  #22c55e;
	--adv-orta: #eab308;
	--adv-kotu: #ef4444;

	/* --- Çizgiler --- */
	--adv-cizgi:  rgba( 255, 255, 255, 0.10 );
	--adv-cizgi2: rgba( 255, 255, 255, 0.05 );

	--adv-r: 4px;

	--adv-baslik: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
	--adv-govde:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--adv-mono:   "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	box-sizing: border-box;
	margin: 0 0 32px;
	/* ZEMİN YOK — bilinçli.
	   Önce burada koyu bir dolgu vardı ve araç, sayfanın o şeridini uçtan uca
	   siyaha boyuyordu. Koyu yüzeyi zaten paneller taşıyor; kartların arası ve
	   sağ/sol kenarlar sitenin kendi zemininde kalsın. */
	background: transparent;
	color: var(--adv-sayfa);
	font-family: var(--adv-govde);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Koyu yüzeyler kendi metin rengini kurar: kök artık AÇIK zemine göre
   ayarlı olduğu için içeride miras alınacak renk yanlış olurdu. */
.advvites__panel,
.advvites__vurgu,
.advvites__statlar,
.advvites__tablo,
.advvites__kiyasTablo {
	color: var(--adv-metin);
}

/* Tam genişlik: araç temanın yazı sütunundan taşar. Kenar boşlukları JS ile
   piksel piksel ayarlanır (100vw kaydırma çubuğu kadar taşar); JS yoksa
   sütunun içinde kalır — bozulmaz. */
.advvites--tam {
	max-width: none;
}

.advvites__ic {
	container-type: inline-size;
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px;
}

/* Sütun modunda iç dolgu yok: paneller yazının metniyle tam hizalansın. */
.advvites--sutun > .advvites__ic {
	padding: 0;
}

.advvites *,
.advvites *::before,
.advvites *::after {
	box-sizing: inherit;
}

.advvites :focus-visible {
	outline: 2px solid var(--adv-turuncu);
	outline-offset: 2px;
}

.advvites__gizli {
	display: none !important;
}

.advvites__gizliMetin {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.advvites__ikon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.advvites__ikon--kucuk {
	width: 16px;
	height: 16px;
}

.advvites__ipucuIkon {
	display: inline-flex;
	align-items: center;
	color: var(--adv-soluk);
	cursor: help;
}

.advvites__ipucu {
	display: block;
	margin-top: 8px;
	color: var(--adv-soluk);
	font-family: var(--adv-govde);
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.88;
}

.advvites p.advvites__uyari--blok {
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var(--adv-turuncu);
	border-radius: var(--adv-r);
	background: rgba( 255, 107, 0, 0.08 );
	color: var(--adv-sayfa);
	font-size: 16px;
}

/* -------------------------------------------------------------------------
 * Kafa — rozet + büyük başlık (tasarımdaki hero şeridi)
 * ---------------------------------------------------------------------- */

.advvites__kafa {
	margin-bottom: 24px;
	text-align: center;
}

/* Rozet ve başlık artık AÇIK zeminde duruyor: tasarımın koyu zemine göre
   seçilmiş renkleri burada okunmazdı, aynı ailenin koyu tonları kullanılıyor. */
.advvites__etiketRozet {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 4px 12px;
	border: 1px solid var(--adv-turuncu);
	background: rgba( 255, 107, 0, 0.10 );
	color: #9c3d00;
	font-family: var(--adv-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* BAŞLIKLARDA ZORLANMIŞ BÜYÜK HARF YOK.
   Maket başlığı hep büyük harfle gösteriyor, ama sitede CheerUp'ın başlıklara
   zorladığı büyük harf bilinçli olarak kapatılmıştı: başlıklar yazıldığı gibi
   görünür. Modül de bu kurala uyar. Büyük harf yalnızca gerçek başlık OLMAYAN
   mono arayüz etiketlerinde (sütun adı, düğme, rozet) kalır. */
.advvites h2.advvites__baslik {
	margin: 0;
	color: var(--adv-sayfa);
	font-family: var(--adv-baslik);
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: none;
}

@container (max-width: 700px) {
	.advvites h2.advvites__baslik {
		font-size: 32px;
	}
}

/* -------------------------------------------------------------------------
 * Üst çubuk: sekmeler + hesaplama modu
 * ---------------------------------------------------------------------- */

.advvites__cubuk {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 16px;
}

.advvites__sekmeler {
	display: inline-flex;
	padding: 4px;
	border-radius: var(--adv-r);
	background: var(--adv-kap);
}

.advvites__sekme {
	min-height: 40px;
	padding: 8px 16px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s ease;
}

.advvites__sekme:hover {
	color: var(--adv-metin);
}

.advvites__sekme--aktif,
.advvites__sekme--aktif:hover {
	border-bottom-color: var(--adv-turuncu);
	color: var(--adv-turuncu-ac);
}

.advvites__yon {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	padding: 8px;
	border: 1px solid var(--adv-cizgi2);
	border-radius: var(--adv-r);
	background: var(--adv-kap);
}

.advvites__yonEtiket {
	padding: 0 8px;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.advvites__yonDugme {
	min-height: 32px;
	padding: 4px 12px;
	border: 0;
	border-radius: 2px;
	background: var(--adv-vurgulu);
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.advvites__yonDugme:hover {
	background: rgba( 255, 255, 255, 0.10 );
	color: var(--adv-metin);
}

.advvites__yonDugme--aktif,
.advvites__yonDugme--aktif:hover {
	background: var(--adv-turuncu);
	color: var(--adv-turuncu-ko);
}

/* -------------------------------------------------------------------------
 * 12 sütunluk ızgara — 4 kurulum / 8 sonuç
 * ---------------------------------------------------------------------- */

.advvites__izgara {
	display: grid;
	gap: 16px;
}

.advvites__sol,
.advvites__sag {
	display: grid;
	gap: 16px;
	align-content: start;
	min-width: 0;
}

@container (min-width: 1000px) {
	/* İki satır: kurulum üstte, sütun kılavuzu altında; sonuç sütunu ikisinin
	   yanında baştan sona uzanır. Böylece tablo uzun olduğunda solda kalan ölü
	   alanı kılavuz kartları doldurur.
	   Satır 1 `max-content`: kurulumun kendi boyu kadar. Satır 2 `auto`: kalanı
	   alır, kartlar `align-self:start` ile hemen kurulumun altına yapışır —
	   tablo daha uzunsa aralarında boşluk açılmaz. */
	.advvites__izgara {
		grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
		grid-template-rows: max-content auto;
	}
	.advvites__sol      { grid-column: 1 / span 4; grid-row: 1; }
	.advvites__bilgiler { grid-column: 1 / span 4; grid-row: 2; align-self: start; margin-top: 0; }
	.advvites__sag      { grid-column: 5 / span 8; grid-row: 1 / span 2; }
}

/* -------------------------------------------------------------------------
 * Paneller
 * ---------------------------------------------------------------------- */

.advvites__panel {
	padding: 24px;
	border: 1px solid var(--adv-cizgi);
	border-radius: var(--adv-r);
	background: var(--adv-cam);
	min-width: 0;
}

/* Kurulum bloğu: sistem paneli + hedef kontrolü tek kart gibi görünür. */
.advvites__kurulum {
	display: grid;
	gap: 0;
}

.advvites__sistem {
	border-left: 4px solid var(--adv-turuncu);
	border-bottom: 0;
	border-radius: var(--adv-r) var(--adv-r) 0 0;
}

.advvites__hedef {
	border-left: 4px solid var(--adv-turuncu);
	border-top: 0;
	border-radius: 0 0 var(--adv-r) var(--adv-r);
	padding-top: 0;
}

.advvites h3.advvites__panelBas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 24px;
	color: var(--adv-metin);
	font-family: var(--adv-baslik);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.advvites__panelBasAlt {
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Form alanları
 * ---------------------------------------------------------------------- */

.advvites__alanlar {
	display: grid;
	gap: 24px;
}

.advvites__alan label {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-bottom: 8px;
	color: var(--adv-turuncu-ac);
	font-family: var(--adv-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
}

.advvites__alan select,
.advvites__alan input[type="text"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--adv-cizgi);
	border-radius: 2px;
	background: var(--adv-zemin);
	color: var(--adv-metin);
	font-family: var(--adv-mono);
	font-size: 14px;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}

.advvites__alan select {
	padding-right: 34px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2bfb0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px 16px;
}

.advvites__alan select:hover,
.advvites__alan input[type="text"]:hover {
	border-color: rgba( 255, 255, 255, 0.22 );
}

.advvites__alan select:focus,
.advvites__alan input[type="text"]:focus {
	border-color: var(--adv-mavi);
}

.advvites__alan select option,
.advvites__alan select optgroup {
	background: var(--adv-kap);
	color: var(--adv-metin);
}

.advvites__alan--dar {
	max-width: 200px;
}

/* -------------------------------------------------------------------------
 * Hedef kadans / hız
 * ---------------------------------------------------------------------- */

.advvites__kadans,
.advvites__hiz {
	padding-top: 24px;
	border-top: 1px solid var(--adv-cizgi2);
}

.advvites__hedefBas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.advvites__hedefBas label {
	display: flex;
	gap: 6px;
	align-items: center;
	margin: 0;
	color: var(--adv-turuncu-ac);
	font-family: var(--adv-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.advvites__hedefDeger {
	color: var(--adv-turuncu);
	font-family: var(--adv-mono);
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
}

.advvites__hedefSatir {
	display: flex;
	gap: 12px;
	align-items: center;
}

.advvites__hedefSatir input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 4px;
	margin: 0;
	border-radius: 8px;
	background: var(--adv-vurgulu);
	accent-color: var(--adv-turuncu);
	cursor: pointer;
}

.advvites__hedefSatir input[type="number"] {
	flex: 0 0 72px;
	width: 72px;
	min-height: 40px;
	padding: 6px 8px;
	border: 1px solid var(--adv-cizgi);
	border-radius: 2px;
	background: var(--adv-zemin);
	color: var(--adv-metin);
	font-family: var(--adv-mono);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.advvites__hedefSatir input[type="number"]:focus {
	border-color: var(--adv-mavi);
}

/* Canlı hesap göstergesi — tasarımın "status dot" bileşeni. */
.advvites p.advvites__canli {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 24px 0 0;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}

.advvites__nokta {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--adv-iyi);
	animation: advvitesNabiz 2.4s ease-in-out infinite;
}

@keyframes advvitesNabiz {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 34, 197, 94, 0.55 ); }
	50%      { box-shadow: 0 0 0 4px rgba( 34, 197, 94, 0 ); }
}

.advvites__hesapla {
	width: 100%;
	margin-top: 12px;
	padding: 16px;
	border: 0;
	border-radius: 2px;
	background: var(--adv-turuncu);
	box-shadow: 0 0 15px rgba( 255, 107, 0, 0.3 );
	color: var(--adv-turuncu-ko);
	font-family: var(--adv-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.advvites__hesapla:hover {
	filter: brightness( 1.1 );
}

.advvites__hesapla:active {
	transform: scale( 0.98 );
}

/* -------------------------------------------------------------------------
 * Hata kutusu
 * ---------------------------------------------------------------------- */

.advvites__sistemHata {
	margin-top: 24px;
	padding: 12px;
	border: 1px solid rgba( 239, 68, 68, 0.45 );
	border-radius: 2px;
	background: rgba( 239, 68, 68, 0.10 );
	color: #ffb4ab;
	font-family: var(--adv-govde);
	font-size: 14px;
	line-height: 1.5;
}

.advvites__sistemHata span {
	display: block;
}

/* -------------------------------------------------------------------------
 * Sol sütun özet kartı
 * ---------------------------------------------------------------------- */

.advvites__ozet {
	min-width: 0;
}

.advvites__statlar {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--adv-cizgi2);
	border-radius: var(--adv-r);
	background: var(--adv-vurgulu);
}

.advvites__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.advvites__stat--genis {
	grid-column: 1 / -1;
	padding-top: 8px;
	border-top: 1px solid var(--adv-cizgi);
}

.advvites__statEtiket {
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.advvites__statDeger {
	color: var(--adv-metin);
	font-family: var(--adv-mono);
	font-size: 24px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.advvites__statDeger--iyi { color: var(--adv-iyi); }

.advvites__statAlt {
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	opacity: 0.88;
}

/* -------------------------------------------------------------------------
 * Vurgu kartları (sağ üst üçlü)
 * ---------------------------------------------------------------------- */

.advvites__vurgular {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax( 0, 1fr );
}

@container (min-width: 620px) {
	.advvites__vurgular {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.advvites__vurgu {
	padding: 24px;
	border: 1px solid var(--adv-cizgi);
	border-radius: var(--adv-r);
	background: var(--adv-cam);
	min-width: 0;
}

.advvites__vurguEtiket {
	display: block;
	margin-bottom: 4px;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.advvites__vurguSayi {
	display: flex;
	gap: 4px;
	align-items: baseline;
	flex-wrap: wrap;
}

.advvites__vurguDeger {
	font-family: var(--adv-mono);
	font-size: 36px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.advvites__vurguBirim {
	color: var(--adv-metin);
	font-family: var(--adv-mono);
	font-size: 14px;
	letter-spacing: 0.05em;
	/* Tasarımda 0.5; ölçüldüğünde kontrast 4,15 çıkıyor (AA sınırı 4,5).
	   0.65 görsel olarak aynı "ikincil birim" hissini verir, okunur kalır. */
	opacity: 0.65;
}

.advvites__vurguAlt {
	display: block;
	margin-top: 8px;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.88;
}

/* Çubuk: sistemin en hafif–en ağır aralığı, sabit cetvelde. */
.advvites__bar {
	position: relative;
	display: block;
	height: 4px;
	margin-top: 16px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.05 );
}

.advvites__bar i {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 999px;
	background: currentColor;
}

.advvites__vurgu--turuncu { color: var(--adv-turuncu); }
.advvites__vurgu--mavi    { color: var(--adv-mavi2); }
.advvites__vurgu--acik    { color: var(--adv-mavi); }
.advvites__vurgu--iyi     { color: var(--adv-iyi); }
.advvites__vurgu--orta    { color: var(--adv-orta); }
.advvites__vurgu--kotu    { color: var(--adv-kotu); }

.advvites__vurgu .advvites__vurguDeger {
	color: currentColor;
}

/* -------------------------------------------------------------------------
 * Tablo paneli
 * ---------------------------------------------------------------------- */

.advvites__tabloPanel {
	padding: 0;
	overflow: hidden;
	border-top: 2px solid var(--adv-turuncu);
}

.advvites__tabloBas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: center;
	padding: 16px 24px;
	border-bottom: 1px solid var(--adv-cizgi);
	background: var(--adv-vurgulu);
}

/* h3 — başlık olduğu için doğal yazımda kalır (bkz. .advvites__baslik notu). */
.advvites h3.advvites__tabloAd {
	margin: 0;
	color: var(--adv-metin);
	font-family: var(--adv-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.4;
	text-transform: none;
}

.advvites__lejant {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	color: var(--adv-metin);
	font-family: var(--adv-govde);
	font-size: 10px;
	line-height: 1.4;
}

.advvites__lejant span {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.advvites__lejantNokta {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
}

.advvites__lejantNokta--iyi   { background: var(--adv-iyi); }
.advvites__lejantNokta--orta  { background: var(--adv-orta); }
.advvites__lejantNokta--kotu  { background: var(--adv-kotu); }
.advvites__lejantNokta--mavi  { background: var(--adv-mavi); }

.advvites__gorunum {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--adv-r);
	background: var(--adv-zemin);
	margin-left: auto;
}

.advvites__gorunumDugme {
	min-height: 32px;
	padding: 4px 12px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
	cursor: pointer;
}

.advvites__gorunumDugme:hover {
	color: var(--adv-metin);
}

.advvites__gorunumDugme--aktif,
.advvites__gorunumDugme--aktif:hover {
	background: var(--adv-turuncu);
	color: var(--adv-turuncu-ko);
}

/* Metrik çipleri (yalnız matris görünümünde) */
.advvites__metrik {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 24px 0;
}

.advvites__cip {
	min-height: 32px;
	padding: 4px 12px;
	border: 1px solid var(--adv-cizgi);
	border-radius: 2px;
	background: var(--adv-kap);
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

.advvites__cip:hover {
	border-color: var(--adv-mavi);
	color: var(--adv-metin);
}

.advvites__cip--aktif,
.advvites__cip--aktif:hover {
	border-color: var(--adv-mavi);
	background: rgba( 0, 162, 253, 0.15 );
	color: var(--adv-mavi-ac);
	font-weight: 700;
}

.advvites__tabloBaslik {
	padding: 16px 24px 0;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	opacity: 0.85;
}

.advvites__tabloBaslik strong {
	color: var(--adv-turuncu-ac);
	font-weight: 700;
}

.advvites__tabloKaydir {
	margin-top: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Değişim vurgusu */
@keyframes advvitesParlat {
	0%   { box-shadow: inset 0 0 0 0 rgba( 255, 107, 0, 0 ); }
	25%  { box-shadow: inset 0 0 0 2px rgba( 255, 107, 0, 0.55 ); }
	100% { box-shadow: inset 0 0 0 0 rgba( 255, 107, 0, 0 ); }
}

.advvites__parlat {
	border-radius: var(--adv-r);
	animation: advvitesParlat 0.65s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.advvites__parlat { animation: none; }
	.advvites__nokta  { animation: none; }
	.advvites__hesapla:active { transform: none; }
}

/* -------------------------------------------------------------------------
 * Tablolar — dikey çizgi yok, satırlar 1px saç teliyle ayrılır
 * ---------------------------------------------------------------------- */

/* NOT — kök sınıf (.advvites) neden önekleniyor?
   CheerUp'ın style.css'i yazı içeriğindeki tablolara zebra deseni basıyor:
   `tr:nth-child(odd) td { background: #fafafa }`. Özgüllüğü (0,1,2) —
   bizim `.advvites__tablo td` ile TAM AYNI; tema CSS'i bizden sonra
   yüklendiği için o kazanıyor ve koyu tablonun bir satırı beyaz çıkıyordu.
   Kök sınıfı öneklemek özgüllüğü (0,2,2)'ye çıkarıyor; !important gerekmez. */

.advvites .advvites__tablo {
	width: 100%;
	border-collapse: collapse;
	background: var(--adv-cam);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.advvites .advvites__tablo th,
.advvites .advvites__tablo td {
	padding: 16px;
	border: 0;
	border-bottom: 1px solid var(--adv-cizgi2);
	background: var(--adv-cam);
	color: var(--adv-metin);
	text-align: right;
	white-space: nowrap;
}

.advvites .advvites__tablo thead th {
	padding: 12px 16px;
	border-bottom: 1px solid var(--adv-cizgi);
	background: var(--adv-yuzey);
	color: var(--adv-soluk);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.advvites .advvites__tablo tbody tr:hover td,
.advvites .advvites__tablo tbody tr:hover th {
	background: #24272d;
}

.advvites .advvites__tablo tbody tr:last-child td {
	border-bottom: 0;
}

/* --- Liste görünümü --- */

.advvites__tablo--liste th:first-child,
.advvites__tablo--liste td:first-child {
	padding-left: 24px;
	text-align: left;
}

.advvites__tablo--liste th:last-child,
.advvites__tablo--liste td:last-child {
	padding-right: 24px;
}

.advvites__disli {
	font-weight: 700;
}

.advvites .advvites__grupSatir th {
	padding: 6px 24px;
	border-top: 1px solid var(--adv-cizgi);
	border-bottom: 1px solid var(--adv-cizgi);
	background: #2c3037;
	/* Tasarımdaki #ff6b00, koyu zeminde 10px'te 2,6 kontrast veriyor —
	   okunmuyordu. Aynı ailenin açık tonu 8,2'ye çıkarıyor. */
	color: var(--adv-turuncu-ac);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
}

/* Çapraz zincir satırı: BASTIRILMIŞ ama okunur.
   Önceden `opacity: .4` vardı ve satırın tamamını (rakamlar dahil) 2,3
   kontrasta düşürüyordu — "renkler soluk kalıyor"un kaynağı buydu.
   Artık şeffaflık yok: ayrı zemin + bilinçli olarak sönük ama AA'yı geçen
   metin. İşaret yükünü ⚠ ikonu ile amber dişli etiketi taşıyor. */
.advvites .advvites__tablo tbody tr.advvites__caprazSatir td {
	background: #262a31;
	color: #adb2bd;
}

.advvites .advvites__tablo tbody tr.advvites__caprazSatir td.advvites__hucreVurgu {
	color: #dd9a63;
}

.advvites .advvites__tablo tbody tr.advvites__caprazSatir .advvites__disli {
	color: var(--adv-orta);
}

.advvites__caprazIkon {
	width: 14px;
	height: 14px;
	margin-left: 4px;
	vertical-align: -2px;
	color: var(--adv-orta);
}

.advvites__tablo td.advvites__hucreVurgu { color: var(--adv-turuncu-ac); }
.advvites .advvites__tablo td.advvites__hucreSoluk { color: #c2ab9f; }

/* --- Matris görünümü --- */

.advvites .advvites__tablo--matris th,
.advvites .advvites__tablo--matris td {
	padding: 10px 12px;
	text-align: center;
}

.advvites .advvites__tablo--matris tbody th {
	background: var(--adv-yuzey);
	font-weight: 700;
}

.advvites__kose {
	color: var(--adv-soluk);
	font-weight: 500 !important;
}

.advvites__tablo--matris td.advvites__capraz {
	opacity: 0.35;
	text-decoration: line-through;
}

/* Rahat kadans bandı (Hız → Kadans modu) */
.advvites__tablo td.advvites__bandIyi  { background: #17331f; color: #6ee7a3; font-weight: 700; }
.advvites__tablo td.advvites__bandOrta { background: #322a11; color: #f5d76e; }
.advvites__tablo td.advvites__bandKotu { background: #331a19; color: #ff9d95; }

.advvites p.advvites__altNot {
	margin: 0;
	padding: 16px 24px;
	border-top: 1px solid var(--adv-cizgi2);
	color: var(--adv-soluk);
	font-family: var(--adv-govde);
	font-size: 14px;
	line-height: 1.6;
}

.advvites__altNot strong {
	color: var(--adv-metin);
}

.advvites__adimlar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 16px 24px;
	border-top: 1px solid var(--adv-cizgi2);
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.advvites__adimBaslik {
	color: var(--adv-turuncu-ac);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.advvites__adimlar i {
	color: rgba( 255, 255, 255, 0.18 );
	font-style: normal;
}

/* -------------------------------------------------------------------------
 * Karşılaştırma
 * ---------------------------------------------------------------------- */

.advvites__kiyas {
	padding: 0;
	overflow: hidden;
	border-top: 2px solid var(--adv-mavi);
}

/* h3 — başlık olduğu için doğal yazımda kalır. */
.advvites h3.advvites__kiyasBaslik {
	margin: 0;
	padding: 16px 24px;
	border-bottom: 1px solid var(--adv-cizgi);
	background: var(--adv-vurgulu);
	color: var(--adv-metin);
	font-family: var(--adv-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: none;
}

.advvites .advvites__kiyasTablo {
	width: 100%;
	border-collapse: collapse;
	background: var(--adv-cam);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Zebra deseni burada da bastırılıyor — bkz. yukarıdaki not. */
.advvites .advvites__kiyasTablo th,
.advvites .advvites__kiyasTablo td {
	padding: 16px;
	border: 0;
	border-bottom: 1px solid var(--adv-cizgi2);
	background: var(--adv-cam);
	color: var(--adv-metin);
	text-align: right;
}

.advvites .advvites__kiyasTablo thead th {
	padding: 12px 16px;
	border-bottom: 1px solid var(--adv-cizgi);
	background: var(--adv-yuzey);
	color: var(--adv-soluk);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.advvites__kiyasTablo th:first-child,
.advvites__kiyasTablo td:first-child {
	padding-left: 24px;
	text-align: left;
}

.advvites__kiyasTablo td:last-child,
.advvites__kiyasTablo th:last-child {
	padding-right: 24px;
}

.advvites__kiyasTablo tbody th {
	font-family: var(--adv-govde);
	font-size: 14px;
	font-weight: 400;
	white-space: normal;
}

.advvites__kiyasTablo tbody td {
	font-weight: 700;
	white-space: nowrap;
}

.advvites__kiyasTablo tbody tr:last-child td,
.advvites__kiyasTablo tbody tr:last-child th {
	border-bottom: 0;
}

.advvites__rozet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	vertical-align: -3px;
}

.advvites__rozet--a { background: var(--adv-mavi);    color: #00243c; }
.advvites__rozet--b { background: var(--adv-turuncu); color: var(--adv-turuncu-ko); }

/* Kazanan hücre. Zemin OPAK: saydam tint bazı ortamlarda arkayı yanlış
   örnekleyip hücreyi beyazlatıyordu. */
.advvites__kiyasTablo tr.advvites__a-iyi td:nth-child(2) { background: #0c2c42; color: var(--adv-mavi-ac); }
.advvites__kiyasTablo tr.advvites__b-iyi td:nth-child(3) { background: #3a2109; color: var(--adv-turuncu-ac); }

/* Hız spektrumu */
.advvites__spektrum {
	padding: 24px;
	border-top: 1px solid var(--adv-cizgi2);
	color: var(--adv-metin);
}

.advvites__spektrumBaslik {
	margin-bottom: 8px;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.advvites__spektrum svg {
	display: block;
	width: 100%;
	height: 66px;
}

.advvites__spektrumEksen {
	display: flex;
	justify-content: space-between;
	color: var(--adv-soluk);
	font-family: var(--adv-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.advvites__spektrumLejant {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	font-family: var(--adv-mono);
	font-size: 12px;
}

.advvites__spektrumLejant i {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 50%;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * Kavram kartları
 * ---------------------------------------------------------------------- */

/* Artık ızgaranın bir öğesi: aralığı ızgara boşluğu (16px) veriyor,
   ayrıca margin verilmez — yoksa 16+24=40px'lik tutarsız bir boşluk çıkar. */
.advvites__bilgiler {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax( 0, 1fr );
}

/* Tek sütunlu düzende (sonuçların altında, tam genişlikte) üçlü şerit. */
@container (min-width: 700px) {
	.advvites__bilgiler {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* 1000px üstünde kartlar dar SOL SÜTUNUN içine geçiyor (bkz. ızgara bloğu):
   orada üçlü şerit sıkışırdı, alt alta dizilirler.
   Bu blok 700'lünün ARDINDAN gelmeli — aynı özgüllükte sonuncu kazanır. */
@container (min-width: 1000px) {
	.advvites__bilgiler {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.advvites h3.advvites__bilgiBas {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 16px;
	color: var(--adv-metin);
	font-family: var(--adv-baslik);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
}

.advvites__bilgiBas .advvites__ikon {
	color: var(--adv-turuncu);
}

.advvites .advvites__bilgi p {
	margin: 0;
	color: var(--adv-soluk);
	font-family: var(--adv-govde);
	font-size: 16px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Bilgi / SEO metni
 * ---------------------------------------------------------------------- */

.advvites__makale {
	margin-top: 24px;
	padding: 48px;
	border: 1px solid var(--adv-cizgi2);
	border-radius: var(--adv-r);
	background: var(--adv-kap);
}

.advvites__makale > * {
	max-width: 768px;
}

.advvites .advvites__makale h2,
.advvites .advvites__makale h3 {
	color: var(--adv-metin);
	font-family: var(--adv-baslik);
	text-transform: none;
}

.advvites .advvites__makale h2 {
	margin: 0 0 24px;
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.advvites .advvites__makale h3 {
	margin: 32px 0 16px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.advvites .advvites__makale p {
	margin: 0 0 24px;
	color: var(--adv-soluk);
	font-family: var(--adv-govde);
	font-size: 16px;
	line-height: 1.6;
}

.advvites__makale strong {
	color: var(--adv-metin);
	font-weight: 600;
}

.advvites__formul {
	padding: 16px;
	border-left: 4px solid var(--adv-turuncu);
	border-radius: 2px;
	background: var(--adv-zemin);
	color: var(--adv-turuncu-ac) !important;
	font-family: var(--adv-mono) !important;
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: 0.05em;
}

@container (max-width: 700px) {
	.advvites__makale {
		padding: 24px;
	}
	.advvites .advvites__makale h2 {
		font-size: 32px;
	}
}

/* -------------------------------------------------------------------------
 * Dar kap
 * ---------------------------------------------------------------------- */

@container (max-width: 520px) {
	.advvites__statlar {
		grid-template-columns: minmax( 0, 1fr );
	}

	.advvites__gorunum {
		margin-left: 0;
	}

	.advvites__vurguDeger {
		font-size: 32px;
	}

	.advvites h3.advvites__panelBas,
	.advvites h3.advvites__bilgiBas {
		font-size: 20px;
	}
}

@media (max-width: 640px) {
	.advvites__ic {
		padding: 16px;
	}

	/* Dokunmatikte parmak hedefi */
	.advvites__sekme,
	.advvites__yonDugme,
	.advvites__gorunumDugme,
	.advvites__cip {
		min-height: 44px;
	}

	.advvites__yon {
		width: 100%;
	}

	.advvites__yonEtiket {
		flex: 1 0 100%;
	}

	.advvites__yonDugme {
		flex: 1 1 0;
	}

	.advvites__tablo th,
	.advvites__tablo td {
		padding: 12px;
	}

	.advvites__tablo--liste th:first-child,
	.advvites__tablo--liste td:first-child { padding-left: 16px; }
	.advvites__tablo--liste th:last-child,
	.advvites__tablo--liste td:last-child { padding-right: 16px; }
}