/* ==========================================================================
   PYP — Parola Yönetim Portalı
   Tasarım sistemi. Metronic bundle'ının üstüne binen tek özel stil dosyası.
   Tüm sayfalarda (_Layout + 3 auth sayfası) yüklenir.
   ========================================================================== */

:root {
	--pyp-blue: #0078c2;
	--pyp-blue-600: #0166a6;
	--pyp-blue-700: #015382;
	--pyp-blue-050: #eaf4fc;
	--pyp-blue-100: #d3e9f8;

	--pyp-green: #7ab648;
	--pyp-green-050: #eef7e6;

	--pyp-amber: #e08a1e;
	--pyp-amber-050: #fdf3e3;

	--pyp-red: #d64550;
	--pyp-red-050: #fdeced;

	--pyp-bg: #f4f7fb;
	--pyp-surface: #ffffff;
	--pyp-ink: #0f1b2d;
	--pyp-ink-2: #33465e;
	--pyp-muted: #5b6b7f;
	--pyp-faint: #8b98a9;
	--pyp-line: #e3e9f0;
	--pyp-line-soft: #eef2f7;

	--pyp-r-sm: 10px;
	--pyp-r-md: 14px;
	--pyp-r-lg: 18px;
	--pyp-r-xl: 24px;

	--pyp-sh-xs: 0 1px 2px rgba(15, 27, 45, .06);
	--pyp-sh-sm: 0 2px 6px rgba(15, 27, 45, .06), 0 1px 2px rgba(15, 27, 45, .04);
	--pyp-sh-md: 0 10px 24px rgba(15, 27, 45, .09);
	--pyp-sh-lg: 0 24px 56px rgba(15, 27, 45, .16);

	--pyp-topbar-h: 68px;
	--pyp-rail-w: 72px;
	--pyp-maxw: 1140px;

	--pyp-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Taban
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
}

body.pyp-body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--pyp-bg);
	color: var(--pyp-ink);
	font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pyp-body *,
body.app-blank * {
	-webkit-tap-highlight-color: transparent;
}

.pyp-container {
	width: 100%;
	max-width: var(--pyp-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

::selection {
	background: var(--pyp-blue);
	color: #fff;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background: #ccd7e3;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #b3c2d3;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--pyp-blue);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Üst çubuk
   -------------------------------------------------------------------------- */
.pyp-topbar {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--pyp-surface);
	border-bottom: 1px solid var(--pyp-line);
	box-shadow: var(--pyp-sh-xs);
}

/* Üst çubuk tam genişlikte: marka en solda (ray'ın üstünde), kullanıcı en sağda.
   Ortalanmış dar bir kap kullanmak sağda büyük bir boşluk bırakıyordu. */
.pyp-topbar__inner {
	width: 100%;
	padding: 0 22px;
	height: var(--pyp-topbar-h);
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Marka */
.pyp-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}

.pyp-brand__logo {
	height: 38px;
	width: auto;
	border-radius: 8px;
	display: block;
}

.pyp-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.pyp-brand__title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--pyp-ink);
	letter-spacing: -.15px;
	white-space: nowrap;
}

.pyp-brand__sub {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--pyp-faint);
	white-space: nowrap;
}

/* Sağ blok */
.pyp-topbar__right {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

/* Kullanıcı */
.pyp-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pyp-blue) 0%, var(--pyp-blue-700) 100%);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .5px;
	flex-shrink: 0;
	user-select: none;
}

.pyp-avatar--lg {
	width: 48px;
	height: 48px;
	font-size: 17px;
}

/* Baş harfler taban katman; AD fotoğrafı yüklenirse üstünü kapatır.
   Fotoğraf gelmezse <img> kendini kaldırır ve baş harfler görünür kalır. */
.pyp-avatar {
	position: relative;
	overflow: hidden;
}

.pyp-avatar__initials {
	line-height: 1;
}

.pyp-avatar__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.pyp-user__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 10px 5px 5px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .18s var(--pyp-ease), border-color .18s var(--pyp-ease);
}

.pyp-user__btn:hover,
.pyp-user__btn[aria-expanded="true"] {
	background: var(--pyp-line-soft);
	border-color: var(--pyp-line);
}

.pyp-user__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
}

.pyp-user__name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pyp-ink);
	white-space: nowrap;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pyp-user__reg {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--pyp-faint);
}

.pyp-user__caret {
	font-size: 12px;
	color: var(--pyp-faint);
}

.pyp-user__menu.dropdown-menu {
	min-width: 268px;
	padding: 8px;
	margin-top: 10px;
	border: 1px solid var(--pyp-line);
	border-radius: var(--pyp-r-md);
	box-shadow: var(--pyp-sh-md);
	background: var(--pyp-surface);
}

.pyp-user__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 12px;
}

.pyp-user__cardname {
	font-size: 14px;
	font-weight: 700;
	color: var(--pyp-ink);
	line-height: 1.3;
}

.pyp-user__cardreg {
	font-size: 12.5px;
	color: var(--pyp-muted);
}

.pyp-user__menu .dropdown-divider {
	margin: 4px 0;
	border-top: 1px solid var(--pyp-line-soft);
}

.pyp-user__logout.dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--pyp-r-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--pyp-ink-2);
}

.pyp-user__logout.dropdown-item:hover {
	background: var(--pyp-red-050);
	color: var(--pyp-red);
}

/* --------------------------------------------------------------------------
   İkon rayı (masaüstü)
   Dar, yalnızca ikonlardan oluşan şerit. Üzerine gelince etiket çıkar.
   -------------------------------------------------------------------------- */
.pyp-shell {
	flex: 1 0 auto;
	display: flex;
	align-items: stretch;
}

.pyp-shell__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Ray, kabuk yüksekliği kadar uzar; ikonlar içerideki sticky sarmalayıcıda
   durur. (Ray'a doğrudan 100vh yükseklik vermek sayfayı taşırıyordu.) */
.pyp-rail {
	flex: 0 0 var(--pyp-rail-w);
	width: var(--pyp-rail-w);
	background: var(--pyp-surface);
	border-right: 1px solid var(--pyp-line);
	z-index: 20;
}

.pyp-rail__inner {
	position: sticky;
	top: var(--pyp-topbar-h);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 0;
	/* Tooltip taşabilsin */
	overflow: visible;
}

/* Yardım'ı ayıran ince çizgi */
.pyp-rail__sep {
	width: 26px;
	height: 1px;
	margin: 4px 0;
	background: var(--pyp-line);
}

.pyp-rail__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	color: var(--pyp-muted);
	text-decoration: none;
	transition: background-color .18s var(--pyp-ease), color .18s var(--pyp-ease);
}

.pyp-rail__link i {
	font-size: 23px;
	line-height: 1;
}

.pyp-rail__link img {
	width: 23px;
	height: 23px;
	object-fit: contain;
	opacity: .8;
	transition: opacity .18s var(--pyp-ease);
}

.pyp-rail__link:hover {
	background: var(--pyp-line-soft);
	color: var(--pyp-ink);
}

.pyp-rail__link:hover img {
	opacity: 1;
}

.pyp-rail__link.is-active {
	background: var(--pyp-blue-050);
	color: var(--pyp-blue-600);
}

.pyp-rail__link.is-active img {
	opacity: 1;
}

/* Aktif göstergesi: sol kenarda kısa mavi çubuk */
.pyp-rail__link.is-active::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 22px;
	border-radius: 0 3px 3px 0;
	background: var(--pyp-blue);
}

/* Hover etiketi */
.pyp-rail__link::after {
	content: attr(data-label);
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	padding: 7px 11px;
	border-radius: 8px;
	background: var(--pyp-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	box-shadow: var(--pyp-sh-md);
	transition: opacity .15s var(--pyp-ease), visibility .15s var(--pyp-ease);
	z-index: 30;
}

.pyp-rail__link:hover::after,
.pyp-rail__link:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* Ekran okuyucu metni */
.pyp-rail__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Alt sekme çubuğu (mobil) — masaüstünde gizli
   -------------------------------------------------------------------------- */
.pyp-tabbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	background: var(--pyp-surface);
	border-top: 1px solid var(--pyp-line);
	box-shadow: 0 -2px 14px rgba(15, 27, 45, .07);
	padding-bottom: env(safe-area-inset-bottom);
}

.pyp-tabbar__link {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 9px 4px 8px;
	color: var(--pyp-faint);
	text-decoration: none;
	font-size: 10.5px;
	font-weight: 600;
	text-align: center;
}

.pyp-tabbar__link i {
	font-size: 19px;
	line-height: 1;
}

.pyp-tabbar__link img {
	width: 19px;
	height: 19px;
	object-fit: contain;
	opacity: .65;
}

.pyp-tabbar__link span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pyp-tabbar__link.is-active {
	color: var(--pyp-blue-600);
}

.pyp-tabbar__link.is-active img {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Ana alan & alt bilgi
   -------------------------------------------------------------------------- */
.pyp-main {
	flex: 1 0 auto;
	padding: 36px 0 56px;
}

.pyp-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--pyp-line);
	background: var(--pyp-surface);
	padding: 18px 0;
}

.pyp-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--pyp-faint);
}

.pyp-footer__links a {
	color: var(--pyp-muted);
	font-weight: 600;
	text-decoration: none;
}

.pyp-footer__links a:hover {
	color: var(--pyp-blue);
	text-decoration: underline;
}

.pyp-footer__sep {
	margin: 0 8px;
	color: var(--pyp-line);
}

/* --------------------------------------------------------------------------
   Sayfa başlığı & kırıntı yolu
   -------------------------------------------------------------------------- */
.pyp-page--narrow {
	max-width: 620px;
	margin: 0 auto;
}

.pyp-page__head {
	margin-bottom: 26px;
}

.pyp-page__title {
	margin: 0;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.5px;
	color: var(--pyp-ink);
}

.pyp-page__lead {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--pyp-muted);
	max-width: 60ch;
}

.pyp-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 500;
}

.pyp-crumbs a {
	color: var(--pyp-muted);
	text-decoration: none;
}

.pyp-crumbs a:hover {
	color: var(--pyp-blue);
	text-decoration: underline;
}

.pyp-crumbs__sep {
	color: #c4cedb;
}

.pyp-crumbs__current {
	color: var(--pyp-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Kart ızgarası
   -------------------------------------------------------------------------- */
.pyp-grid {
	display: grid;
	gap: 20px;
}

.pyp-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pyp-card {
	display: flex;
	flex-direction: column;
	background: var(--pyp-surface);
	border: 1px solid var(--pyp-line);
	border-radius: var(--pyp-r-lg);
	box-shadow: var(--pyp-sh-sm);
	padding: 26px 24px 20px;
	text-decoration: none;
	color: inherit;
	transition: transform .2s var(--pyp-ease), box-shadow .2s var(--pyp-ease), border-color .2s var(--pyp-ease);
}

.pyp-card--action:hover {
	transform: translateY(-3px);
	border-color: var(--pyp-blue-100);
	box-shadow: var(--pyp-sh-md);
}

.pyp-card__figure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var(--pyp-r-md);
	background: var(--pyp-blue-050);
	margin-bottom: 18px;
}

.pyp-card__figure img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.pyp-card__figure--warn {
	background: var(--pyp-amber-050);
}

/* Marka logoları (SAP / AD) kırpılmadan, zeminsiz gösterilir */
.pyp-card__figure--plain {
	background: transparent;
	width: auto;
	height: 46px;
	border-radius: 0;
	justify-content: flex-start;
}

.pyp-card__figure--plain img {
	width: auto;
	height: 100%;
	max-width: 150px;
}

.pyp-card__body {
	display: block;
	flex: 1 1 auto;
}

.pyp-card__title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--pyp-ink);
	margin-bottom: 6px;
	letter-spacing: -.2px;
}

.pyp-card__text {
	display: block;
	font-size: 14px;
	color: var(--pyp-muted);
	line-height: 1.6;
}

.pyp-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--pyp-line-soft);
	font-size: 14px;
	font-weight: 700;
	color: var(--pyp-blue);
}

.pyp-card__cta i {
	font-size: 14px;
	transition: transform .2s var(--pyp-ease);
}

.pyp-card--action:hover .pyp-card__cta i {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Anasayfa marka kartları: logo ortada ve belirgin, açıklama metni yok
   -------------------------------------------------------------------------- */
.pyp-card--brand {
	align-items: center;
	text-align: center;
	padding: 34px 24px 22px;
}

.pyp-card__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 104px;
	margin-bottom: 22px;
}

.pyp-card__brand img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* SAP logosu sade bir amblem, AD logosu ise amblem + "Microsoft Active Directory"
   yazısından oluşuyor. AD kilidine tam yükseklik verilip SAP biraz kısılınca
   iki amblem gözle aynı ağırlıkta duruyor. */
.pyp-card__brand--sap img {
	height: 84%;
}

.pyp-card--brand .pyp-card__title {
	font-size: 18px;
	margin-bottom: 20px;
}

.pyp-card--brand .pyp-card__cta {
	justify-content: center;
	width: 100%;
	margin-top: auto;
}

/* Bilgi notu */
.pyp-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px;
	padding: 16px 18px;
	border: 1px solid var(--pyp-blue-100);
	border-radius: var(--pyp-r-md);
	background: var(--pyp-blue-050);
	font-size: 14px;
	color: var(--pyp-ink-2);
}

.pyp-note__icon {
	font-size: 19px;
	color: var(--pyp-blue);
	flex-shrink: 0;
	margin-top: 1px;
}

.pyp-note strong {
	display: block;
	color: var(--pyp-ink);
}

.pyp-note a {
	color: var(--pyp-blue-600);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   İşlem paneli (form sayfaları)
   -------------------------------------------------------------------------- */
.pyp-panel {
	background: var(--pyp-surface);
	border: 1px solid var(--pyp-line);
	border-radius: var(--pyp-r-lg);
	box-shadow: var(--pyp-sh-sm);
	overflow: hidden;
}

.pyp-panel__head {
	padding: 30px 30px 22px;
	border-bottom: 1px solid var(--pyp-line-soft);
	background: linear-gradient(180deg, #fbfdff 0%, var(--pyp-surface) 100%);
	text-align: center;
}

.pyp-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: var(--pyp-r-md);
	background: var(--pyp-blue-050);
	margin-bottom: 14px;
}

.pyp-panel__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.pyp-panel__icon--warn {
	background: var(--pyp-amber-050);
}

.pyp-panel__title {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.3px;
	color: var(--pyp-ink);
}

.pyp-panel__lead {
	margin: 7px auto 0;
	max-width: 46ch;
	font-size: 14px;
	color: var(--pyp-muted);
}

.pyp-panel__body {
	padding: 26px 30px 30px;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.pyp-field + .pyp-field {
	margin-top: 18px;
}

.pyp-label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pyp-ink-2);
}

.pyp-form .form-control,
.pyp-form .form-select {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px !important;
	border: 1px solid var(--pyp-line) !important;
	border-radius: var(--pyp-r-sm) !important;
	background-color: #fcfdfe !important;
	font-size: 15px !important;
	color: var(--pyp-ink) !important;
	transition: border-color .18s var(--pyp-ease), box-shadow .18s var(--pyp-ease), background-color .18s var(--pyp-ease);
}

.pyp-form .form-control:focus,
.pyp-form .form-select:focus {
	border-color: var(--pyp-blue) !important;
	background-color: #fff !important;
	box-shadow: 0 0 0 4px var(--pyp-blue-050) !important;
	outline: none;
}

.pyp-form .form-control::placeholder {
	color: #a8b4c3;
}

.pyp-form .form-control:disabled {
	background-color: var(--pyp-line-soft) !important;
	color: var(--pyp-ink) !important;
}

/* Parola alanı: göz düğmesi kutunun İÇİNDE, sağ kenarda durur.
   (Bootstrap input-group kullanılmıyor; .form-control width:100% olduğu için
   addon alt satıra kayıyordu.) */
.pyp-passfield {
	position: relative;
	display: block;
}

.pyp-passfield .form-control {
	padding-right: 52px !important;
}

.pyp-passfield__toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 9px;
	background: transparent;
	cursor: pointer;
	transition: background-color .18s var(--pyp-ease);
	z-index: 2;
}

.pyp-passfield__toggle:hover {
	background: var(--pyp-line-soft);
}

.pyp-passfield__toggle img {
	width: 19px;
	height: auto;
	display: block;
	opacity: .62;
}

.pyp-passfield__toggle:hover img {
	opacity: 1;
}

/* --- Canlı parola kriterleri ---
   Başlangıçta kapalı; kullanıcı parola yazmaya başlayınca açılır.
   Yatay dolgu sabit tutulur, böylece açılırken metin yana kaymaz. */
.pyp-checks {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	padding: 0 18px;
	border: 0 solid var(--pyp-line);
	border-radius: var(--pyp-r-md);
	background: #f8fafc;
	overflow: hidden;
	transition:
		max-height .3s var(--pyp-ease),
		opacity .22s var(--pyp-ease),
		margin-top .3s var(--pyp-ease),
		padding-top .3s var(--pyp-ease),
		padding-bottom .3s var(--pyp-ease),
		border-width .3s var(--pyp-ease);
}

.pyp-checks.is-open {
	max-height: 460px;
	opacity: 1;
	margin-top: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	border-width: 1px;
}

.pyp-checks__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.pyp-checks__title {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--pyp-faint);
}

.pyp-checks__score {
	font-size: 12px;
	font-weight: 700;
	color: var(--pyp-muted);
	font-variant-numeric: tabular-nums;
}

.pyp-checks__meter {
	height: 4px;
	border-radius: 4px;
	background: #e5eaf1;
	overflow: hidden;
	margin-bottom: 14px;
}

.pyp-checks__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--pyp-amber), var(--pyp-green));
	transition: width .25s var(--pyp-ease);
}

.pyp-checks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.pyp-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--pyp-muted);
	transition: color .18s var(--pyp-ease);
}

.pyp-check__mark {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 1.5px solid #cbd5e1;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	background: #fff;
	transition: background-color .2s var(--pyp-ease), border-color .2s var(--pyp-ease), color .2s var(--pyp-ease);
}

.pyp-check.is-ok {
	color: var(--pyp-ink);
}

.pyp-check.is-ok .pyp-check__mark {
	background: var(--pyp-green);
	border-color: var(--pyp-green);
	color: #fff;
}

.pyp-check.is-bad {
	color: #b23a44;
}

.pyp-check.is-bad .pyp-check__mark {
	border-color: var(--pyp-red);
	background: var(--pyp-red-050);
}

.pyp-check__note {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--pyp-red);
}

.pyp-check__note:empty {
	display: none;
}

/* select2 */
.select2-container--bootstrap5 .select2-selection,
.select2-container .select2-selection--single {
	min-height: 48px !important;
	height: auto !important;
	padding: 6px 10px !important;
	border: 1px solid var(--pyp-line) !important;
	border-radius: var(--pyp-r-sm) !important;
	background-color: #fcfdfe !important;
	display: flex !important;
	align-items: center;
	transition: border-color .18s var(--pyp-ease), box-shadow .18s var(--pyp-ease);
}

.select2-container--open .select2-selection,
.select2-container--focus .select2-selection {
	border-color: var(--pyp-blue) !important;
	box-shadow: 0 0 0 4px var(--pyp-blue-050) !important;
}

.select2-container .select2-selection__rendered {
	font-size: 15px;
	color: var(--pyp-ink) !important;
	padding-left: 4px !important;
}

.select2-container .select2-selection__placeholder {
	color: #a8b4c3 !important;
}

.select2-dropdown {
	border: 1px solid var(--pyp-line) !important;
	border-radius: var(--pyp-r-sm) !important;
	box-shadow: var(--pyp-sh-md) !important;
	overflow: hidden;
}

.select2-results__option {
	font-size: 14.5px;
	padding: 10px 14px !important;
}

.select2-container--bootstrap5 .select2-results__option--highlighted,
.select2-results__option--highlighted {
	background: var(--pyp-blue-050) !important;
	color: var(--pyp-ink) !important;
}

.select2-container--bootstrap5 .select2-results__option--selected,
.select2-results__option[aria-selected="true"] {
	background: var(--pyp-blue) !important;
	color: #fff !important;
}

/* Parola kriterleri bağlantısı */
.pyp-criteria-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	padding: 0;
	background: none;
	border: none;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pyp-blue);
	cursor: pointer;
}

.pyp-criteria-link:hover {
	text-decoration: underline;
}

/* Buton satırı */
.pyp-actions {
	display: flex;
	gap: 10px;
	margin-top: 26px;
}

.pyp-actions .pyp-btn {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */
.pyp-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 22px !important;
	border: 1px solid transparent !important;
	border-radius: var(--pyp-r-sm) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .18s var(--pyp-ease), border-color .18s var(--pyp-ease), box-shadow .18s var(--pyp-ease), transform .12s var(--pyp-ease);
}

.pyp-btn--primary {
	background: var(--pyp-blue) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(0, 120, 194, .22);
}

.pyp-btn--primary:hover {
	background: var(--pyp-blue-600) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(0, 120, 194, .3);
}

.pyp-btn--ghost {
	background: var(--pyp-surface) !important;
	border-color: var(--pyp-line) !important;
	color: var(--pyp-ink-2) !important;
}

.pyp-btn--ghost:hover {
	background: var(--pyp-line-soft) !important;
	border-color: #d3dde8 !important;
	color: var(--pyp-ink) !important;
}

.pyp-btn--block {
	width: 100%;
}

.pyp-btn:active {
	transform: translateY(1px);
}

.pyp-btn:disabled,
.pyp-btn[disabled] {
	opacity: .65;
	cursor: not-allowed;
	transform: none;
}

/* İptal butonu her zaman ikincil kalsın */
.pyp-actions .pyp-btn--ghost {
	flex: 0 1 34%;
}

/* --------------------------------------------------------------------------
   Onay bloğu (AD bloke kaldırma)
   -------------------------------------------------------------------------- */
.pyp-confirm {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	border: 1px solid var(--pyp-line);
	border-radius: var(--pyp-r-md);
	background: #fbfdff;
	text-align: center;
}

.pyp-confirm__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--pyp-faint);
}

.pyp-confirm__value {
	font-size: 19px;
	font-weight: 700;
	color: var(--pyp-ink);
}

.pyp-confirm__question {
	margin-top: 6px;
	font-size: 14.5px;
	color: var(--pyp-muted);
}

/* --------------------------------------------------------------------------
   Modallar
   -------------------------------------------------------------------------- */
.modal-content {
	border: none !important;
	border-radius: var(--pyp-r-lg) !important;
	box-shadow: var(--pyp-sh-lg) !important;
}

.modal-header {
	padding: 20px 24px !important;
	border-bottom: 1px solid var(--pyp-line-soft) !important;
}

.modal-header .modal-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--pyp-ink);
}

.modal-footer {
	padding: 16px 24px !important;
	border-top: 1px solid var(--pyp-line-soft) !important;
}

.pyp-modal {
	padding: 34px 30px 30px !important;
	text-align: center;
}

.pyp-modal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	margin-bottom: 18px;
}

.pyp-modal__icon--success {
	background: var(--pyp-green-050);
}

.pyp-modal__icon--error {
	background: var(--pyp-red-050);
}

.pyp-modal__icon img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.pyp-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--pyp-ink);
}

.pyp-modal__text {
	margin: 18px 0 8px;
	font-size: 14px;
	color: var(--pyp-muted);
}

.pyp-modal__value {
	margin: 0 auto;
	max-width: 320px;
}

.pyp-modal__value .form-control {
	min-height: 50px;
	text-align: center;
	font-size: 17px !important;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--pyp-ink) !important;
	border: 1px dashed var(--pyp-blue-100) !important;
	border-radius: var(--pyp-r-sm) !important;
	background: var(--pyp-blue-050) !important;
	opacity: 1;
}

.pyp-modal__hint {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--pyp-faint);
}

.pyp-modal__actions {
	margin-top: 26px;
}

.pyp-modal__actions .pyp-btn {
	min-width: 220px;
}

.pyp-modal__note {
	display: block;
	margin: 14px 0 0;
	font-size: 13.5px;
	color: var(--pyp-muted);
}

.pyp-modal__note:empty {
	display: none;
}

/* Parola kriterleri içeriği */
.pyp-criteria {
	padding: 22px 24px !important;
}

.pyp-criteria__head {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--pyp-ink);
}

.pyp-criteria__head--warn {
	margin-top: 22px;
	color: var(--pyp-amber);
}

.pyp-criteria__list {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
	color: var(--pyp-muted);
	line-height: 1.85;
}

.pyp-criteria__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pyp-criteria__tags span {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--pyp-line-soft);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--pyp-ink-2);
}
/* ==========================================================================
   GİRİŞ AKIŞI — 3 EKRAN
   Views/Auth/Login.cshtml, VerificationCode.cshtml, Confirmation.cshtml

   Üçü de aynı orijinal Metronic iskeletini paylaşır (#login-radius >
   .pyp-side paneli + .card form). Bu bölüm o iskeleti markup'a hiç
   dokunmadan modernleştirir; tüm kurallar `body.app-blank` altında kapsanmıştır
   (uygulama içi sayfaların body'si `pyp-body`, bu üçününki `app-blank`).

   ÖNEMLİ: Bu ağaçta transform / filter / backdrop-filter / perspective /
   will-change KULLANILMAZ. Bu özellikler `position: fixed` alt öğeler için yeni
   kapsayıcı blok yaratır ve reCAPTCHA'nın doğrulama penceresini bozar.
   ========================================================================== */

body.app-blank {
	margin: 0;
	/* Açık mavi zemin gövdeye taşındı: form kolonu şeffaf kalınca mavi panelin
	   çapraz kesimi tek ve kesintisiz bir sınır oluşturur. Kolona opak zemin
	   verildiğinde üstte dikey, altta çapraz iki parçalı bir sınır çıkıyor ve
	   aralarında beyaz bir üçgen kalıyordu. */
	background:
		radial-gradient(60% 48% at 84% 12%, rgba(0, 120, 194, .12), transparent 62%),
		radial-gradient(50% 44% at 96% 94%, rgba(122, 182, 72, .08), transparent 60%),
		#e6f0f9 !important;
	color: var(--pyp-ink);
	font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.app-blank #login-radius {
	min-height: 100vh;
	min-height: 100dvh;
}

body.app-blank #login-radius > .d-flex {
	min-height: 100vh;
	min-height: 100dvh;
}

/* --------------------------------------------------------------------------
   Sol panel — diyagonal kesim
   Panel mutlak konumlanır ve sağ kenarı eğik kesilir; form kolonu sağa yaslanıp
   kesimin dışında kalır. Tüm animasyonlar bu panelin içindedir.
   -------------------------------------------------------------------------- */
body.app-blank #login-radius > .d-flex {
	position: relative;
}

/* Kesimin sağındaki boşluğu dolduran paralel bantlar.
   Soldaki panelin ta kendisi: aynı mavi degrade + aynı ince çizgi dokusu.
   Yalnızca opaklıkları düşer, böylece panel sağa doğru soluklaşarak devam eder. */
/* İki bölge: solda koyu mavi panel boydan boya, sağda açık mavi zemin.
   Aradaki soluk bantlar kaldırıldı; o açık mavi artık sağ tarafın arka planı. */

body.app-blank .pyp-side {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 58%;
	overflow: hidden;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 56px 58px;
	color: #fff;
	background: linear-gradient(150deg, #1a8fd6 0%, #0a5f9c 52%, #063a63 100%);
	/* Koyu mavi aşağıya kadar iner: kesim 58% → 41,8% arasında,
	   yani ekranın tam ortasını (50%) orta yükseklikte keser. */
	clip-path: polygon(0 0, 100% 0, 72.07% 100%, 0 100%);
}

/* Kayan ince şeritler */
body.app-blank .pyp-side__stripes {
	position: absolute;
	inset: -30%;
	background: repeating-linear-gradient(115deg,
			rgba(255, 255, 255, .07) 0 2px,
			transparent 2px 22px);
	animation: pyp-side-slide 20s linear infinite;
	pointer-events: none;
}

@keyframes pyp-side-slide {
	to {
		transform: translate3d(120px, 0, 0);
	}
}

/* Merkezden dışa açılan halkalar */
body.app-blank .pyp-side__ring {
	position: absolute;
	width: 210px;
	height: 210px;
	top: 22%;
	left: 14%;
	border: 1.5px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	animation: pyp-side-ripple 6s ease-out infinite;
	pointer-events: none;
}

body.app-blank .pyp-side__ring--2 {
	animation-delay: 2s;
}

body.app-blank .pyp-side__ring--3 {
	animation-delay: 4s;
}

@keyframes pyp-side-ripple {
	from {
		transform: scale(.4);
		opacity: .9;
	}

	to {
		transform: scale(2.2);
		opacity: 0;
	}
}

/* Eski giriş ekranındaki illüstrasyon, mavinin ortasında */
body.app-blank .pyp-side__art {
	position: absolute;
	/* Kesim aşağı indikçe daralıyor; görsel biraz sola ve yukarı alınarak
	   büyütüldüğü halde kesimin içinde kalır. */
	/* Koyu mavi alanın ortasına yerleşir; kesim orta yükseklikte %86'ya
	   kadar açık olduğu için bu genişlikte kırpılmaz. */
	left: 46%;
	top: 47%;
	transform: translate(-50%, -50%);
	width: 68%;
	max-width: 560px;
	height: auto;
	z-index: 1;
	pointer-events: none;
	filter: drop-shadow(0 26px 52px rgba(2, 26, 46, .38));
}

/* Marka bloğu */
body.app-blank .pyp-side__brand {
	position: relative;
	z-index: 2;
}

body.app-blank .pyp-side__logo {
	display: block;
	height: 46px;
	width: auto;
	border-radius: 5px;
	margin-bottom: 18px;
	box-shadow: 0 12px 30px rgba(2, 26, 46, .34);
}

body.app-blank .pyp-side__org {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   Sağ panel — form
   Kesimin dışına, sağa yaslanır. Kart çerçevesi yok: form doğrudan beyaz zeminde.
   -------------------------------------------------------------------------- */
body.app-blank .pyp-side + div {
	position: relative;
	z-index: 2;
	margin-left: auto !important;
	/* Ekranı tam ortadan böler */
	width: 50% !important;
	flex: 0 0 50% !important;
	padding: 40px 48px !important;
	/* Zemin gövdede; kolon şeffaf kalır ki çapraz sınır bölünmesin */
	background: transparent;
}

/* Nokta dokusu da gövdede, mavi panelin altında kalır */
body.app-blank::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(15, 27, 45, .085) 1px, transparent 1px);
	background-size: 22px 22px;
	/* Doku kenarlara doğru silinsin */
	mask-image: radial-gradient(58% 60% at 78% 45%, #000, transparent 78%);
	-webkit-mask-image: radial-gradient(58% 60% at 78% 45%, #000, transparent 78%);
	pointer-events: none;
}

body.app-blank .pyp-side + div > * {
	position: relative;
	z-index: 1;
}

/* Kart
   Genişlik reCAPTCHA'ya göre belirlendi: o kutu 302px sabit ve yeniden
   boyutlandırılamıyor. Alan, reCAPTCHA ve buton aynı genişlikte olsun diye
   kolon da 302px'e sabitlendi — üç farklı genişlik yan yana orantısız duruyordu. */
body.app-blank .card {
	width: 100% !important;
	max-width: 302px !important;
	margin: 0 auto;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* --- Tipografi --- */

/* Başlık: tek satır. Punto, 302px'lik kolona sığacak şekilde ayarlandı;
   daha uzun başlıklar (Güvenlik Doğrulaması) dengeli biçimde iki satıra iner. */
body.app-blank .card h1 {
	margin: 0 0 10px !important;
	color: var(--pyp-ink) !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	letter-spacing: -.035em;
	line-height: 1.12;
	text-align: left;
	text-wrap: balance;
}

/* Form açıklaması */
body.app-blank .pyp-flead {
	margin: 0 !important;
	font-size: 14.5px !important;
	line-height: 1.6;
	font-weight: 400 !important;
	color: #5b6b7f !important;
	text-align: left;
	max-width: 34ch;
}

/* Alan etiketi: küçük, aralıklı, büyük harf */
body.app-blank .pyp-flabel {
	display: block;
	margin-bottom: 9px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #46566a !important;
	text-align: left;
}

/* Sicil alanı: 5 haneli bir numara için tam genişlik gereksiz.
   Kompakt, iri rakamlı, aralıklı bir kutu.
   Seçici .form-control ile birleştirildi: aksi halde dosyada sonra gelen
   .card .form-control kuralı genişliği ve hizayı geri eziyor. */
body.app-blank .card .form-control.pyp-fnum {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 62px;
	margin: 0 !important;
	padding: 16px 14px !important;
	font-size: 27px !important;
	font-weight: 700 !important;
	letter-spacing: 7px !important;
	text-align: center !important;
	text-indent: 7px;
	font-variant-numeric: tabular-nums;
}

/* Yer tutucu artık rakam değil kelime: harf aralığı normale döner */
body.app-blank .card .form-control.pyp-fnum::placeholder {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: normal;
	color: #b9c4d2 !important;
}

/* Telefon numarası vurgusu (SMS ekranı) */
body.app-blank .pyp-fphone {
	display: block;
	margin-bottom: 3px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--pyp-ink);
}

/* SMS kodu: geniş aralıklı, ortalanmış */
body.app-blank .pyp-fcode {
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: 8px !important;
	min-height: 56px !important;
	padding-left: 8px !important;
}

body.app-blank .pyp-fcode::placeholder {
	font-weight: 400;
	letter-spacing: 6px;
	color: #cbd5e1 !important;
}

body.app-blank .card .text-gray-500 {
	color: var(--pyp-muted) !important;
	font-size: 14.5px !important;
	line-height: 1.6;
}

body.app-blank .card .text-gray-500 p {
	margin-bottom: 0;
}

/* Telefon numarası satırı vurgulansın */
body.app-blank .card .text-gray-500 p:nth-child(2) {
	margin: 6px 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--pyp-ink);
	letter-spacing: .5px;
}

/* Boşluk dengesi */
body.app-blank .card .mb-11 {
	margin-bottom: 1.5rem !important;
}

body.app-blank .card .fv-row.mb-8 {
	margin: 0 0 1.25rem !important;
}

body.app-blank .card .d-grid.m-10 {
	margin: 1.5rem 0 0 !important;
	padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Form alanları
   Metronic utility'leri (.w-50, .rounded-0, .border-top-0, .bg-transparent)
   !important taşıdığı için burada da !important şart.
   -------------------------------------------------------------------------- */
body.app-blank .card .form-control {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 56px;
	margin: 0 !important;
	padding: 15px 16px !important;
	border: 1.5px solid #dde5ef !important;
	border-radius: 14px !important;
	background: #fff !important;
	color: var(--pyp-ink) !important;
	font-size: 15px !important;
	font-weight: 500;
	text-align: center;
	letter-spacing: .3px;
	/* Üstte saç teli parlaklık, altta hafif derinlik */
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 2px 5px rgba(15, 27, 45, .05);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.app-blank .card .form-control:focus {
	border-color: var(--pyp-blue) !important;
	background: #fff !important;
	/* Halka + biraz daha derin gölge: alan odaklanınca hafifçe öne çıkar */
	box-shadow:
		0 0 0 4px rgba(0, 120, 194, .13),
		0 6px 16px rgba(0, 120, 194, .12) !important;
	outline: none !important;
}

body.app-blank .card .form-control::placeholder {
	color: #a9b4c2 !important;
	font-weight: 400;
	letter-spacing: normal;
}

/* Güvenlik soruları etiketleri */
body.app-blank .card .form-label {
	display: block;
	margin-bottom: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--pyp-ink-2) !important;
	text-align: left;
}

body.app-blank .card .question {
	text-align: left !important;
	margin-bottom: 1.25rem !important;
}

/* --------------------------------------------------------------------------
   reCAPTCHA
   Ölçekleme/transform YOK: doğrulama penceresini bozar. Sadece ortalanır.
   -------------------------------------------------------------------------- */
body.app-blank .card .fv-row.flex-center {
	display: flex;
	justify-content: center;
	margin: 0 0 .5rem;
}

body.app-blank .card .g-recaptcha {
	margin: 0 auto !important;
	width: max-content;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Butonlar
   -------------------------------------------------------------------------- */
body.app-blank .card .btn-lg {
	position: relative;
	overflow: hidden;
	width: 100% !important;
	min-height: 56px;
	margin: 0 !important;
	padding: 15px 22px !important;
	border: none !important;
	border-radius: 14px !important;
	background: linear-gradient(135deg, #12a0e4 0%, #0078c2 52%, #01578f 100%) !important;
	color: #fff !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	letter-spacing: .1px;
	/* Üstte ince ışık hattı + renkli derinlik gölgesi */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .3),
		0 12px 26px rgba(0, 120, 194, .34),
		0 2px 6px rgba(0, 120, 194, .2);
	transition: box-shadow .2s ease, transform .12s ease, filter .2s ease;
}

body.app-blank .card .btn-lg:hover {
	filter: brightness(1.04);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .34),
		0 16px 34px rgba(0, 120, 194, .44),
		0 3px 8px rgba(0, 120, 194, .24);
}

body.app-blank .card .btn-lg:active {
	transform: translateY(1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .2),
		0 6px 16px rgba(0, 120, 194, .3);
}

body.app-blank .card .btn-lg:disabled {
	opacity: .7;
}

/* Buton etiketi ve oku */
body.app-blank .card .btn-lg .indicator-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

/* Yükleniyor durumu.
   Yukarıdaki kural Metronic'in `.btn[data-kt-indicator=on] .indicator-label
   { display:none }` kuralından daha özgül olduğu için etiketi gizleyemiyor ve
   "Devam et" ile "Lütfen bekleyin..." yan yana görünüyordu. Bu iki kural
   özgüllüğü geri kazanıyor. */
body.app-blank .card .btn-lg[data-kt-indicator="on"] .indicator-label {
	display: none !important;
}

body.app-blank .card .btn-lg[data-kt-indicator="on"] .indicator-progress {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

body.app-blank .pyp-fbtnicon {
	font-size: 15px;
	line-height: 1;
	transition: transform .2s var(--pyp-ease);
}

body.app-blank .card .btn-lg:hover .pyp-fbtnicon {
	transform: translateX(3px);
}

/* Buton üzerinden geçen ince parıltı.
   `left` ile hareket eder, transform ile değil — reCAPTCHA'yı etkilemesin. */
body.app-blank .card .btn-lg::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 46px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
	animation: pyp-sheen 3.6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes pyp-sheen {
	0% {
		left: -70px;
	}

	55%,
	100% {
		left: 115%;
	}
}

/* Buton içindeki metin parıltının üstünde kalsın */
body.app-blank .card .btn-lg > span {
	position: relative;
	z-index: 1;
}

/* Kalan süre + tekrar gönder */
body.app-blank .card .fw-semibold.fs-6 p {
	margin-bottom: .5rem;
	font-size: 14px;
	color: var(--pyp-muted);
}

body.app-blank .card #countdown {
	color: var(--pyp-ink);
	font-variant-numeric: tabular-nums;
}

body.app-blank .card #kt_sign_in_code_repost {
	width: auto !important;
	min-height: 0;
	margin: 0 !important;
	padding: 8px 16px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--pyp-blue) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

body.app-blank .card #kt_sign_in_code_repost:hover {
	background: var(--pyp-blue-050) !important;
	border-color: var(--pyp-blue-100) !important;
}

body.app-blank .card .justify-content-end {
	justify-content: center !important;
}

/* --------------------------------------------------------------------------
   Duyarlı davranış
   -------------------------------------------------------------------------- */

/* Uygulama kabuğu — 991px altı: ikon rayı gider, alt sekme çubuğu gelir */
@media (max-width: 991px) {
	.pyp-rail {
		display: none;
	}

	.pyp-tabbar {
		display: flex;
	}

	/* Sabit sekme çubuğunun altında içerik kalmasın */
	.pyp-shell {
		padding-bottom: 64px;
	}

	.pyp-container {
		padding: 0 16px;
	}

	.pyp-topbar__inner {
		padding: 0 16px;
		gap: 12px;
	}

	.pyp-brand__sub {
		display: none;
	}
}

/* Telefon: kullanıcı adı yerine yalnızca avatar */
@media (max-width: 575px) {
	.pyp-user__meta,
	.pyp-user__caret {
		display: none;
	}

	.pyp-user__btn {
		padding: 4px;
	}

	.pyp-tabbar__link {
		font-size: 10px;
	}
}

/* Tablet: kesim daralır, form kolonu genişler */
@media (max-width: 1199px) and (min-width: 992px) {
	body.app-blank .pyp-side {
		padding: 44px 40px;
	}

	body.app-blank .pyp-side + div {
		padding: 36px 30px !important;
	}
}

/* Mobil: kesim yatay olur, panel üstte banda döner */
@media (max-width: 991px) {
	body.app-blank #login-radius > .d-flex {
		min-height: 0;
		flex-direction: column;
	}

	body.app-blank .pyp-side {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 150px;
		/* Marka bloğu bandın üstüne yaslanır; alttaki boşluk eğik kesime kalır */
		justify-content: flex-start;
		padding: 22px 22px 40px;
		/* Alt kenar eğik kesilir */
		clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
	}

	/* İllüstrasyon dar ekranda yer kaplamasın */
	body.app-blank .pyp-side__art {
		display: none;
	}

	body.app-blank .pyp-side__ring {
		top: 10%;
		left: 8%;
		width: 150px;
		height: 150px;
	}

	body.app-blank .pyp-side__logo {
		height: 34px;
		margin-bottom: 7px;
	}

	body.app-blank .pyp-side__org {
		font-size: 9.5px;
	}

	body.app-blank .pyp-side + div {
		width: 100% !important;
		flex: 1 1 auto !important;
		margin-left: 0 !important;
		padding: 22px 20px 36px !important;
	}

	/* --- Form: daha küçük ve zarif ---
	   Kolon, küçültülmüş reCAPTCHA genişliğine (302 × .86 ≈ 260px) hizalı.
	   Login, SMS ve Güvenlik Doğrulaması aynı .card kurallarını paylaştığı için
	   üçü de aynı oranlarla küçülür. */
	body.app-blank .card {
		max-width: 260px !important;
	}

	body.app-blank .card h1 {
		margin-bottom: 6px !important;
		font-size: 22px !important;
	}

	body.app-blank .pyp-flead,
	body.app-blank .card .text-gray-500 {
		font-size: 12.5px !important;
		line-height: 1.5;
	}

	body.app-blank .pyp-fphone {
		font-size: 14px;
	}

	body.app-blank .pyp-flabel {
		margin-bottom: 6px !important;
		font-size: 10px !important;
	}

	body.app-blank .card .mb-11 {
		margin-bottom: 1.1rem !important;
	}

	body.app-blank .card .fv-row.mb-8,
	body.app-blank .card .question {
		margin-bottom: .9rem !important;
	}

	body.app-blank .card .d-grid.m-10 {
		margin-top: 1.1rem !important;
	}

	body.app-blank .card .form-control {
		min-height: 44px;
		padding: 10px 14px !important;
		border-radius: 11px !important;
		font-size: 14px !important;
	}

	body.app-blank .card .form-control.pyp-fnum {
		min-height: 46px;
		padding: 10px 12px !important;
		font-size: 21px !important;
		letter-spacing: 5px !important;
		text-indent: 5px;
	}

	body.app-blank .card .form-control.pyp-fnum::placeholder {
		font-size: 15px;
	}

	body.app-blank .pyp-fcode {
		min-height: 46px !important;
		font-size: 18px !important;
		letter-spacing: 6px !important;
	}

	body.app-blank .card .btn-lg {
		min-height: 44px;
		padding: 10px 18px !important;
		border-radius: 11px !important;
		font-size: 14px !important;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .3),
			0 8px 18px rgba(0, 120, 194, .28),
			0 2px 5px rgba(0, 120, 194, .18);
	}

	body.app-blank .pyp-fbtnicon {
		font-size: 13px;
	}

	/* reCAPTCHA kutusu 302×78 sabit; `zoom` ile küçültülür.
	   transform değil zoom: kapsayıcı blok yaratmaz. Doğrulama penceresi zaten
	   <body>'ye eklenir, bu öğenin içinde değildir; etkilenmez. */
	body.app-blank .card .g-recaptcha {
		zoom: .86;
	}
}

/* Dar telefonlar: reCAPTCHA 302px sabit, taşmasın diye kaydırılabilir */
@media (max-width: 400px) {
	body.app-blank .pyp-side + div {
		padding: 20px 14px 32px !important;
	}

	body.app-blank .card h1 {
		font-size: 21px !important;
	}

	body.app-blank .card .fv-row.flex-center {
		overflow-x: auto;
		justify-content: flex-start;
	}
}
/* Telefon */
@media (max-width: 767px) {
	body.pyp-body {
		font-size: 15px;
	}

	.pyp-topbar__inner {
		height: 60px;
	}

	.pyp-brand__logo {
		height: 32px;
	}

	.pyp-brand__title {
		font-size: 13px;
		max-width: 150px;
		white-space: normal;
		line-height: 1.25;
	}

	.pyp-main {
		padding: 24px 0 40px;
	}

	.pyp-page__title {
		font-size: 22px;
	}

	.pyp-page__lead {
		font-size: 14.5px;
	}

	.pyp-grid {
		gap: 16px;
	}

	.pyp-grid--2 {
		grid-template-columns: 1fr;
	}

	.pyp-card {
		padding: 22px 20px 18px;
	}

	.pyp-card--brand {
		padding: 26px 20px 18px;
	}

	.pyp-card__brand {
		height: 78px;
		margin-bottom: 16px;
	}

	.pyp-panel__head {
		padding: 26px 20px 20px;
	}

	.pyp-panel__body {
		padding: 22px 20px 26px;
	}

	/* Butonlar mobilde tam genişlik ve alt alta; onay butonu üstte */
	.pyp-actions {
		flex-direction: column-reverse;
		gap: 10px;
	}

	.pyp-actions .pyp-btn,
	.pyp-actions .pyp-btn--ghost {
		flex: 1 1 auto;
		width: 100%;
	}

	.pyp-footer__inner {
		flex-direction: column;
		text-align: center;
		gap: 6px;
		font-size: 12.5px;
	}

	.pyp-modal {
		padding: 28px 20px 24px !important;
	}

	.pyp-modal__title {
		font-size: 16.5px;
	}

	.pyp-modal__actions .pyp-btn {
		min-width: 0;
		width: 100%;
	}

	.modal-dialog {
		margin: 12px;
	}

}

@media (max-width: 359px) {
	.pyp-brand__text {
		display: none;
	}
}

/* Dokunmatik cihazlarda rahat hedef boyutu */
@media (pointer: coarse) {

	.pyp-btn,
	.pyp-rail__link,
	.pyp-tabbar__link,
	.pyp-form .form-control {
		min-height: 48px;
	}
}

/* [hidden] her zaman kazanmalı: .pyp-btn/.btn display kuralları bunu ezmesin.
   (SMS ekranındaki "Tekrar Gönder" butonu süre dolana kadar hidden durur.) */
[hidden] {
	display: none !important;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}