/**
 * Sinbad Protokoller — frontend stilleri
 *
 * Değişkenler :root'a değil widget köküne (.protokoller) yazılıyor;
 * başka eklentilerle isim çakışması olmasın diye.
 */

.protokoller {
	--pk-accent: #e31e24;
	--pk-accent-dark: #bd1117;
	--pk-ink: #16202b;
	--pk-muted: #6b7684;
	--pk-surface: #ffffff;
	--pk-border: #e4e8ed;
	--pk-radius: 14px;
	--pk-gap: 12px;
	--pk-cols: 3;
	--pk-ratio: 1.5;
	--pk-ease: cubic-bezier(.25, .46, .45, .94);

	box-sizing: border-box;
	width: 100%;
}

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

/* ==================================================================
   Düzenleyici uyarısı (ziyaretçi görmez)
   ================================================================== */

.protokoller.pk-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 24px;
	border: 2px dashed var(--pk-border);
	border-radius: var(--pk-radius);
	background: #f8fafc;
	color: var(--pk-muted);
	font-size: 15px;
}

.pk-notice__icon {
	font-size: 20px;
	line-height: 1;
}

/* ==================================================================
   Ortak: PDF ikonu (görsel yoksa)
   ================================================================== */

.pk-fileicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--pk-accent);
	background:
		linear-gradient(135deg, rgba(227, 30, 36, .08) 0%, rgba(227, 30, 36, .02) 100%);
}

.pk-fileicon svg {
	width: 46%;
	height: 46%;
	max-width: 40px;
	max-height: 40px;
}

/* ==================================================================
   Ortak: butonlar
   ================================================================== */

.pk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 17px;
	border: 1px solid var(--pk-accent);
	border-radius: 999px;
	background: var(--pk-accent);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background .22s var(--pk-ease), border-color .22s var(--pk-ease), transform .22s var(--pk-ease), color .22s var(--pk-ease);
}

.pk-btn:hover {
	background: var(--pk-accent-dark);
	border-color: var(--pk-accent-dark);
	transform: translateY(-1px);
}

.pk-btn:focus-visible {
	outline: 3px solid var(--pk-accent);
	outline-offset: 2px;
}

.pk-btn--ghost {
	background: transparent;
	border-color: var(--pk-border);
	color: var(--pk-ink) !important;
}

.pk-btn--ghost:hover {
	background: transparent;
	border-color: var(--pk-accent);
	color: var(--pk-accent) !important;
}

.pk-btn__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ==================================================================
   LİSTE görünümü
   ================================================================== */

.pk-list {
	display: flex;
	flex-direction: column;
	gap: var(--pk-gap);
}

.pk-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 18px;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	background: var(--pk-surface);
	transition: border-color .25s var(--pk-ease), transform .25s var(--pk-ease), box-shadow .25s var(--pk-ease);
}

.pk-row:hover {
	border-color: var(--pk-accent);
	transform: translateX(3px);
}

/* Sol kenardaki vurgu şeridi */
.pk-row {
	position: relative;
	overflow: hidden;
}

.pk-row::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--pk-accent);
	opacity: 0;
	transition: opacity .25s var(--pk-ease);
}

.pk-row:hover::before {
	opacity: 1;
}

.pk-row__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: #f5f7f9;
}

.pk-row__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pk-row__body {
	flex: 1;
	min-width: 0;
}

.pk-row__title {
	margin: 0;
	color: var(--pk-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	word-break: break-word;
}

.pk-row__meta {
	display: block;
	margin-top: 3px;
	color: var(--pk-muted);
	font-size: 12.5px;
	line-height: 1.45;
	word-break: break-all;
}

.pk-row__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

@media (max-width: 720px) {

	.pk-row {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px;
	}

	.pk-row__body {
		flex-basis: calc(100% - 74px);
	}

	.pk-row__actions {
		flex-basis: 100%;
	}

	.pk-row__actions .pk-btn {
		flex: 1;
	}
}

/* ==================================================================
   KART görünümü
   ================================================================== */

.pk-cards {
	display: grid;
	grid-template-columns: repeat(var(--pk-cols), minmax(0, 1fr));
	gap: var(--pk-gap);
}

.pk-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	background: var(--pk-surface);
	overflow: hidden;
	transition: border-color .28s var(--pk-ease), transform .28s var(--pk-ease), box-shadow .28s var(--pk-ease);
}

.pk-card:hover {
	border-color: var(--pk-accent);
	transform: translateY(-4px);
}

.pk-card__cover {
	position: relative;
	display: block;
	aspect-ratio: var(--pk-ratio);
	background: #f5f7f9;
	overflow: hidden;
	text-decoration: none !important;
}

.pk-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--pk-ease);
}

.pk-card:hover .pk-card__img {
	transform: scale(1.05);
}

/* Görsel yoksa ikon ortalanır ve zemin yumuşar */
.pk-card__cover--icon {
	background: #fff;
}

.pk-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--pk-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
}

.pk-card__body {
	flex: 1;
	padding: 14px 16px 10px;
}

.pk-card__title {
	margin: 0;
	color: var(--pk-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	word-break: break-word;
}

.pk-card__meta {
	display: block;
	margin-top: 5px;
	color: var(--pk-muted);
	font-size: 12.5px;
	line-height: 1.45;
	word-break: break-all;
}

.pk-card__actions {
	display: flex;
	gap: 8px;
	padding: 0 16px 16px;
}

.pk-card__actions .pk-btn {
	flex: 1;
	padding-left: 12px;
	padding-right: 12px;
}

/* ==================================================================
   Hareket azaltma tercihi
   ================================================================== */

@media (prefers-reduced-motion: reduce) {

	.protokoller * {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}

	.pk-row:hover,
	.pk-card:hover,
	.pk-btn:hover {
		transform: none;
	}
}