/* ==========================================================================
   Seviye Yayınları — 2026 bileşen katmanı
   --------------------------------------------------------------------------
   Tasarım raporundaki önerilerin uygulaması. Modern görünüm katmanının
   üzerine biner; klasik görünümde yüklenmez.

   1.  Tasarım belirteçleri (tipografik ölçek, boşluk tabanı, kademe renkleri)
   2.  Bölüm ritmi ve başlıklar
   3.  Düğmeler
   4.  Hero
   5.  Kademe seçimi
   6.  Ürün kartı
   7.  Duyuru şeridi
   8.  Kurumsal özet
   9.  İkonlar
   10. Yükleniyor ve boş durumlar
   11. Mobil alt çubuk
   12. Hareket
   ========================================================================== */

/* ---------- 1. Tasarım belirteçleri ---------- */
.seviye-skin-modern {
	/* Tipografik ölçek — altı basamak, ara değer yok */
	--ts-display: clamp(34px, 5.2vw, 52px);
	--ts-h1:      clamp(27px, 3.4vw, 34px);
	--ts-h2:      clamp(21px, 2.4vw, 24px);
	--ts-h3:      18px;
	--ts-govde:   16px;
	--ts-kucuk:   13px;

	/* Boşluk — 4 piksel tabanı */
	--b1:  4px;
	--b2:  8px;
	--b3:  12px;
	--b4:  16px;
	--b6:  24px;
	--b8:  32px;
	--b12: 48px;
	--b16: 64px;
	--b20: 80px;

	/* Kademe renkleri — PHP tarafından satır içi de geçilir */
	--kademe-ana:     var(--sv-blue);
	--kademe-koyu:    var(--sv-blue-600);
	--kademe-yumusak: var(--sv-blue-050);
}

/* Gövde metni 16 pikselde sabit, satır uzunluğu sınırlı */
.seviye-skin-modern .hak-yazi,
.seviye-skin-modern .seviye-icerik {
	font-size: var(--ts-govde);
	line-height: 1.7;
}
.seviye-skin-modern .hak-yazi > p,
.seviye-skin-modern .seviye-icerik > p,
.seviye-skin-modern .hak-yazi > ul,
.seviye-skin-modern .seviye-icerik > ul {
	max-width: 72ch;
}

/* ---------- 2. Bölüm ritmi ---------- */
.seviye-skin-modern .sv-bolum { padding: var(--b12) 0 0; }
.seviye-skin-modern .sv-bolum:last-of-type { padding-bottom: var(--b8); }

.seviye-skin-modern .sv-bolum-basi {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--b3);
	margin-bottom: var(--b6);
}

.seviye-skin-modern .sv-bolum-baslik {
	font-family: var(--sv-font-head);
	font-weight: 800;
	font-size: var(--ts-h2);
	line-height: 1.2;
	letter-spacing: -.022em;
	color: var(--sv-ink);
	margin: 0 0 var(--b6);
}
.seviye-skin-modern .sv-bolum-basi .sv-bolum-baslik { margin-bottom: 0; }

.seviye-skin-modern .sv-bolum-link {
	display: inline-flex;
	align-items: center;
	gap: var(--b2);
	font-family: var(--sv-font-head);
	font-weight: 700;
	font-size: 14px;
	color: var(--sv-blue);
	white-space: nowrap;
}
.seviye-skin-modern .sv-bolum-link:hover { color: var(--sv-orange); }
.seviye-skin-modern .sv-bolum-link svg { transition: transform .18s var(--sv-ease); }
.seviye-skin-modern .sv-bolum-link:hover svg { transform: translateX(3px); }

/* ---------- 3. Düğmeler ---------- */
.seviye-skin-modern .sv-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--b2);
	height: 46px;
	padding: 0 var(--b6);
	border-radius: var(--sv-r-pill);
	font-family: var(--sv-font-head);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .005em;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: transform .18s var(--sv-ease), box-shadow .18s var(--sv-ease),
	            background .18s var(--sv-ease), color .18s var(--sv-ease);
}
.seviye-skin-modern .sv-dugme:hover { transform: translateY(-2px); text-decoration: none; }
.seviye-skin-modern .sv-dugme:active { transform: translateY(0); }

.seviye-skin-modern .sv-dugme-birincil {
	background: linear-gradient(135deg, var(--sv-orange) 0%, var(--sv-orange-600) 100%);
	color: #fff;
	box-shadow: 0 4px 14px rgba(245,130,32,.32);
}
.seviye-skin-modern .sv-dugme-birincil:hover { color: #fff; box-shadow: 0 8px 22px rgba(245,130,32,.42); }

.seviye-skin-modern .sv-dugme-ikincil {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.55);
}
.seviye-skin-modern .sv-dugme-ikincil:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.seviye-skin-modern .sv-dugme-cizgili {
	background: transparent;
	color: var(--sv-blue);
	border-color: var(--sv-line);
}
.seviye-skin-modern .sv-dugme-cizgili:hover {
	border-color: var(--sv-blue);
	background: var(--sv-blue-050);
	color: var(--sv-blue);
}

/* ---------- 4. Hero ---------- */
.seviye-skin-modern .sv-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(105deg, #06345f 0%, var(--sv-blue) 58%, #1076cf 100%);
	padding: var(--b16) 0 var(--b12);
	margin-bottom: 0;
}
.seviye-skin-modern .sv-hero::after {
	content: "";
	position: absolute;
	right: -8%;
	top: -22%;
	width: 46%;
	height: 150%;
	background: linear-gradient(160deg, rgba(245,130,32,.42), rgba(245,130,32,.08));
	transform: rotate(13deg);
	border-radius: 40px;
	pointer-events: none;
}

.seviye-skin-modern .sv-hero-ic {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--b8);
	align-items: center;
}
@media (min-width: 900px) {
	.seviye-skin-modern .sv-hero-ic { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--b12); }
}

.seviye-skin-modern .sv-hero-metin { max-width: 46ch; }

.seviye-skin-modern .sv-hero-kas {
	font-family: var(--sv-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #ffcf9f;
	margin: 0 0 var(--b3);
}

.seviye-skin-modern .sv-hero-baslik {
	font-family: var(--sv-font-head);
	font-size: var(--ts-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.032em;
	color: #fff;
	margin: 0 0 var(--b4);
	text-wrap: balance;
	text-shadow: 0 2px 28px rgba(6,52,95,.35);
}

.seviye-skin-modern .sv-hero-alt {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255,255,255,.9);
	margin: 0 0 var(--b6);
	max-width: 44ch;
}

.seviye-skin-modern .sv-hero-dugmeler { display: flex; flex-wrap: wrap; gap: var(--b3); }

/* Kapak dizisi */
.seviye-skin-modern .sv-hero-kapaklar {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: var(--b3);
	perspective: 900px;
}
.seviye-skin-modern .sv-hero-kapak {
	display: block;
	width: 30%;
	max-width: 168px;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(3,26,48,.42);
	transition: transform .3s var(--sv-ease), box-shadow .3s var(--sv-ease);
}
.seviye-skin-modern .sv-hero-kapak img { display: block; width: 100%; height: auto; }
.seviye-skin-modern .sv-hero-kapak-1 { transform: rotate(-5deg) translateY(10px); }
.seviye-skin-modern .sv-hero-kapak-2 { transform: translateY(-12px) scale(1.06); z-index: 2; }
.seviye-skin-modern .sv-hero-kapak-3 { transform: rotate(5deg) translateY(10px); }
.seviye-skin-modern .sv-hero-kapak:hover {
	transform: translateY(-18px) scale(1.08) rotate(0deg);
	box-shadow: 0 20px 44px rgba(3,26,48,.5);
	z-index: 3;
}

@media (max-width: 899px) {
	.seviye-skin-modern .sv-hero { padding: var(--b8) 0 var(--b8); }
	.seviye-skin-modern .sv-hero-kapaklar { display: none; }
	.seviye-skin-modern .sv-hero-alt { font-size: 16px; }
}

/* Mobilde üst bilgi 57 piksellik ayrı bir çubuk; hero onun altından başlar */
@media (max-width: 767px) {
	.seviye-skin-modern .sv-hero { padding-top: var(--b20); }
	.seviye-skin-modern .sv-hero::after { display: none; }
	.seviye-skin-modern .sv-hero-baslik { font-size: clamp(28px, 8vw, 34px); }
}

/* ---------- 5. Kademe seçimi ---------- */
.seviye-skin-modern .sv-kademe-izgara {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--b3);
}
@media (max-width: 1000px) { .seviye-skin-modern .sv-kademe-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .seviye-skin-modern .sv-kademe-izgara { grid-template-columns: repeat(2, 1fr); } }

.seviye-skin-modern .sv-kademe {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 148px;
	padding: var(--b4) var(--b4) var(--b3);
	border-radius: var(--sv-r);
	overflow: hidden;
	background: linear-gradient(150deg, var(--kademe-ana) 0%, var(--kademe-koyu) 100%);
	color: #fff;
	box-shadow: var(--sv-shadow);
	transition: transform .26s var(--sv-ease), box-shadow .26s var(--sv-ease);
}
.seviye-skin-modern .sv-kademe::before {
	content: "";
	position: absolute;
	right: -30%;
	top: -50%;
	width: 100%;
	height: 200%;
	background: rgba(255,255,255,.07);
	transform: rotate(20deg);
	pointer-events: none;
}
.seviye-skin-modern .sv-kademe:hover,
.seviye-skin-modern .sv-kademe:focus-visible {
	transform: translateY(-5px);
	box-shadow: var(--sv-shadow-lg);
	text-decoration: none;
	color: #fff;
}

.seviye-skin-modern .sv-kademe-ad {
	position: relative;
	font-family: var(--sv-font-head);
	font-weight: 800;
	font-size: 21px;
	line-height: 1.15;
	letter-spacing: -.018em;
}
.seviye-skin-modern .sv-kademe-kapsam {
	position: relative;
	margin-top: var(--b1);
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,.85);
}
.seviye-skin-modern .sv-kademe-ok {
	position: relative;
	margin-top: auto;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--sv-r-pill);
	background: rgba(255,255,255,.2);
	transition: background .22s var(--sv-ease), transform .22s var(--sv-ease);
}
.seviye-skin-modern .sv-kademe:hover .sv-kademe-ok {
	background: rgba(255,255,255,.34);
	transform: translateX(4px);
}

/* ---------- 6. Ürün kartı ---------- */
.seviye-skin-modern .sv-urun-izgara {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--b4);
}
@media (max-width: 1100px) { .seviye-skin-modern .sv-urun-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .seviye-skin-modern .sv-urun-izgara { grid-template-columns: repeat(2, 1fr); } }

.seviye-skin-modern .sv-urun-kart {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	padding: var(--b4) var(--b4) var(--b3);
	box-shadow: var(--sv-shadow-sm);
	transition: transform .26s var(--sv-ease), box-shadow .26s var(--sv-ease), border-color .26s var(--sv-ease);
}
.seviye-skin-modern .sv-urun-kart::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	border-radius: var(--sv-r) var(--sv-r) 0 0;
	background: var(--kademe-ana);
	opacity: 0;
	transition: opacity .26s var(--sv-ease);
}
.seviye-skin-modern .sv-urun-kart:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(--sv-shadow-lg);
}
.seviye-skin-modern .sv-urun-kart:hover::before { opacity: 1; }

.seviye-skin-modern .sv-urun-yeni {
	position: absolute;
	top: var(--b3);
	right: var(--b3);
	z-index: 3;
	font-family: var(--sv-font-head);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	background: var(--sv-orange);
	color: #fff;
	padding: 3px 9px;
	border-radius: var(--sv-r-pill);
	box-shadow: 0 2px 8px rgba(245,130,32,.4);
}

.seviye-skin-modern .sv-urun-baglanti { display: block; color: inherit; }
.seviye-skin-modern .sv-urun-baglanti:hover { text-decoration: none; }

.seviye-skin-modern .sv-urun-kapak {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	margin-bottom: var(--b3);
	border-radius: var(--sv-r-sm);
	overflow: hidden;
	background: var(--sv-bg);
}
.seviye-skin-modern .sv-urun-kapak img {
	max-height: 100%;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	transition: transform .3s var(--sv-ease);
}
.seviye-skin-modern .sv-urun-kart:hover .sv-urun-kapak img { transform: scale(1.05); }
.seviye-skin-modern .sv-urun-kapaksiz {
	padding: var(--b4);
	font-size: 13px;
	font-weight: 600;
	color: var(--sv-muted);
	text-align: center;
}

.seviye-skin-modern .sv-urun-govde { display: block; }
.seviye-skin-modern .sv-urun-seri {
	display: block;
	font-family: var(--sv-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kademe-ana);
	margin-bottom: var(--b1);
}
.seviye-skin-modern .sv-urun-ad {
	font-family: var(--sv-font-head);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.38;
	letter-spacing: -.008em;
	color: var(--sv-ink);
	margin: 0 0 var(--b3);
	transition: color .18s var(--sv-ease);
}
.seviye-skin-modern .sv-urun-kart:hover .sv-urun-ad { color: var(--kademe-ana); }

.seviye-skin-modern .sv-urun-kart .urun-bilgisi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b1);
	margin: 0 0 var(--b3);
}
.seviye-skin-modern .sv-urun-kart .urun-sinif,
.seviye-skin-modern .sv-urun-kart .urun-kitap {
	float: none;
	width: auto;
	max-width: 100%;
	padding: 3px 10px;
	border-radius: var(--sv-r-pill);
	font-family: var(--sv-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
}
.seviye-skin-modern .sv-urun-kart .urun-sinif { background: var(--kademe-yumusak); color: var(--kademe-koyu); }
.seviye-skin-modern .sv-urun-kart .urun-kitap { background: var(--sv-bg); color: var(--sv-body); }
.seviye-skin-modern .sv-urun-kart .urun-sinif a,
.seviye-skin-modern .sv-urun-kart .urun-kitap a { color: inherit; white-space: normal; }

.seviye-skin-modern .sv-urun-meta {
	display: flex;
	justify-content: space-between;
	gap: var(--b2);
	margin-top: auto;
	padding-top: var(--b2);
	border-top: 1px solid var(--sv-line);
	font-size: 11px;
	font-weight: 600;
	color: var(--sv-muted);
	font-variant-numeric: tabular-nums;
}

.seviye-skin-modern .sv-urun-onizle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--b2);
	margin-top: var(--b3);
	padding: var(--b2) var(--b3);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r-pill);
	font-family: var(--sv-font-head);
	font-size: 13px;
	font-weight: 700;
	color: var(--sv-blue);
	transition: all .18s var(--sv-ease);
}
.seviye-skin-modern .sv-urun-onizle:hover {
	background: var(--sv-blue-050);
	border-color: var(--sv-blue);
	color: var(--sv-blue);
	text-decoration: none;
}

/* Katalog sayfasındaki ızgarayı da aynı sisteme al */
.seviye-skin-modern .urun-dep > .row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--b4);
	margin: 0;
}
@media (max-width: 780px) { .seviye-skin-modern .urun-dep > .row { grid-template-columns: repeat(2, 1fr); } }
.seviye-skin-modern .urun-dep > .row > .sv-urun-kart { width: auto; }

.seviye-skin-modern .seviye-ilgili > .row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--b3);
	margin: 0;
}
@media (max-width: 900px) { .seviye-skin-modern .seviye-ilgili > .row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 7. Duyuru şeridi ---------- */
.seviye-skin-modern .sv-duyuru {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--b4);
	padding: var(--b6);
	border-radius: var(--sv-r);
	background: linear-gradient(120deg, var(--sv-blue-800) 0%, var(--sv-blue) 100%);
	color: #fff;
	box-shadow: var(--sv-shadow);
}
.seviye-skin-modern .sv-duyuru-ikon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sv-r-sm);
	background: rgba(255,255,255,.14);
	color: #fff;
}
.seviye-skin-modern .sv-duyuru-metin { flex: 1 1 320px; min-width: 0; }
.seviye-skin-modern .sv-duyuru-metin h2 {
	font-family: var(--sv-font-head);
	font-size: var(--ts-h3);
	font-weight: 800;
	color: #fff;
	margin: 0 0 var(--b1);
	letter-spacing: -.015em;
}
.seviye-skin-modern .sv-duyuru-metin p {
	margin: 0;
	font-size: 14px;
	color: rgba(255,255,255,.86);
}

/* ---------- 8. Kurumsal özet ---------- */
.seviye-skin-modern .sv-kurumsal-ic {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--b8);
	align-items: center;
	padding: var(--b8);
	background: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
	box-shadow: var(--sv-shadow-sm);
}
@media (min-width: 860px) {
	.seviye-skin-modern .sv-kurumsal-ic { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.seviye-skin-modern .sv-kurumsal-metin p {
	font-size: var(--ts-govde);
	line-height: 1.7;
	color: var(--sv-body);
	max-width: 62ch;
	margin: 0 0 var(--b6);
}

.seviye-skin-modern .sv-kurumsal-sayilar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--b3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.seviye-skin-modern .sv-kurumsal-sayilar li {
	text-align: center;
	padding: var(--b4) var(--b2);
	background: var(--sv-bg);
	border-radius: var(--sv-r-sm);
	list-style: none;
}
.seviye-skin-modern .sv-kurumsal-sayilar strong {
	display: block;
	font-family: var(--sv-font-head);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--sv-blue);
	font-variant-numeric: tabular-nums;
}
.seviye-skin-modern .sv-kurumsal-sayilar span {
	display: block;
	margin-top: var(--b1);
	font-size: 13px;
	color: var(--sv-muted);
}

/* ---------- 9. İkonlar ---------- */
.seviye-skin-modern .sv-ikon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* Hızlı menü ikon kutuları */
.seviye-skin-modern .h-menu-list ul li .sv-ikon {
	width: 18px;
	height: 18px;
	color: var(--sv-orange);
}
.seviye-skin-modern .h-menu-list ul li > a:hover .sv-ikon,
.seviye-skin-modern .h-menu-list ul li > div:hover .sv-ikon { color: var(--sv-blue); }

/* Sosyal ikonlar */
.seviye-skin-modern .sosyal .sv-ikon,
.seviye-skin-modern .ftsosyal .sv-ikon { width: 17px; height: 17px; }

/* ---------- 10. Yükleniyor ve boş durumlar ---------- */
@keyframes sv-parilti {
	0%   { background-position: -420px 0; }
	100% { background-position: 420px 0; }
}

.seviye-skin-modern .sv-iskelet {
	background: var(--sv-bg);
	background-image: linear-gradient(90deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,.55) 50%,
		rgba(255,255,255,0) 100%);
	background-size: 420px 100%;
	background-repeat: no-repeat;
	animation: sv-parilti 1.25s ease-in-out infinite;
	border-radius: var(--sv-r-sm);
}
:root[data-theme="dark"] .seviye-skin-modern .sv-iskelet,
.seviye-skin-modern .sv-iskelet.koyu {
	background-image: linear-gradient(90deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,.09) 50%,
		rgba(255,255,255,0) 100%);
}

.seviye-skin-modern .sv-iskelet-kart {
	display: flex;
	flex-direction: column;
	gap: var(--b3);
	padding: var(--b4);
	background: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-r);
}
.seviye-skin-modern .sv-iskelet-kapak { height: 200px; }
.seviye-skin-modern .sv-iskelet-satir { height: 12px; }
.seviye-skin-modern .sv-iskelet-satir.kisa { width: 55%; }

.seviye-skin-modern .sv-yukleniyor .sv-urun-izgara,
.seviye-skin-modern .sv-yukleniyor .urun-dep > .row { opacity: .45; transition: opacity .2s var(--sv-ease); }

/* ---------- 11. Mobil alt çubuk ---------- */
.seviye-skin-modern .sv-mobil-cubuk { display: none; }

@media (max-width: 767px) {
	/* Sağ kenardaki sabit butonlar mobilde tamamen kalkar
	   (.seviye-skin-modern gövdenin kendi sınıfıdır, alt seçici değil) */
	body.seviye-skin-modern > div[style*="position: fixed"] { display: none !important; }

	.seviye-skin-modern .sv-mobil-cubuk {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9998;
		display: flex;
		background: var(--sv-surface);
		border-top: 1px solid var(--sv-line);
		box-shadow: 0 -2px 18px rgba(16,35,59,.1);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.seviye-skin-modern .sv-mobil-cubuk a {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 9px 4px;
		font-family: var(--sv-font-head);
		font-size: 11px;
		font-weight: 600;
		color: var(--sv-body);
		border-right: 1px solid var(--sv-line);
	}
	.seviye-skin-modern .sv-mobil-cubuk a:last-child { border-right: 0; }
	.seviye-skin-modern .sv-mobil-cubuk a:hover,
	.seviye-skin-modern .sv-mobil-cubuk a:focus-visible { color: var(--sv-orange); text-decoration: none; }
	.seviye-skin-modern .sv-mobil-cubuk .sv-ikon { width: 20px; height: 20px; }

	.seviye-skin-modern .footer { padding-bottom: 84px; }
}

/* ---------- 12. Hareket ---------- */
@keyframes sv-belir {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.seviye-skin-modern .sv-belir {
	animation: sv-belir .5s var(--sv-ease) both;
}
.seviye-skin-modern .sv-belir-1 { animation-delay: .04s; }
.seviye-skin-modern .sv-belir-2 { animation-delay: .10s; }
.seviye-skin-modern .sv-belir-3 { animation-delay: .16s; }
.seviye-skin-modern .sv-belir-4 { animation-delay: .22s; }

/* Görünüme girince beliren bölümler */
.seviye-skin-modern .sv-gozlem {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s var(--sv-ease), transform .55s var(--sv-ease);
}
.seviye-skin-modern .sv-gozlem.gorunur { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.seviye-skin-modern .sv-belir,
	.seviye-skin-modern .sv-gozlem {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.seviye-skin-modern .sv-iskelet { animation: none !important; }
}

/* ---------- Eski kalıp temizliği ---------- */
/* Ana sayfada hızlı menü + form bloğu artık ayrı bir bölüm */
.seviye-skin-modern .sv-hizli-satir { background: transparent !important; display: flex; flex-wrap: wrap; }
.seviye-skin-modern .sv-arama-alan .urunler { margin-bottom: 0; }
.seviye-skin-modern .sv-hero + .sv-bolum { padding-top: var(--b12); }

/* İletişim bilgi satırı ikon kutusu */
.seviye-skin-modern .sv-iletisim-ikon {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sv-r-sm);
	background: linear-gradient(135deg, var(--sv-orange) 0%, var(--sv-orange-600) 100%);
	color: #fff;
}
.seviye-skin-modern .sv-ikon-beyaz { color: #fff; }

/* ---------- Başlık etiketleri tipografik ölçeğe bağlanır ----------
   Başlıklar artık div değil h1–h3; tarayıcı varsayılanlarını sıfırlayıp
   ölçekteki değerleri uyguluyoruz. Görünüm değişmez, yapı doğrulanır. */
.seviye-skin-modern h1, .seviye-skin-modern h2,
.seviye-skin-modern h3, .seviye-skin-modern h4 {
	margin: 0;
	font-weight: inherit;
}
.seviye-skin-modern h1.hak-baslik {
	font-family: var(--sv-font-head);
	font-size: var(--ts-h1);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.024em;
	color: var(--sv-ink);
}
.seviye-skin-modern h2.hak-baslik {
	font-family: var(--sv-font-head);
	font-size: var(--ts-h2);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.02em;
	color: var(--sv-ink);
}
.seviye-skin-modern h2.h-menu-baslik {
	font-family: var(--sv-font-head);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .02em;
	color: #fff;
	margin: 0;
}
.seviye-skin-modern h2.egitim-baslik {
	font-family: var(--sv-font-head);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.seviye-skin-modern .seviye-icerik h2 { font-size: var(--ts-h2); font-weight: 700; }
.seviye-skin-modern .seviye-icerik h3 { font-size: var(--ts-h3); font-weight: 700; }

/* Arşiv ve arama sayfası başlığı */
.seviye-skin-modern .sv-arsiv-baslik {
	font-family: var(--sv-font-head);
	font-size: var(--ts-h1);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.024em;
	color: var(--sv-ink);
	margin: 0 0 var(--b4);
}

/* İletişim sayfası başlık bloğu */
.seviye-skin-modern .sv-iletisim-basi { text-align: center; margin-bottom: var(--b6); width: 100%; }
.seviye-skin-modern .sv-iletisim-basi h1 {
	font-family: var(--sv-font-head);
	font-size: var(--ts-h1);
	font-weight: 800;
	letter-spacing: -.024em;
	color: var(--sv-ink);
	margin: 0 0 var(--b3);
}
.seviye-skin-modern .sv-iletisim-basi .ik-cizgi {
	width: 56px;
	height: 4px;
	margin: 0 auto;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--sv-orange), var(--sv-orange-600));
}

/* --------------------------------------------------------------------------
   WebP <picture> sarmalı düzeni bozmasın
   --------------------------------------------------------------------------
   WebP sunumu için her <img> bir <picture> içine alınıyor. Sarmalın kendi
   kutusu, esnek/ızgara düzenlerinde <img>'in yerine geçiyor ve `img` için
   yazılmış boyut kuralları (max-height, object-fit…) artık yanlış kutuya
   uygulanıyordu — kapaklar yuvasından taşıp kırpılıyordu.

   `display: contents` sarmalın kutusunu kaldırır; <img> yeniden doğrudan
   çocuk olur ve mevcut kuralların hepsi olduğu gibi çalışır.
   -------------------------------------------------------------------------- */
picture { display: contents; }

/* Mockup'lı kapak yuvası: mockup şeffaf ve kendi gölgesini taşıyor,
   arkasına kutu koymak gereksiz bir çerçeve gibi duruyordu. */
.seviye-skin-modern .sv-urun-kapak-mockup {
	height: 210px;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}
.seviye-skin-modern .sv-urun-kapak-mockup img { max-height: 100%; }

/* KVKK onay kutusu — gönder düğmesinin hemen üstünde */
.seviye-skin-modern .seviye-kvkk label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sv-muted);
	cursor: pointer;
}
.seviye-skin-modern .seviye-kvkk input { margin-top: 3px; flex: 0 0 auto; }
.seviye-skin-modern .seviye-kvkk a { color: var(--sv-blue); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Yayın özellikleri — kapaklarda basılı dört nitelik
   Ürün sayfasında, satın alma düğmelerinin altında.
--------------------------------------------------------------------------- */

.sv-ozellikler {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 1rem 1.1rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .85rem 1.4rem;
	background: var(--sv-bg, #f5f8fc);
	border: 1px solid var(--sv-line, #e3eaf3);
	border-radius: 12px;
}

.sv-ozellik {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
}

.sv-ozellik-ikon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 8px;
	color: var(--sv-kademe-ana, var(--sv-blue, #0077c0));
	background: var(--sv-surface, #fff);
	border: 1px solid var(--sv-line, #e3eaf3);
}

.sv-ozellik-metin { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.sv-ozellik-metin strong {
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sv-ink, #10233b);
}

.sv-ozellik-metin span {
	font-size: .82rem;
	line-height: 1.45;
	color: var(--sv-muted, #5f7186);
}

@media (max-width: 600px) {
	.sv-ozellikler { grid-template-columns: 1fr; padding: .9rem 1rem; }
}

/* ---------------------------------------------------------------------------
   Ders yolculuğu — bir dersin düzey düzey ilerleyişi
   Ders arşivinde, yalnızca süzgeç boşken.
--------------------------------------------------------------------------- */

.sv-ders-yolu {
	margin: 0 0 2rem;
	padding: 1.4rem 1.5rem 1.6rem;
	background: var(--sv-surface, #fff);
	border: 1px solid var(--sv-line, #e3eaf3);
	border-radius: var(--sv-r, 16px);
	box-shadow: var(--sv-shadow-sm, 0 1px 2px rgba(16, 35, 59, .06));
}

.sv-ders-yolu-basi { margin-bottom: 1.1rem; }

.sv-ders-yolu-basi h2 {
	margin: 0 0 .25rem;
	font-family: var(--sv-font-head, inherit);
	font-size: 1.25rem;
	line-height: 1.25;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .7rem;
}

.sv-yol-aralik {
	font-size: .82rem;
	font-weight: 500;
	color: var(--sv-muted, #5f7186);
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .12rem .55rem;
	border: 1px solid var(--sv-line, #e3eaf3);
	border-radius: 999px;
}

.sv-ders-yolu-basi p { margin: 0; font-size: .88rem; color: var(--sv-muted, #5f7186); }

.sv-yol-basamaklar {
	list-style: none;
	margin: 0;
	padding: 0 0 0 .55rem;
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	border-left: 2px solid var(--sv-line, #e3eaf3);
}

.sv-yol-basamak { position: relative; padding-left: 1.15rem; }

.sv-yol-baslik {
	display: inline-flex;
	align-items: baseline;
	gap: .55rem;
	text-decoration: none;
	color: inherit;
	margin-bottom: .55rem;
}

.sv-yol-nokta {
	position: absolute;
	left: -.45rem;
	top: .42rem;
	width: .72rem;
	height: .72rem;
	border-radius: 50%;
	background: var(--yol-renk, #0a63b4);
	box-shadow: 0 0 0 3px var(--sv-surface, #fff);
}

.sv-yol-ad { font-weight: 600; font-size: 1rem; color: var(--yol-renk, #0a63b4); }

.sv-yol-adet { font-size: .8rem; color: var(--sv-muted, #5f7186); }

.sv-yol-baslik:hover .sv-yol-ad,
.sv-yol-baslik:focus-visible .sv-yol-ad { text-decoration: underline; }

.sv-yol-kitaplar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .85rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: .35rem;
}

.sv-yol-kitaplar > li { flex: 0 0 6.6rem; scroll-snap-align: start; }

.sv-yol-kitaplar a {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	text-decoration: none;
	color: inherit;
}

.sv-yol-kapak {
	display: block;
	background: var(--yol-yumusak, #e6eff9);
	border-radius: 8px;
	padding: .4rem;
}

.sv-yol-kapak img,
.sv-yol-kapak picture { display: block; width: 100%; height: auto; }

.sv-yol-kitap-ad {
	font-size: .74rem;
	line-height: 1.3;
	color: var(--sv-muted, #5f7186);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sv-yol-kitaplar a:hover .sv-yol-kitap-ad,
.sv-yol-kitaplar a:focus-visible .sv-yol-kitap-ad { color: var(--sv-ink, #10233b); }

@media (max-width: 600px) {
	.sv-ders-yolu { padding: 1.1rem 1rem 1.2rem; }
	.sv-yol-kitaplar > li { flex-basis: 5.6rem; }
}

/* ---------------------------------------------------------------------------
   Kurum bağlantısı — başlıkta Seviye Eğitim Kurumları alanı
   Yayınevi logosu ile sosyal ikonlar arasındaki boş sütunda durur.
--------------------------------------------------------------------------- */

.sv-kurum-sutun { display: flex; align-items: center; justify-content: center; }

.sv-kurum-bagi {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	max-width: 100%;
	padding: .5rem .85rem .5rem .6rem;
	border: 1px solid var(--sv-line, #e3eaf3);
	border-radius: 999px;
	background: var(--sv-surface, #fff);
	text-decoration: none;
	color: inherit;
	line-height: 1.25;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sv-kurum-bagi:hover,
.sv-kurum-bagi:focus-visible {
	border-color: var(--sv-blue, #0077c0);
	box-shadow: var(--sv-shadow-sm, 0 1px 2px rgba(16, 35, 59, .08));
	transform: translateY(-1px);
}

.sv-kurum-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sv-bg, #f5f8fc);
}

.sv-kurum-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.sv-kurum-metin {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sv-kurum-metin strong {
	font-size: .86rem;
	font-weight: 600;
	color: var(--sv-ink, #10233b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sv-kurum-metin span {
	font-size: .74rem;
	color: var(--sv-muted, #5f7186);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sv-kurum-ok {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--sv-blue, #0077c0);
}

.sv-kurum-bagi:hover .sv-kurum-ok { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
	.sv-kurum-bagi, .sv-kurum-ok { transition: none; }
	.sv-kurum-bagi:hover { transform: none; }
	.sv-kurum-bagi:hover .sv-kurum-ok { transform: none; }
}

/* Dar ekranda alt metin ve logo düşer, yalnızca ad kalır */
@media (max-width: 991px) {
	.sv-kurum-sutun { justify-content: flex-start; margin-top: .6rem; }
	.sv-kurum-metin span { display: none; }
}

@media (max-width: 575px) {
	.sv-kurum-bagi { padding: .4rem .7rem .4rem .45rem; gap: .5rem; }
	.sv-kurum-logo { width: 1.9rem; height: 1.9rem; }
	.sv-kurum-metin strong { font-size: .8rem; }
}