/* GölgeliYorum — çekirdek frontend stilleri (temada genişletilir) */

.gy-dosya {
	--gy-bg: #ffffff;
	--gy-yazi: #14181d;
	--gy-soluk: #6b7480;
	--gy-cizgi: #e4e7eb;
	--gy-kart: #f7f8f9;
	--gy-radius: 12px;
}

@media (prefers-color-scheme: dark) {
	.gy-dosya {
		--gy-bg: #0f1216;
		--gy-yazi: #e8eaed;
		--gy-soluk: #9aa3ad;
		--gy-cizgi: #262b31;
		--gy-kart: #171b20;
	}
}

[data-theme="dark"] .gy-dosya {
	--gy-bg: #0f1216;
	--gy-yazi: #e8eaed;
	--gy-soluk: #9aa3ad;
	--gy-cizgi: #262b31;
	--gy-kart: #171b20;
}

.gy-dosya { background: var(--gy-bg); color: var(--gy-yazi); }

.gy-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 16px;
}

@media (min-width: 960px) {
	.gy-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.gy-bolum {
	background: var(--gy-kart);
	border: 1px solid var(--gy-cizgi);
	border-radius: var(--gy-radius);
	padding: 20px;
	margin-bottom: 20px;
}

.gy-bolum-baslik { font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 4px; }
.gy-bolum-not, .gy-dipnot { color: var(--gy-soluk); font-size: .82rem; margin: 0 0 16px; }
.gy-dipnot { margin: 12px 0 0; }

/* Bölüm 1 — çerçeve barları (JS kütüphanesi yok) */
.gy-bar-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gy-bar-satir { display: grid; grid-template-columns: 28px minmax(90px, 150px) 1fr auto; align-items: center; gap: 10px; }
.gy-bar-ikon {
	width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center; font-size: .9rem;
	background: color-mix(in srgb, var(--gy-renk) 18%, transparent);
}
.gy-bar-ad { font-weight: 600; font-size: .9rem; }
.gy-bar-track { background: var(--gy-cizgi); border-radius: 99px; height: 6px; overflow: hidden; }
.gy-bar-fill { display: block; height: 100%; width: var(--gy-oran); background: var(--gy-renk); border-radius: 99px; }
.gy-bar-sayi { text-align: right; line-height: 1.1; }
.gy-bar-sayi strong { display: block; font-size: 1.05rem; }
.gy-bar-sayi small { color: var(--gy-soluk); font-size: .68rem; }

/* Bölüm 2 — kaynaklar */
.gy-kaynak-liste { list-style: none; margin: 0; padding: 0; }
.gy-kaynak {
	display: grid; grid-template-columns: 72px 1fr; gap: 14px;
	padding: 16px 0; border-top: 1px solid var(--gy-cizgi);
}
.gy-kaynak:first-child { border-top: 0; }
.gy-kaynak-logo img { max-width: 100%; height: auto; }
.gy-kaynak-ad { font-weight: 700; font-size: .8rem; }
.gy-kaynak-baslik { font-size: .95rem; margin: 0 0 4px; line-height: 1.35; }
.gy-kaynak-baslik a { color: inherit; text-decoration: none; }
.gy-kaynak-baslik a:hover { text-decoration: underline; }
.gy-kaynak-meta { color: var(--gy-soluk); font-size: .78rem; margin-bottom: 8px; }
.gy-kaynak-git { grid-column: 2; font-size: .78rem; text-decoration: none; }

.gy-etiketler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gy-etiket-baslik { color: var(--gy-soluk); font-size: .64rem; text-transform: uppercase; width: 100%; }
.gy-etiket {
	font-size: .68rem; font-weight: 700; text-transform: uppercase;
	padding: 3px 8px; border-radius: 4px; text-decoration: none;
	color: #fff; background: var(--gy-renk);
}

/* Bölüm 3 — tablo */
.gy-tablo { width: 100%; border-collapse: collapse; font-size: .85rem; }
.gy-tablo th, .gy-tablo td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--gy-cizgi); }
.gy-tablo thead th { color: var(--gy-soluk); font-size: .72rem; text-transform: uppercase; }
.gy-odak { font-weight: 600; }

/* Bölüm 4 — Gölgeli Nokta */
.gy-golgeli-nokta { background: #14181d; color: #e8eaed; border-color: #14181d; }
.gy-golgeli-nokta .gy-bolum-baslik { color: #fff; }
.gy-vurgu-cumle { margin-top: 14px; }

/* Bölüm 5 — sayaçlar */
.gy-sayaclar { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.gy-sayaclar strong { display: block; font-size: 1.3rem; }
.gy-sayaclar span { color: var(--gy-soluk); font-size: .72rem; }
.gy-zaman-cizgisi { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .8rem; margin: 0; }
.gy-zaman-cizgisi dt { color: var(--gy-soluk); }
.gy-zaman-cizgisi dd { margin: 0; }

/* Bölüm 6 */
.gy-bagli-liste { list-style: none; margin: 0; padding: 0; }
.gy-bagli-liste li { border-bottom: 1px solid var(--gy-cizgi); }
.gy-bagli-liste a { display: block; padding: 12px 0; text-decoration: none; color: inherit; font-size: .88rem; }

.gy-tumu {
	width: 100%; margin-top: 12px; padding: 10px;
	background: transparent; color: inherit;
	border: 1px solid var(--gy-cizgi); border-radius: 8px; cursor: pointer;
	font-size: .82rem;
}

.gy-metodoloji-not { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; color: var(--gy-soluk); font-size: .8rem; }