/* Vice pasaportu + ortak güvenlik öğeleri (hologram, QR). Panel, Vice Özeti ve karakter sayfasında kullanılır. */
@font-face { font-family: ViceDisplay; src: url('../fonts/vp-display.woff2') format('woff2'); font-weight: 400; font-display: swap; }
.vpp { --vpp-ink: #141823; --vpp-soft: rgba(29, 34, 48, .62); --vpp-a: rgba(244, 154, 193, .38); --vpp-b: rgba(127, 214, 224, .38); margin: 0; max-width: 560px; font-family: Barlow, "Segoe UI", Arial, sans-serif; }
.vpp--ls { --vpp-a: rgba(231, 203, 137, .45); --vpp-b: rgba(131, 201, 172, .38); }
.vpp *, .vpp *::before, .vpp *::after { box-sizing: border-box; }
.vpp__card {
	position: relative; overflow: hidden; aspect-ratio: 1.585; padding: 4.2% 4.6% 0; border-radius: 14px; color: var(--vpp-ink);
	background: radial-gradient(circle at 88% 14%, var(--vpp-a), transparent 46%), radial-gradient(circle at 8% 92%, var(--vpp-b), transparent 52%), repeating-linear-gradient(135deg, #f6efe3 0 6px, #f1e8d9 6px 12px);
	box-shadow: 0 22px 44px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(0, 0, 0, .08);
	container-type: inline-size;
}
.vpp--ls .vpp__card { background: radial-gradient(circle at 88% 14%, var(--vpp-a), transparent 46%), radial-gradient(circle at 8% 92%, var(--vpp-b), transparent 52%), repeating-linear-gradient(135deg, #f3f1ea 0 6px, #ebe8de 6px 12px); }
.vpp__guilloche { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-radial-gradient(circle at 70% 120%, transparent 0 9px, rgba(29, 34, 48, .05) 9px 10px); }
.vpp__top { position: relative; display: flex; justify-content: space-between; padding-bottom: 2.2cqw; margin-bottom: 3cqw; border-bottom: 1px solid rgba(29, 34, 48, .22); font: 700 2.6cqw/1.2 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.vpp__top b { font-weight: 700; }
.vpp__gate { color: var(--vpp-soft); }
.vpp__body { position: relative; display: grid; grid-template-columns: 26% minmax(0, 1fr); gap: 4cqw; }
.vpp__photo { display: grid; place-items: center; overflow: hidden; aspect-ratio: .78; border: 1px solid rgba(29, 34, 48, .3); border-radius: 4px; background: linear-gradient(180deg, #d8dde6, #c5ccd8); color: rgba(29, 34, 48, .4); font-size: 9cqw; }
.vpp__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(.9) contrast(1.04); }
.vpp__label { margin: 0; color: var(--vpp-soft); font: 600 1.9cqw "Barlow Condensed", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.vpp__name { margin: 0 0 1.6cqw; overflow: hidden; font: 400 6.4cqw/1 ViceDisplay, "Bebas Neue", Impact, sans-serif !important; letter-spacing: .03em; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; }
.vpp dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4cqw 3cqw; margin: 0; }
.vpp dl div { min-width: 0; }
.vpp dt { color: var(--vpp-soft); font: 600 1.75cqw "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.vpp dd { margin: 0; overflow: hidden; font: 600 2.55cqw/1.25 Barlow, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.vpp__no { position: absolute; left: 4.6%; bottom: 17%; margin: 0; color: var(--vpp-soft); font: 500 2cqw "JetBrains Mono", Consolas, monospace; }
.vpp__no b { color: var(--vpp-ink); }
.vpp__mrz { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.6cqw 4.6% 1.8cqw; background: rgba(255, 255, 255, .58); font: 500 2.3cqw/1.45 "JetBrains Mono", Consolas, monospace; letter-spacing: .12em; white-space: pre; overflow: hidden; }
.vpp__qr { position: absolute; right: 4%; bottom: 17%; width: 11.5%; height: auto; aspect-ratio: 1; padding: .6cqw; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 34, 48, .15); image-rendering: pixelated; }
.vpp__stamp { position: absolute; right: 17%; top: 22%; padding: .8cqw 2cqw; border: .45cqw solid rgba(201, 61, 92, .55); border-radius: 4px; color: rgba(201, 61, 92, .62); font: 700 2.4cqw "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-11deg); }
.vpp__stamp--wait { border-color: rgba(120, 128, 140, .5); color: rgba(90, 98, 110, .65); }

/* hologram: yanardöner "V" mührü, mikro yazılı halka; açıyla renk değiştirir */
.vice-holo, .vpp__holo {
	position: absolute; display: grid; place-items: center; border-radius: 50%; pointer-events: none;
	background: conic-gradient(from var(--holo-a, 0deg), #ff9ad5, #ffe08a, #8ff0c6, #8fd3ff, #c6a0ff, #ff9ad5);
	mix-blend-mode: multiply; opacity: .5;
	-webkit-mask: radial-gradient(circle, #000 0 62%, transparent 63% 66%, #000 67% 100%);
	mask: radial-gradient(circle, #000 0 62%, transparent 63% 66%, #000 67% 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.vpp__holo { right: 17%; bottom: 17.5%; width: 15%; aspect-ratio: 1; }
.vice-holo span, .vpp__holo span { position: relative; color: rgba(20, 23, 28, .55); font: 400 7cqw/1 ViceDisplay, "Bebas Neue", Impact, sans-serif; }
.vice-holo svg, .vpp__holo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vice-holo text, .vpp__holo text { fill: rgba(20, 23, 28, .6); font: 700 9.5px "Barlow Condensed", sans-serif; letter-spacing: .4px; }
@property --holo-a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
	.vice-holo, .vpp__holo { animation: vice-holo 6s linear infinite; }
	@keyframes vice-holo { to { --holo-a: 360deg; } }
}
.vpp__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 45%, rgba(190, 240, 255, .2) 50%, transparent 62%); background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s ease; mix-blend-mode: soft-light; }
.vpp:hover .vpp__card::after { background-position: -20% 0; }

.vpp figcaption { margin-top: 10px; }
.vpp__dl { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px !important; border: 1px solid rgba(196, 210, 228, .32) !important; border-radius: 4px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; font: 600 14px "Barlow Condensed", sans-serif !important; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.vpp__dl:hover { border-color: #e7cb89 !important; color: #e7cb89 !important; }
.vpp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
html body .vpp button.vpp__dl { background: transparent !important; background-image: none !important; border: 1px solid rgba(196, 210, 228, .32) !important; box-shadow: none !important; color: inherit !important; }
html body .vpp button.vpp__dl:hover { border-color: #e7cb89 !important; color: #e7cb89 !important; }

/* Banknot tarzı güvenlik: belli belirsiz, tekrar eden VICE ROLEPLAY mikro yazısı (kartın tamamında) */
.vice-sec { position: absolute; inset: -20%; z-index: 0; pointer-events: none; transform: rotate(-14deg); opacity: .06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='34'%3E%3Ctext x='0' y='14' font-family='Arial Narrow,Arial,sans-serif' font-weight='700' font-size='12' letter-spacing='3' fill='%23141823'%3EVICE ROLEPLAY · VICE ROLEPLAY ·%3C/text%3E%3Ctext x='-150' y='31' font-family='Arial Narrow,Arial,sans-serif' font-weight='700' font-size='12' letter-spacing='3' fill='%23141823'%3EVICE ROLEPLAY · VICE ROLEPLAY · VICE ROLEPLAY ·%3C/text%3E%3C/svg%3E");
	background-size: 300px 34px; }
.vpl-recap2 .vice-sec, .vice-sec--light { opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='34'%3E%3Ctext x='0' y='14' font-family='Arial Narrow,Arial,sans-serif' font-weight='700' font-size='12' letter-spacing='3' fill='%23ffffff'%3EVICE ROLEPLAY · VICE ROLEPLAY ·%3C/text%3E%3Ctext x='-150' y='31' font-family='Arial Narrow,Arial,sans-serif' font-weight='700' font-size='12' letter-spacing='3' fill='%23ffffff'%3EVICE ROLEPLAY · VICE ROLEPLAY · VICE ROLEPLAY ·%3C/text%3E%3C/svg%3E"); }
.vpp__card > *:not(.vice-sec):not(.vpp__guilloche) { position: relative; z-index: 1; }
.vpp .vpp__card > .vpp__no, .vpp .vpp__card > .vpp__qr, .vpp .vpp__card > .vpp__mrz, .vpp .vpp__card > .vpp__stamp, .vpp .vpp__card > .vice-foil { position: absolute; }

/* Folyolu logo: gerçek Vice logosu + açıya göre renk değiştiren yanardöner katman (logonun biçiminde) */
.vice-foil { display: block; pointer-events: none; }
.vice-foil img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .5; filter: grayscale(1) contrast(1.1); }
.vice-foil::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--foil-logo) center / contain no-repeat; mask: var(--foil-logo) center / contain no-repeat;
	background: linear-gradient(115deg, #ff9ad5 0%, #ffe08a 18%, #8ff0c6 36%, #8fd3ff 54%, #c6a0ff 72%, #ff9ad5 90%); background-size: 300% 300%; mix-blend-mode: hard-light; opacity: .85; }
@media (prefers-reduced-motion: no-preference) { .vice-foil::after { animation: vice-foil 7s ease-in-out infinite alternate; } }
@keyframes vice-foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.vpp .vice-foil { right: 17.5%; bottom: 16.5%; width: 15%; aspect-ratio: 1; }
.vpp:hover .vice-foil::after { animation-duration: 2.2s; }