/**
 * Ori Okur — panel görünümü.
 * Ori lime aksan, katmanlı antrasit koyu mod. Harici kütüphane yok.
 */

/*
 * KRİTİK: Aşağıdaki .ori-okur-* kuralları display değeri atadığı için
 * tarayıcının yerleşik [hidden] { display: none } kuralını ezer.
 * Bu satır olmadan "Panelin hazırlanıyor" şeridi panel dolduktan sonra da
 * ekranda kalır. Yazar sırası değil özgüllük meselesi: !important şart.
 */
.ori-okur [hidden],
.ori-okur-kaydet-kutu [hidden] {
	display: none !important;
}

.ori-okur {
	--ori-okur-aksan: #8ec500;
	--ori-okur-aksan-parlak: #a6de00;
	--ori-okur-metin: #1c1c1c;
	--ori-okur-metin-soluk: #6b6b6b;
	--ori-okur-zemin: #ffffff;
	--ori-okur-kart: #f7f8f5;
	--ori-okur-cizgi: #e4e6e0;
	--ori-okur-yaricap: 10px;

	color: var(--ori-okur-metin);
	font-size: 16px;
	line-height: 1.6;
	max-width: 980px;
	margin: 0 auto;
}

/* Ori Gece Modu ve tema koyu semalari. */
body.dark-mode .ori-okur,
body.ori-gece .ori-okur,
html[data-theme="dark"] .ori-okur,
body.dark-scheme .ori-okur,
.dark-scheme .ori-okur {
	--ori-okur-metin: #ededed;
	--ori-okur-metin-soluk: #9a9a9a;
	--ori-okur-zemin: #121212;
	--ori-okur-kart: #1a1a1a;
	--ori-okur-cizgi: #2c2c2c;
}

/* Yukleniyor */

.ori-okur-yukleniyor {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 40px 4px;
	color: var(--ori-okur-metin-soluk);
	font-size: 15px;
}

.ori-okur-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--ori-okur-cizgi);
	border-top-color: var(--ori-okur-aksan);
	border-radius: 50%;
	animation: ori-okur-don 0.7s linear infinite;
	flex: none;
}

@keyframes ori-okur-don {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ori-okur-spinner { animation-duration: 2s; }
}

/* Misafir */

.ori-okur-misafir-kart {
	background: var(--ori-okur-kart);
	border: 1px solid var(--ori-okur-cizgi);
	border-radius: var(--ori-okur-yaricap);
	padding: 32px 28px;
	text-align: center;
}

.ori-okur-misafir-baslik {
	margin: 0 0 10px;
	font-size: 24px;
	line-height: 1.25;
}

.ori-okur-misafir-metin {
	margin: 0 auto 22px;
	max-width: 520px;
	color: var(--ori-okur-metin-soluk);
}

.ori-okur-misafir-eylem {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Dugmeler */

.ori-okur-dugme {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ori-okur-dugme-birincil {
	background: var(--ori-okur-aksan);
	color: #10240a;
}

.ori-okur-dugme-birincil:hover,
.ori-okur-dugme-birincil:focus {
	background: var(--ori-okur-aksan-parlak);
	color: #10240a;
}

.ori-okur-dugme-ikincil {
	background: transparent;
	border-color: var(--ori-okur-cizgi);
	color: var(--ori-okur-metin);
}

.ori-okur-dugme-ikincil:hover,
.ori-okur-dugme-ikincil:focus {
	border-color: var(--ori-okur-aksan);
	color: var(--ori-okur-metin);
}

/* Baslik */

.ori-okur-baslik-alani {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ori-okur-cizgi);
}

.ori-okur-kimlik {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.ori-okur-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ori-okur-kart);
	flex: none;
	object-fit: cover;
}

.ori-okur-kimlik-metin {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ori-okur-selam {
	font-size: 13px;
	color: var(--ori-okur-metin-soluk);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ori-okur-ad {
	font-size: 21px;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ori-okur-rozetler {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ori-okur-rozet {
	background: var(--ori-okur-kart);
	border: 1px solid var(--ori-okur-cizgi);
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 13px;
	color: var(--ori-okur-metin-soluk);
}

.ori-okur-rozet b {
	color: var(--ori-okur-metin);
}

.ori-okur-rozet-uyari {
	border-color: var(--ori-okur-aksan);
}

/* Sekmeler */

.ori-okur-sekmeler {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 18px 0 24px;
	border-bottom: 1px solid var(--ori-okur-cizgi);
}

@media (max-width: 720px) {
	.ori-okur-sekmeler {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ori-okur-sekmeler::-webkit-scrollbar {
		display: none;
	}
}

.ori-okur-sekme {
	appearance: none;
	-webkit-appearance: none;
	text-transform: none;
	letter-spacing: 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 9px 14px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	color: var(--ori-okur-metin-soluk);
	cursor: pointer;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 7px;
}

.ori-okur-sekme:hover {
	color: var(--ori-okur-metin);
}

.ori-okur-sekme-aktif {
	color: var(--ori-okur-metin);
	border-bottom-color: var(--ori-okur-aksan);
}

.ori-okur-sekme:focus-visible {
	outline: 2px solid var(--ori-okur-aksan);
	outline-offset: 2px;
	border-radius: 4px;
}

.ori-okur-sekme-yakinda {
	color: var(--ori-okur-metin-soluk);
	opacity: 0.55;
	font-size: 15px;
	line-height: 1;
}

/* Bolumler */

.ori-okur-bos {
	background: var(--ori-okur-kart);
	border: 1px dashed var(--ori-okur-cizgi);
	border-radius: var(--ori-okur-yaricap);
	padding: 34px 26px;
	text-align: center;
}

.ori-okur-bos-baslik {
	margin: 0 0 8px;
	font-size: 19px;
}

.ori-okur-bos-metin {
	margin: 0 auto 16px;
	max-width: 540px;
	color: var(--ori-okur-metin-soluk);
}

.ori-okur-bos-etiket {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ori-okur-aksan);
}

/* Alt */

.ori-okur-alt {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 30px;
	padding-top: 16px;
	border-top: 1px solid var(--ori-okur-cizgi);
	font-size: 14px;
}

.ori-okur-alt-baglanti {
	color: var(--ori-okur-metin-soluk);
	text-decoration: none;
}

.ori-okur-alt-baglanti:hover {
	color: var(--ori-okur-aksan);
}

/* Hata */

.ori-okur-hata {
	background: var(--ori-okur-kart);
	border: 1px solid var(--ori-okur-cizgi);
	border-radius: var(--ori-okur-yaricap);
	padding: 26px;
	text-align: center;
}

/* Dar ekran */

@media (max-width: 600px) {
	.ori-okur-baslik-alani {
		align-items: flex-start;
	}

	.ori-okur-avatar {
		width: 46px;
		height: 46px;
	}

	.ori-okur-ad {
		font-size: 18px;
	}

	.ori-okur-misafir-kart {
		padding: 26px 18px;
	}

	.ori-okur-misafir-eylem .ori-okur-dugme {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Faz 1: misafir aktarımı, akış listesi, yazı kartları
   --------------------------------------------------------------------------- */

.ori-okur-aktarim {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 18px 0 0;
	padding: 14px 18px;
	background: var(--ori-okur-kart);
	border: 1px solid var(--ori-okur-aksan);
	border-radius: var(--ori-okur-yaricap);
}

.ori-okur-aktarim-metin {
	margin: 0;
	font-size: 15px;
}

.ori-okur-aktarim-eylem {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ori-okur-dugme-kucuk {
	padding: 7px 15px;
	font-size: 14px;
}

.ori-okur-akis-yukleniyor {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 26px 4px;
	color: var(--ori-okur-metin-soluk);
	font-size: 15px;
}

.ori-okur-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ori-okur-kart {
	display: flex;
	gap: 16px;
	padding: 14px;
	background: var(--ori-okur-kart);
	border: 1px solid var(--ori-okur-cizgi);
	border-radius: var(--ori-okur-yaricap);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.ori-okur-kart-cikiyor {
	opacity: 0;
	transform: translateX(-10px);
}

.ori-okur-kart-gorsel {
	flex: none;
	width: 128px;
	height: 92px;
	border-radius: 7px;
	overflow: hidden;
	display: block;
	background: var(--ori-okur-cizgi);
}

.ori-okur-kart-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ori-okur-kart-govde {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ori-okur-kart-kategori {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ori-okur-aksan);
}

.ori-okur-kart-baslik {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
}

.ori-okur-kart-baslik a {
	color: var(--ori-okur-metin);
	text-decoration: none;
}

.ori-okur-kart-baslik a:hover {
	color: var(--ori-okur-aksan);
}

.ori-okur-kart-ust {
	font-size: 13px;
	color: var(--ori-okur-metin-soluk);
}

.ori-okur-kart-ozet {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ori-okur-metin-soluk);
}

.ori-okur-kart-eylem {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.ori-okur-daha {
	display: block;
	margin: 20px auto 0;
}

@media (max-width: 600px) {
	.ori-okur-kart {
		flex-direction: column;
		gap: 12px;
	}

	.ori-okur-kart-gorsel {
		width: 100%;
		height: 168px;
	}

	.ori-okur-aktarim {
		flex-direction: column;
		align-items: flex-start;
	}
}