/* ==========================================================================
   Sanal Pos PRO Hero — hero.css
   Sabit 3D şerit + soldan sağa kayan banka kartı + ödeme ekranı.
   Tüm stiller .hr altında; temadan bağımsız çalışır.
   Palet: #FFF8EF #EDD7CF #D9AFA9 #C37C78 #AA0000 #780000 #550000 #3C0000
   ========================================================================== */

.hr {
	--hr-bg: var(--bg, #fff8ef); --hr-ink: var(--ink, #2a0707); --hr-ink-2: #3c0000; --hr-muted: #7a5552;
	--hr-line: #eddcd4; --hr-line-2: #d9afa9; --hr-accent: var(--accent, #aa0000); --hr-accent-soft: #fbece8;
	--hr-green: #15803d; --hr-green-soft: #e3f5e9; --hr-h: 250vh; --hr-top: var(--header-h, 72px);
	position: relative; background: var(--hr-bg); isolation: isolate; color: var(--hr-ink);
	font-family: var(--font-sans, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
.hr *, .hr *::before, .hr *::after { box-sizing: border-box; }
.hr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(255, 248, 239, 0), var(--hr-bg)); pointer-events: none; z-index: 0; }
.hr__sticky { position: relative; overflow: hidden; }
.hr__svg { width: 1.15em; height: 1.15em; flex: none; }

/* Metin */
.hr__copy { position: relative; z-index: 3; text-align: center; max-width: 1320px; margin: 0 auto; padding: clamp(64px, 11vh, 120px) 24px 0; }
.hr .hr__title { font-family: inherit; font-size: clamp(calc(var(--hr-s-title, 74px) * .6), 5.8vw, var(--hr-s-title, 74px)); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; margin: 0 auto 18px; max-width: min(100%, var(--hr-w-title, 1100px)); color: var(--hr-ink); }
.hr .hr__text { max-width: min(100%, var(--hr-w-text, 1000px)); margin: 0 auto 30px; font-size: var(--hr-s-text, 18px); line-height: 1.55; color: var(--hr-ink-2); font-weight: 500; }
.hr__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hr .hr__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; height: 56px; padding: 0 32px; border-radius: 10px; background: var(--hr-ink); color: #fff8ef; font-weight: 600; font-size: var(--hr-s-btn, 16px); text-decoration: none; transition: transform .2s, background .2s; }
.hr .hr__btn:hover { background: #780000; color: #fff8ef; transform: translateY(-1px); }
.hr .hr__btn--ghost { background: transparent; color: var(--hr-ink); box-shadow: inset 0 0 0 1.5px var(--hr-line-2); }
.hr .hr__btn--ghost:hover { background: var(--hr-accent-soft); color: var(--hr-ink); }

/* Sahne */
.hr__stage { position: relative; height: clamp(360px, 52vh, 560px); margin-top: -40px; z-index: 1; perspective: 1400px; }
.hr__ribbon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hr__screen { display: none; }

/* ------------------------------------------------------------------ Kart */
.bcard { position: absolute; left: 0; top: 0; width: clamp(calc(var(--hr-s-card, 230px) * .65), 15vw, var(--hr-s-card, 230px)); aspect-ratio: 1.586; transform-style: preserve-3d; will-change: transform; z-index: 4; }
.bcard__face {
	position: absolute; inset: 0; border-radius: 12px; padding: 8% 8% 7%;
	display: flex; flex-direction: column; justify-content: space-between; text-align: left;
	color: #fff8ef; font-size: clamp(8px, .72vw, 11.5px); letter-spacing: .08em; overflow: hidden;
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 26px 40px -22px rgba(85, 0, 0, .55);
	background: radial-gradient(90% 120% at 12% 8%, rgba(217, 175, 169, .55) 0%, transparent 50%), radial-gradient(80% 110% at 100% 100%, #3c0000 0%, transparent 60%), linear-gradient(135deg, #aa0000 0%, #780000 55%, #550000 100%);
}
.bcard__face::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; right: -38%; bottom: -60%; border-radius: 50%; border: 22px solid rgba(237, 215, 207, .16); }
.bcard__face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%); transform: translateX(-70%); animation: hr-sheen 4.5s ease-in-out infinite; }
@keyframes hr-sheen { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
.bcard__top { display: flex; justify-content: space-between; align-items: center; }
.bcard__chip { width: 18%; aspect-ratio: 1.3; border-radius: 4px; background: linear-gradient(135deg, #f8dc92, #c79a3f 55%, #f1d27f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.bcard__wave { width: 12%; opacity: .85; }
.bcard__wave svg { width: 100%; height: auto; display: block; }
.bcard__brand { font-weight: 800; font-size: 1.15em; letter-spacing: .14em; opacity: .92; }
.bcard__num { font-weight: 700; font-size: 1.3em; letter-spacing: .14em; white-space: nowrap; line-height: 1; }
.bcard__row { display: flex; justify-content: space-between; gap: 8px; opacity: .85; font-size: .95em; min-height: 1.2em; }

/* Statik (animasyon kapalı / hareketi azalt) */
.hr:not(.is-live) .hr__card { left: 72%; top: 18%; transform: rotate(-18deg); }

/* ------------------------------------------------------------ Canlı sahne */
.hr.is-live { height: var(--hr-h); }
/* Sahne header'ın hemen altına yapışır; header hero'yu hiç örtmez */
.hr.is-live .hr__sticky { position: sticky; top: var(--hr-top); height: calc(100vh - var(--hr-top)); height: calc(100svh - var(--hr-top)); }
.admin-bar .hr { --hr-top: calc(var(--header-h, 72px) + 32px); }
@media (max-width: 782px) { .admin-bar .hr { --hr-top: calc(var(--header-h, 64px) + 46px); } }
.hr.is-live .hr__copy { position: absolute; left: 0; right: 0; top: 0; padding-top: clamp(28px, 7vh, 72px); will-change: transform, opacity; }
.hr.is-live .hr__stage { position: absolute; inset: 0; height: auto; margin: 0; }
.hr.is-live .hr__screen {
	display: block; position: absolute; left: 50%; top: 50%; width: min(1080px, 92vw); z-index: 2;
	opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none;
}

/* ------------------------------------------------------- Ödeme ekranı */
.hr .hm { position: relative; text-align: left; background: #fff; border: 1px solid var(--hr-line); border-radius: 22px; font-size: 14px; line-height: 1.45; color: var(--hr-ink);
	box-shadow: 0 60px 120px -40px rgba(170, 0, 0, .28), 0 20px 40px -20px rgba(20, 22, 27, .25); }
.hr .hm > img { display: block; width: 100%; height: auto; border-radius: 22px; }
.hr .hm__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--hr-line); }
.hr .hm__bar > span { width: 11px; height: 11px; border-radius: 50%; background: var(--hr-line); }
.hr .hm__url { margin-left: 14px; flex: 1; max-width: 360px; padding: 6px 14px; border-radius: 999px; background: var(--hr-bg); color: var(--hr-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.hr .hm__url .hr__svg { width: 13px; height: 13px; color: var(--hr-green); }
.hr .hm__body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; padding: 28px 32px 40px; }
.hr .hm__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 16px; margin-bottom: 16px; }
.hr .hm__tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--hr-green-soft); color: var(--hr-green); font-size: 12px; font-weight: 600; line-height: 1.6; }
.hr .hm__card {
	position: relative; aspect-ratio: 1.586; max-width: 360px; padding: 22px; border-radius: 18px; color: #fff; overflow: hidden;
	background: radial-gradient(120% 120% at 100% 0%, #c37c78 0%, transparent 55%), linear-gradient(135deg, #3c0000 0%, #550000 100%);
	box-shadow: 0 24px 40px -18px rgba(120, 0, 0, .7); display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-3deg);
	opacity: 0; transition: opacity .3s ease;
}
.hr .hm__card::before { content: ""; position: absolute; width: 240px; height: 240px; right: -80px; bottom: -120px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .06); }
.hr .hm__card-top { display: flex; justify-content: space-between; align-items: center; }
.hr .hm__chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f7d88a, #c9a045); }
.hr .hm__brand { font-weight: 800; letter-spacing: .1em; font-size: 13px; opacity: .92; }
.hr .hm__num { position: relative; font-weight: 700; font-size: clamp(16px, 2vw, 21px); letter-spacing: .14em; white-space: nowrap; line-height: 1; }
.hr .hm__card-row { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .08em; opacity: .85; min-height: 1.2em; }
.hr .hm__field { border: 1px solid var(--hr-line); border-radius: 12px; padding: 9px 14px; margin-top: 12px; background: #fff; }
.hr .hm__field small { display: block; font-size: 11.5px; color: var(--hr-muted); }
.hr .hm__input { height: 22px; font-size: 18px; display: flex; align-items: center; gap: 2px; font-weight: 600; letter-spacing: .14em; color: var(--hr-ink); white-space: nowrap; overflow: hidden; }
.hr .hm__caret { display: block; width: 1.5px; height: 16px; background: var(--hr-accent); animation: hr-caret 1s steps(1) infinite; }
@keyframes hr-caret { 50% { opacity: 0; } }
.hr .hm__field--focus { border-color: var(--hr-accent); box-shadow: 0 0 0 4px var(--hr-accent-soft); }
.hr .hm__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hr .hm__table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 13.5px; margin: 0; }
.hr .hm__table td { padding: 10px 12px; background: var(--hr-bg); border: 0; }
.hr .hm__table td:first-child { border-radius: 10px 0 0 10px; font-weight: 600; }
.hr .hm__table td:last-child { border-radius: 0 10px 10px 0; text-align: right; font-weight: 600; }
.hr .hm__table td.is-muted { color: var(--hr-muted); font-weight: 500; }
.hr .hm__radio { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hr-line-2); vertical-align: -2px; margin-right: 8px; }
.hr .hm__pay { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; background: var(--hr-ink); color: #fff; font-weight: 600; }
.hr .hm__secure { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; font-size: 12px; color: var(--hr-muted); }
.hr .hm__secure .hr__svg { width: 14px; height: 14px; }

/* Durumlar: kart iner → seçili taksit yanar → onay bildirimi */
.hr .hr__screen.is-landed .hm__card { opacity: 1; }
.hr .hr__screen.is-done .hm__table tr.is-on td { background: var(--hr-accent-soft); color: var(--hr-accent); }
.hr .hr__screen.is-done .hm__table tr.is-on .hm__radio { border: 4px solid var(--hr-accent); }

@media (max-width: 760px) {
	.hr.is-live { height: calc(var(--hr-h) * .83); }
	.hr .hr__title { font-size: var(--hr-s-title-m, 40px); }
	.hr .hr__text { font-size: var(--hr-s-text-m, 16px); }
	.hr.is-live .hr__copy { padding-top: clamp(20px, 4vh, 40px); }
	.bcard { width: var(--hr-s-card-m, 140px); }
	.hr .hm__body { grid-template-columns: 1fr; padding: 16px; }
	.hr .hm__side { display: none; }
	.hr .hm { border-radius: 18px; }
	.hr .hm__bar { padding: 11px 14px; }
	.hr .hm__url { margin-left: 8px; font-size: 11.5px; }
	.hr .hm__card { max-width: none; transform: none; }
}