/**
 * MF Flipping — okuyucu görünümü.
 *
 * İki yerleşim aynı yapıyı paylaşır:
 *   .mf-flip           → bir sayfaya gömülü okuyucu
 *   .mf-flip--reader   → /dergi/<sayi>/oku/ adresinde tam ekran okuma modu
 *
 * Renkler tek yerden değiştirilebilir. Temanızda geçersiz kılmak için:
 * .mf-flip { --mfp-bg: #0e1013; --mfp-accent: #c9a227; }
 */

.mf-flip {
	--mfp-bg: #0b0c0e;
	--mfp-bg-soft: #131519;
	--mfp-line: rgba( 255, 255, 255, 0.08 );
	--mfp-ink: #f1efeb;
	--mfp-muted: #8d939b;
	--mfp-accent: #d3a04a;
	--mfp-height: min( 82vh, 940px );
	--mfp-radius: 3px;
	--mfp-bar: 58px;
	--mfp-top: 56px;
	--mfp-flip-duration: 0.72s;
	--mfp-ease: cubic-bezier( 0.24, 0.72, 0.2, 1 );

	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mfp-bg);
	color: var(--mfp-ink);
	border-radius: 10px;
	overflow: hidden;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	-webkit-tap-highlight-color: transparent;
}

.mf-flip *,
.mf-flip *::before,
.mf-flip *::after {
	box-sizing: border-box;
}

.mf-flip:not(.is-ready) .mf-flip__top,
.mf-flip:not(.is-ready) .mf-flip__bottom {
	display: none;
}

/* Tam ekran okuma modu ---------------------------------------------- */

.mf-flip--reader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	height: 100vh;
	height: 100dvh;
	width: 100%;
	border-radius: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	animation: mf-flip-enter 0.34s var(--mfp-ease) both;
}

@keyframes mf-flip-enter {
	from {
		opacity: 0;
		transform: scale( 0.985 );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Okuma ilerlemesi --------------------------------------------------- */

.mf-flip__progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 40;
	background: rgba( 255, 255, 255, 0.06 );
	pointer-events: none;
}

.mf-flip__progress i {
	display: block;
	height: 100%;
	background: var(--mfp-accent);
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.35s var(--mfp-ease);
}

/* Üst çubuk ---------------------------------------------------------- */

.mf-flip__top {
	position: relative;
	z-index: 30;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--mfp-top);
	padding: 0 10px 0 18px;
	background: linear-gradient( to bottom, rgba( 11, 12, 14, 0.96 ), rgba( 11, 12, 14, 0.82 ) );
	border-bottom: 1px solid var(--mfp-line);
	backdrop-filter: blur( 12px );
	transition: transform 0.28s var(--mfp-ease), opacity 0.28s var(--mfp-ease);
}

.mf-flip__brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
}

.mf-flip__number {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mfp-accent);
}

.mf-flip__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mf-flip__tools {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.mf-flip__btn--close {
	margin-left: 6px;
}

.mf-flip__open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	margin-left: 8px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--mfp-accent);
	color: #16140f;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.18s ease, transform 0.18s ease;
}

.mf-flip__open svg {
	width: 17px;
	height: 17px;
}

.mf-flip__open:hover {
	filter: brightness( 1.08 );
	transform: translateY( -1px );
	color: #16140f;
}

/* Sahne -------------------------------------------------------------- */

.mf-flip__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	height: var(--mfp-height);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: pan-y;
	outline: none;
	background:
		radial-gradient( ellipse 70% 60% at 50% 42%, rgba( 255, 255, 255, 0.055 ), transparent 70% ),
		var(--mfp-bg);
}

.mf-flip--reader .mf-flip__stage {
	height: auto;
}

.mf-flip__stage:focus-visible {
	box-shadow: inset 0 0 0 2px rgba( 211, 160, 74, 0.55 );
}

.mf-flip__zoom {
	position: relative;
	transition: transform 0.22s var(--mfp-ease);
	will-change: transform;
}

/* Köşeden çevirme --------------------------------------------------- */

/* Kalkan köşe kitabın dışında, yakınlaştırma katmanının içinde durur:
   yaprakların 3B bağlamına girmediği için sıralama sorunu çıkmaz. */
.mf-flip__peel {
	position: absolute;
	top: 0;
	z-index: 5;
	pointer-events: none;
}

.mf-flip__peel[hidden] {
	display: none;
}

.mf-flip__peel-flat,
.mf-flip__peel-flap {
	position: absolute;
	inset: 0;
	background: #f4f2ee;
}

/* matrix() ham yerel koordinatlarda uygulanmalı. */
.mf-flip__peel-flap {
	transform-origin: 0 0;
}

.mf-flip__peel-flat img,
.mf-flip__peel-flap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* Kanat sayfanın arka yüzüdür: yatayda aynalanır. */
.mf-flip__peel-flap img {
	transform: scaleX( -1 );
}

.mf-flip__peel-cast,
.mf-flip__peel-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Köşe üzerindeyken sayfanın tutulabildiği belli olsun. */
.mf-flip__stage.is-corner {
	cursor: grab;
}

/* Kanat çizilirken yaprağın kendisi gizlenir, yoksa altta ikinci bir
   kopya görünür. */
.mf-flip__leaf.is-peeling .mf-flip__face {
	visibility: hidden;
}

.mf-flip.is-zoomed .mf-flip__stage {
	cursor: grab;
	touch-action: none;
}

.mf-flip.is-zoomed .mf-flip__stage:active {
	cursor: grabbing;
}

.mf-flip__book {
	position: relative;
	perspective: 2800px;
	transition: transform var(--mfp-flip-duration) var(--mfp-ease);
}

/* Kitabın altındaki zemin gölgesi. */
.mf-flip__book::after {
	content: '';
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: -26px;
	height: 34px;
	background: radial-gradient( ellipse at 50% 0%, rgba( 0, 0, 0, 0.6 ), transparent 70% );
	pointer-events: none;
}

/* Yapraklar ---------------------------------------------------------- */

.mf-flip__leaf {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: transform var(--mfp-flip-duration) var(--mfp-ease);
}

.mf-flip__leaf.is-flipped {
	transform: rotateY( -180deg );
}

.mf-flip.is-instant .mf-flip__leaf,
.mf-flip.is-instant .mf-flip__book {
	transition: none !important;
}

/* Görüş alanının dışındaki yapraklar hiç çizilmez.
   84 sayfalık bir dergide 168 yaprak yüzü olur ve her birindeki
   backface-visibility: hidden onu ayrı bir GPU katmanına çıkarır;
   telefonda bu, sekmenin bellek yetersizliğinden çökmesine yol açıyordu.
   Uzaktakiler zaten üstteki opak sayfanın altında kaldığı için
   gizlemek görünüşü değiştirmez. */
.mf-flip__leaf.is-far {
	display: none;
}

.mf-flip__face {
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: #f4f2ee;
	overflow: hidden;
}

/* Gölge yalnızca görünen yapraklarda durur.
   Yığındaki her yaprağa gölge verilirse — 84 sayfalık bir dergide sağda
   40 yaprak aynı noktada üst üste durur — kırk gölge sırtın hemen solunda
   toplanıp katı siyah bir çizgiye dönüşüyor. Üsttekiler dışındakiler zaten
   opak sayfaların altında kaldığı için gölgelerine gerek yok. */
.mf-flip__leaf.is-top .mf-flip__face:not(.is-empty) {
	box-shadow: 0 8px 24px -10px rgba( 0, 0, 0, 0.75 );
}

/* Yaprak durduğunda arkaya bakan yüzü ayrıca gizleriz. backface-visibility
   bazı motorlarda 3B bağlamın içinde şaşıyor ve sayfa aynalanmış görünüyor;
   bu kural çevirme bittikten sonra doğru yüzün kaldığını garanti eder.
   Çevirme sürerken (.is-turning) kural devre dışıdır, iki yüz de gerekir. */
.mf-flip__leaf:not(.is-turning).is-flipped .mf-flip__face--front,
.mf-flip__leaf:not(.is-turning):not(.is-flipped) .mf-flip__face--back {
	visibility: hidden;
}

/* Çevrilen yaprakta kutu gölgesi küçük kalır.
   Sebebi: yaprak dönerken dik açıdan geçiyor ve kutusu neredeyse sıfır
   genişliğe iniyor. Geniş bir kutu gölgesi o anda sırtta koyu bir yığın
   hâlinde toplanıp çevirme bitince kayboluyor. Derinliği bunun yerine
   içeriden gelen gölge veriyor: sayfanın içine çizildiği için sayfayla
   birlikte döner, dışarı taşıp yığılmaz. */
.mf-flip__leaf.is-turning .mf-flip__face:not(.is-empty) {
	box-shadow:
		inset 0 0 44px rgba( 0, 0, 0, 0.16 ),
		0 6px 16px -10px rgba( 0, 0, 0, 0.5 );
}

/* Dış kenar yuvarlak, sırt tarafı düz. Arka yüz aynalandığı için
   iki yüz de aynı yarıçapı kullanır. */
.mf-flip__face--front,
.mf-flip__face--back {
	border-radius: 0 var(--mfp-radius) var(--mfp-radius) 0;
}

.mf-flip__face--back {
	transform: rotateY( 180deg );
}

.mf-flip__face.is-empty {
	background: transparent;
	box-shadow: none;
}

.mf-flip__face img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* Sayfa gelene kadar sakin bir iskelet. Parıltı yalnızca gerçekten
   indirilen sayfalarda döner: uzaktaki yapraklar boşuna çizim yapmaz. */
.mf-flip__face[data-page]::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #eceae5;
	background-size: 220% 100%;
	transition: opacity 0.3s ease;
}

.mf-flip__face.is-loading:not(.is-loaded)::before {
	background-image: linear-gradient( 100deg, #eceae5 30%, #f6f5f2 50%, #eceae5 70% );
	animation: mf-flip-shimmer 1.4s linear infinite;
}

.mf-flip__face.is-loaded::before {
	opacity: 0;
	animation: none;
}

@keyframes mf-flip-shimmer {
	from {
		background-position: 120% 0;
	}
	to {
		background-position: -120% 0;
	}
}

/* Cilt payı: geniş bir bant değil, sırtın hemen yanında ince bir kırım izi.
   Genişlerse iki sayfanın izi sırtta birleşip leke gibi görünüyor. */
.mf-flip__face::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba( 0, 0, 0, 0.19 ) 0,
		rgba( 0, 0, 0, 0.07 ) 0.7%,
		rgba( 0, 0, 0, 0.02 ) 2.2%,
		rgba( 0, 0, 0, 0 ) 4.5%
	);
}

.mf-flip--single .mf-flip__face::after {
	background: none;
}

/* Tek sayfa kipinde çevrilmiş yaprak tamamen kaybolur.
   Yaprak sol kenarından döndüğü için çevrildiğinde kitabın hemen soluna
   oturuyor ve orada görünmeye devam ediyordu; üstelik bu kipte yaprağın
   arka yüzü bir sonraki yaprağın ön yüzüyle aynı sayfa olduğundan aynı
   görsel yan yana iki kez çiziliyordu. Çevirme sürerken (.is-turning)
   kural devre dışıdır, animasyon görünsün diye. */
.mf-flip--single .mf-flip__leaf:not(.is-turning).is-flipped .mf-flip__face {
	visibility: hidden;
}

.mf-flip--single .mf-flip__face {
	border-radius: var(--mfp-radius);
}

/* Yan gezinme -------------------------------------------------------- */

.mf-flip__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 20;
	width: 46px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba( 255, 255, 255, 0.07 );
	color: var(--mfp-ink);
	cursor: pointer;
	opacity: 0.7;
	transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.mf-flip__nav svg {
	width: 24px;
	height: 24px;
}

.mf-flip__nav:hover {
	background: rgba( 255, 255, 255, 0.16 );
	opacity: 1;
}

.mf-flip__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

.mf-flip__nav--prev {
	left: 14px;
}

.mf-flip__nav--next {
	right: 14px;
}

/* Alt çubuk ---------------------------------------------------------- */

.mf-flip__bottom {
	position: relative;
	z-index: 30;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--mfp-bar);
	padding: 0 14px;
	background: linear-gradient( to top, rgba( 11, 12, 14, 0.97 ), rgba( 11, 12, 14, 0.85 ) );
	border-top: 1px solid var(--mfp-line);
	backdrop-filter: blur( 12px );
	transition: transform 0.28s var(--mfp-ease), opacity 0.28s var(--mfp-ease);
}

.mf-flip__group {
	display: flex;
	align-items: center;
	gap: 2px;
}

.mf-flip__group--mid {
	flex: 1 1 auto;
	gap: 14px;
	min-width: 0;
}

.mf-flip__group--right {
	gap: 4px;
}

.mf-flip__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--mfp-muted);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.16s ease, background 0.16s ease;
}

.mf-flip__btn svg {
	width: 20px;
	height: 20px;
}

.mf-flip__btn--small {
	width: 32px;
	height: 32px;
}

.mf-flip__btn--small svg {
	width: 16px;
	height: 16px;
}

.mf-flip__btn:hover,
.mf-flip__btn.is-active {
	color: var(--mfp-ink);
	background: rgba( 255, 255, 255, 0.09 );
}

.mf-flip__btn.is-active {
	color: var(--mfp-accent);
}

.mf-flip__btn:disabled {
	opacity: 0.28;
	cursor: default;
	background: transparent;
}

.mf-flip__btn:focus-visible,
.mf-flip__nav:focus-visible,
.mf-flip__thumb:focus-visible,
.mf-flip__pager:focus-visible,
.mf-flip__zoom-label:focus-visible,
.mf-flip__slider:focus-visible,
.mf-flip__open:focus-visible {
	outline: 2px solid var(--mfp-accent);
	outline-offset: 2px;
}

/* Sürgü -------------------------------------------------------------- */

.mf-flip__track {
	position: relative;
	flex: 1 1 auto;
	min-width: 90px;
	display: flex;
	align-items: center;
}

.mf-flip__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 22px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.mf-flip__slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.14 );
}

.mf-flip__slider::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.14 );
}

.mf-flip__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: var(--mfp-accent);
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.6 );
}

.mf-flip__slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: var(--mfp-accent);
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.6 );
}

/* Sürgü önizlemesi */
.mf-flip__peek {
	position: absolute;
	bottom: 34px;
	transform: translateX( -50% );
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border-radius: 8px;
	background: #1c1f24;
	border: 1px solid var(--mfp-line);
	box-shadow: 0 14px 36px rgba( 0, 0, 0, 0.6 );
	pointer-events: none;
}

.mf-flip__peek[hidden] {
	display: none;
}

.mf-flip__peek img {
	display: block;
	width: 74px;
	height: auto;
	border-radius: 2px;
	background: #2a2e34;
}

.mf-flip__peek span {
	font-size: 11px;
	color: var(--mfp-muted);
	font-variant-numeric: tabular-nums;
}

/* Sayaç -------------------------------------------------------------- */

.mf-flip__pager,
.mf-flip__pager-input {
	flex: 0 0 auto;
	height: 30px;
	min-width: 88px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: rgba( 255, 255, 255, 0.05 );
	color: var(--mfp-ink);
	font: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	transition: background 0.16s ease;
}

.mf-flip__pager:hover {
	background: rgba( 255, 255, 255, 0.1 );
}

.mf-flip__pager[hidden],
.mf-flip__pager-input[hidden] {
	display: none;
}

.mf-flip__pager-input {
	border-color: var(--mfp-accent);
	cursor: text;
}

.mf-flip__zoom-label {
	min-width: 52px;
	height: 30px;
	padding: 0 6px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--mfp-muted);
	font: inherit;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.mf-flip__zoom-label:hover {
	color: var(--mfp-ink);
	background: rgba( 255, 255, 255, 0.08 );
}

/* Tek / çift sayfa seçici: vurgulanan düğme geçerli kiptir. */

.mf-flip__seg {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 6px;
	padding: 3px;
	border-radius: 9px;
	background: rgba( 255, 255, 255, 0.06 );
}

.mf-flip__seg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--mfp-muted);
	cursor: pointer;
	transition: color 0.16s ease, background 0.16s ease;
}

.mf-flip__seg-btn svg {
	width: 18px;
	height: 18px;
}

.mf-flip__seg-btn:hover {
	color: var(--mfp-ink);
}

.mf-flip__seg-btn.is-active {
	background: rgba( 255, 255, 255, 0.14 );
	color: var(--mfp-accent);
	cursor: default;
}

.mf-flip__seg-btn:focus-visible {
	outline: 2px solid var(--mfp-accent);
	outline-offset: 2px;
}

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

.mf-flip__panel {
	position: absolute;
	z-index: 45;
	background: #14161a;
	border: 1px solid var(--mfp-line);
	box-shadow: 0 -18px 60px rgba( 0, 0, 0, 0.6 );
	color: var(--mfp-ink);
}

.mf-flip__panel[hidden] {
	display: none;
}

.mf-flip__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 10px 10px 16px;
	border-bottom: 1px solid var(--mfp-line);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mfp-muted);
}

/* Sayfa ızgarası */
.mf-flip__panel--thumbs {
	left: 0;
	right: 0;
	bottom: var(--mfp-bar);
	max-height: 52%;
	display: flex;
	flex-direction: column;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	animation: mf-flip-slide-up 0.24s var(--mfp-ease);
}

@keyframes mf-flip-slide-up {
	from {
		transform: translateY( 14px );
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

.mf-flip__thumbs {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 92px, 1fr ) );
	gap: 14px;
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.mf-flip__thumb {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0.62;
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.mf-flip__thumb-frame {
	display: block;
	border-radius: 2px;
	overflow: hidden;
	background: #22262c;
	box-shadow: 0 3px 12px rgba( 0, 0, 0, 0.5 );
	outline: 2px solid transparent;
	outline-offset: 0;
	transition: outline-color 0.16s ease;
}

.mf-flip__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 0.707;
	object-fit: cover;
	object-position: top center;
}

.mf-flip__thumb-num {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: var(--mfp-muted);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mf-flip__thumb:hover {
	opacity: 1;
	transform: translateY( -2px );
}

.mf-flip__thumb.is-current {
	opacity: 1;
}

.mf-flip__thumb.is-current .mf-flip__thumb-frame {
	outline-color: var(--mfp-accent);
}

.mf-flip__thumb.is-current .mf-flip__thumb-num {
	color: var(--mfp-accent);
}

/* Kısayol kartı */
.mf-flip__panel--help {
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: min( 380px, calc( 100% - 32px ) );
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, 0.7 );
}

.mf-flip__keys {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 18px;
	margin: 0;
	padding: 18px;
	font-size: 13px;
}

.mf-flip__keys dt {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
}

.mf-flip__keys dd {
	margin: 0;
	color: var(--mfp-muted);
}

.mf-flip__keys-note {
	margin: 0;
	padding: 0 18px 18px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--mfp-muted);
}

.mf-flip__keys kbd {
	display: inline-block;
	min-width: 24px;
	padding: 2px 6px;
	border: 1px solid var(--mfp-line);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: rgba( 255, 255, 255, 0.05 );
	font-family: inherit;
	font-size: 11px;
	text-align: center;
	color: var(--mfp-ink);
}

/* Bildirim ----------------------------------------------------------- */

.mf-flip__toast {
	position: absolute;
	left: 50%;
	bottom: calc( var(--mfp-bar) + 18px );
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 10px 10px 16px;
	border-radius: 999px;
	background: #1c1f24;
	border: 1px solid var(--mfp-line);
	box-shadow: 0 16px 44px rgba( 0, 0, 0, 0.6 );
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	transform: translate( -50%, 12px );
	pointer-events: none;
	transition: opacity 0.24s ease, transform 0.24s var(--mfp-ease);
}

.mf-flip__toast.is-visible {
	opacity: 1;
	transform: translate( -50%, 0 );
	pointer-events: auto;
}

.mf-flip__toast-action {
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--mfp-accent);
	color: #16140f;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* Boşta kalınca çubuklar çekilir ------------------------------------- */

.mf-flip.is-idle .mf-flip__top {
	transform: translateY( -100% );
	opacity: 0;
}

.mf-flip.is-idle .mf-flip__bottom {
	transform: translateY( 100% );
	opacity: 0;
}

.mf-flip.is-idle .mf-flip__nav {
	opacity: 0;
}

.mf-flip.is-idle .mf-flip__stage {
	cursor: none;
}

/* Tam ekran ---------------------------------------------------------- */

.mf-flip:fullscreen,
.mf-flip:-webkit-full-screen {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.mf-flip.is-fullscreen .mf-flip__stage {
	height: auto;
	min-height: 0;
	flex: 1 1 auto;
}

/* Yükleniyor / betiksiz ---------------------------------------------- */

.mf-flip__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex: 1 1 auto;
	height: var(--mfp-height);
}

.mf-flip--reader .mf-flip__loading {
	height: 100%;
}

.mf-flip__loading span {
	width: 26px;
	height: 26px;
	border: 2px solid rgba( 255, 255, 255, 0.16 );
	border-top-color: var(--mfp-accent);
	border-radius: 50%;
	animation: mf-flip-spin 0.8s linear infinite;
}

.mf-flip__loading em {
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--mfp-muted);
}

@keyframes mf-flip-spin {
	to {
		transform: rotate( 360deg );
	}
}

.mf-flip__noscript {
	margin: 0;
	padding: 16px;
	list-style: none;
}

.mf-flip__noscript img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 12px;
}

.mf-flip-notice {
	padding: 14px 16px;
	background: #fdf6e3;
	border-left: 3px solid #d3a04a;
	color: #5a4a20;
}

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

.mf-flip__error {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	height: var(--mfp-height);
	padding: 24px;
	text-align: center;
	color: var(--mfp-muted);
	font-size: 14px;
}

/* Sayı arşivi -------------------------------------------------------- */

.mf-flip-archive {
	display: grid;
	grid-template-columns: repeat( var(--mfp-columns, 4), minmax( 0, 1fr ) );
	gap: 26px;
}

.mf-flip-archive__item {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Kapak ızgarası: kapak oranı korunur, eksik kapakta boş kutu kalmaz. */
.mf-flip-archive__cover {
	display: block;
	position: relative;
	background: rgba( 0, 0, 0, 0.05 );
	border-radius: 3px;
	overflow: hidden;
}

.mf-flip-archive__cover--empty {
	aspect-ratio: 0.707;
}

.mf-flip-archive__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 6px 22px rgba( 0, 0, 0, 0.18 );
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.mf-flip-archive__item:hover .mf-flip-archive__cover img {
	transform: translateY( -4px );
	box-shadow: 0 14px 34px rgba( 0, 0, 0, 0.28 );
}

/* "Oku" rozeti: kapağın üstünde, yalnızca imleç üzerindeyken. */
.mf-flip-archive__open {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translate( -50%, 8px );
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba( 12, 13, 15, 0.86 );
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	backdrop-filter: blur( 6px );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.mf-flip-archive__open svg {
	width: 15px;
	height: 15px;
}

.mf-flip-archive__item:hover .mf-flip-archive__open,
.mf-flip-archive__item:focus-visible .mf-flip-archive__open {
	opacity: 1;
	transform: translate( -50%, 0 );
}

.mf-flip-archive__number {
	display: block;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
}

.mf-flip-archive__title {
	display: block;
	margin-top: 4px;
	font-weight: 600;
	line-height: 1.35;
}

.mf-flip-archive__meta {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	opacity: 0.6;
}

/* Duyarlılık --------------------------------------------------------- */

@media ( max-width: 900px ) {
	.mf-flip-archive {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 18px;
	}
}

@media ( max-width: 760px ) {
	.mf-flip {
		--mfp-height: 68vh;
		--mfp-bar: 52px;
		--mfp-top: 50px;
		border-radius: 0;
	}

	.mf-flip__top {
		padding: 0 6px 0 14px;
		gap: 8px;
	}

	.mf-flip__title {
		font-size: 14px;
	}

	.mf-flip__open span {
		display: none;
	}

	.mf-flip__open {
		padding: 0 11px;
	}

	.mf-flip__nav {
		width: 34px;
		height: 66px;
		background: rgba( 255, 255, 255, 0.05 );
	}

	.mf-flip__nav--prev {
		left: 6px;
	}

	.mf-flip__nav--next {
		right: 6px;
	}

	.mf-flip__bottom {
		gap: 8px;
		padding: 0 8px;
	}

	/* Dar ekranda ilk/son sayfa ve kip seçici çubuğu tıkıyor. */
	.mf-flip__btn--ghost,
	.mf-flip__seg,
	.mf-flip__zoom-label {
		display: none;
	}

	.mf-flip__btn {
		width: 34px;
		height: 34px;
	}

	.mf-flip__pager,
	.mf-flip__pager-input {
		min-width: 74px;
		font-size: 12px;
	}

	.mf-flip__thumbs {
		grid-template-columns: repeat( auto-fill, minmax( 74px, 1fr ) );
		gap: 10px;
		padding: 12px;
	}

	.mf-flip__panel--thumbs {
		max-height: 62%;
	}
}

/* Yakınlaştırma düğmeleri dokunmatikte gereksiz yer kaplamasın. */
@media ( max-width: 480px ) {
	.mf-flip__group--right .mf-flip__btn {
		display: none;
	}

	.mf-flip__group--right {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mf-flip__leaf,
	.mf-flip__book,
	.mf-flip__zoom,
	.mf-flip--reader,
	.mf-flip__panel--thumbs {
		transition: none !important;
		animation: none !important;
	}

	.mf-flip__face.is-loading::before {
		animation: none;
	}
}

/* Sayı sayfası şablonu ----------------------------------------------- */

.mf-issue-page {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 20px 64px;
}

.mf-issue-page__head {
	margin-bottom: 26px;
}

.mf-issue-page__back {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 13px;
	text-decoration: none;
	opacity: 0.7;
}

.mf-issue-page__back:hover {
	opacity: 1;
}

.mf-issue-page__number {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
}

.mf-issue-page__title {
	margin: 4px 0 0;
	line-height: 1.2;
}

.mf-issue-page__intro {
	max-width: 68ch;
	margin-top: 14px;
	opacity: 0.85;
}

.mf-issue-page__actions {
	margin-top: 18px;
}

.mf-issue-page__read {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	border-radius: 999px;
	background: #16181b;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mf-issue-page__read svg {
	width: 18px;
	height: 18px;
}

.mf-issue-page__read:hover {
	color: #fff;
	transform: translateY( -1px );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, 0.22 );
}

.mf-issue-page__more {
	margin-top: 46px;
}

.mf-issue-page__more h2 {
	margin: 0 0 20px;
	font-size: 18px;
}

@media ( max-width: 760px ) {
	.mf-issue-page {
		padding: 24px 0 40px;
	}

	.mf-issue-page__head,
	.mf-issue-page__more {
		padding: 0 16px;
	}
}