@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  --primary: #6f4cff;
  --primary-dark: #5635ec;
  --ink: #15152a;
  --muted: #6f7085;
  --surface: #fff;
  --soft: #f6f5fb;
  --border: #e9e7f0;
  --success: #1fb879;
  --warning: #f3a712;
  --shadow: 0 18px 60px rgba(27, 24, 67, .10)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: Manrope, system-ui, sans-serif;
  color: var(--ink);
  background: #fff
}

.btn {
  border-radius: 14px;
  font-weight: 700;
  padding: .78rem 1.1rem
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #8d6cff);
  border: none;
  box-shadow: 0 10px 24px rgba(111, 76, 255, .25)
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), #7654f5)
}

.btn-dark {
  background: var(--ink);
  border-color: var(--ink)
}

.btn-light {
  background: #fff;
  border: 1px solid var(--border)
}

.form-control,
.form-select {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .8rem 1rem;
  box-shadow: none
}

.form-control:focus,
.form-select:focus {
  border-color: #b9aaff;
  box-shadow: 0 0 0 .25rem rgba(111, 76, 255, .12)
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none
}

.brand-light {
  color: #fff
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--primary), #9d7fff);
  color: #fff;
  box-shadow: 0 8px 22px rgba(111, 76, 255, .3)
}

.eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--primary)
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(233, 231, 240, .75)
}

.site-header .navbar {
  padding: 1rem 0
}

.site-header .nav-link {
  font-weight: 600;
  color: #4a4b61
}

.hero-section {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 5rem;
  background: linear-gradient(180deg, #fbfaff 0%, #fff 100%)
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px)
}

.orb-one {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(147, 115, 255, .28), transparent 70%);
  top: -100px;
  right: 10%
}

.orb-two {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(77, 203, 255, .18), transparent 70%);
  bottom: -60px;
  left: -60px
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border: 1px solid #ded7ff;
  background: #f8f5ff;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  color: #5e3dea
}

.hero-section h1 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: .97;
  letter-spacing: -.055em;
  margin: 1.35rem 0 1.5rem;
  font-weight: 800
}

.hero-section h1 span {
  background: linear-gradient(135deg, #6f4cff, #d54eff);
  -webkit-background-clip: text;
  color: transparent
}

.hero-copy {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 650px
}

.hero-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 2rem
}

.hero-trust {
  display: flex;
  gap: 2rem;
  margin-top: 2.2rem
}

.hero-trust div {
  display: flex;
  flex-direction: column
}

.hero-trust strong {
  font-size: 1.25rem
}

.hero-trust span {
  color: var(--muted);
  font-size: .78rem
}

.hero-stage {
  position: relative;
  min-height: 560px
}

.dashboard-mock {
  position: absolute;
  left: 0;
  top: 50px;
  width: 88%;
  height: 390px;
  border-radius: 24px;
  background: #17172e;
  box-shadow: 0 35px 90px rgba(25, 22, 56, .26);
  overflow: hidden;
  transform: rotate(-2deg)
}

.mock-top {
  height: 44px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 0 18px;
  background: #21213b
}

.mock-top span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #696980
}

.mock-grid {
  display: grid;
  grid-template-columns: 78px 1fr;
  height: calc(100% - 44px)
}

.mock-sidebar {
  padding: 24px 16px;
  background: #1c1c34
}

.mock-sidebar div {
  height: 12px;
  border-radius: 6px;
  background: #34344d;
  margin-bottom: 18px
}

.mock-content {
  padding: 32px
}

.mock-title {
  width: 160px;
  height: 18px;
  border-radius: 9px;
  background: #fff
}

.mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0
}

.mock-stats span {
  height: 74px;
  border-radius: 16px;
  background: linear-gradient(135deg, #5d41dc, #835ff8)
}

.mock-chart {
  display: grid;
  place-items: center;
  height: 160px;
  border-radius: 20px;
  background: #24243f;
  color: #8f75ff;
  font-size: 4rem
}

.phone-mock {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 235px;
  height: 470px;
  border: 9px solid #141426;
  background: #fff;
  border-radius: 38px;
  box-shadow: 0 30px 70px rgba(22, 20, 55, .32);
  padding: 20px 14px 14px;
  z-index: 3
}

.phone-island {
  width: 70px;
  height: 18px;
  background: #141426;
  border-radius: 20px;
  margin: -14px auto 18px
}

.phone-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem
}

.mini-logo {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f0eafe;
  color: var(--primary)
}

.phone-slide {
  height: 138px;
  margin: 16px 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #6f4cff, #2e1d65);
  color: #fff;
  padding: 18px;
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  align-items: flex-end
}

.loyalty-mini {
  padding: 12px;
  border-radius: 16px;
  background: #f7f6fb
}

.loyalty-mini small {
  font-weight: 800
}

.stamp-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px
}

.stamp-row i {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #ebe9f1;
  color: #b5b0c5
}

.stamp-row i.active {
  background: linear-gradient(135deg, var(--primary), #9d7fff);
  color: #fff;
  box-shadow: 0 8px 20px rgba(111, 76, 255, .25)
}

.phone-nav {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #a5a1b2;
  font-size: .78rem
}

.phone-nav span {
  width: 48px;
  height: 48px;
  margin-top: -20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff
}

.floating-card {
  position: absolute;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: .7rem;
  box-shadow: var(--shadow);
  font-size: .78rem;
  font-weight: 800
}

.floating-card i {
  color: var(--primary)
}

.qr-card {
  left: -20px;
  bottom: 55px
}

.reward-card {
  right: 25px;
  top: 18px
}

.logo-strip {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.logo-strip p {
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700
}

.sector-ticker {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap
}

.sector-ticker span {
  display: flex;
  gap: .45rem;
  align-items: center;
  padding: .65rem .9rem;
  background: #faf9fd;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700
}

.section {
  padding: 6rem 0
}

.section-heading {
  max-width: 720px;
  margin-bottom: 3rem
}

.section-heading.text-center {
  margin-left: auto;
  margin-right: auto
}

.section-heading h2,
.process-section h2,
.cta-card h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  letter-spacing: -.045em;
  font-weight: 800;
  line-height: 1.04;
  margin: .9rem 0
}

.section-heading p,
.lead-muted {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.8
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.feature-grid article,
.surface-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.6rem;
  box-shadow: 0 12px 38px rgba(29, 26, 67, .06)
}

.feature-grid article {
  transition: .25s
}

.feature-grid article:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow)
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #f0ecff;
  color: var(--primary);
  font-size: 1.2rem
}

.feature-grid h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 1.2rem 0 .6rem
}

.feature-grid p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.7
}

.process-section {
  background: #15152a;
  color: #fff
}

.process-section .eyebrow {
  color: #9d87ff
}

.process-section p {
  color: #aaa9bc
}

.steps {
  display: grid;
  gap: 1rem
}

.step {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid #303048;
  border-radius: 18px;
  background: #1d1d35
}

.step>span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), #9d7fff);
  font-weight: 800
}

.step h4 {
  font-size: 1rem;
  font-weight: 800
}

.step p {
  margin: 0;
  font-size: .88rem
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.usecase {
  padding: 1.6rem;
  border-radius: 24px;
  background: #f8f6ff;
  display: flex;
  min-height: 220px;
  flex-direction: column;
  justify-content: flex-end
}

.usecase.dark {
  background: #17172d;
  color: #fff
}

.usecase i {
  font-size: 2rem;
  margin-bottom: auto;
  color: var(--primary)
}

.usecase strong {
  font-size: 1.25rem
}

.usecase span {
  color: var(--muted);
  font-size: .88rem;
  margin-top: .35rem
}

.pricing-preview {
  background: #f7f6fb
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch
}

.price-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 1.8rem;
  box-shadow: 0 14px 40px rgba(28, 25, 66, .06)
}

.price-card.featured {
  border-color: #a990ff;
  transform: translateY(-12px);
  box-shadow: 0 24px 70px rgba(111, 76, 255, .18)
}

.popular {
  position: absolute;
  right: 20px;
  top: 20px;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: #ede7ff;
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800
}

.plan-duration {
  display: inline-flex;
  padding: .45rem .65rem;
  border-radius: 999px;
  background: #f2efff;
  color: var(--primary);
  font-size: .75rem;
  font-weight: 800
}

.price-card h3 {
  margin: 1.2rem 0 .5rem;
  font-size: 1.25rem;
  font-weight: 800
}

.price-card p {
  color: var(--muted);
  font-size: .88rem;
  min-height: 50px
}

.price {
  font-size: 2rem;
  font-weight: 800;
  margin: 1.5rem 0
}

.price small {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted)
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem
}

.price-card li {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin: .75rem 0;
  font-size: .88rem
}

.price-card li i {
  color: var(--success)
}

.cta-section {
  padding: 0 0 6rem
}

.cta-card {
  padding: 3rem;
  border-radius: 32px;
  background: linear-gradient(135deg, #6f4cff, #23164e);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem
}

.cta-card h2 {
  max-width: 800px
}

.site-footer {
  background: #111122;
  color: #fff;
  padding: 4rem 0 1.5rem
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2rem
}

.footer-grid h6 {
  font-weight: 800;
  margin-bottom: 1rem
}

.footer-grid a {
  display: block;
  color: #aaa9ba;
  text-decoration: none;
  margin: .7rem 0
}

.footer-bottom {
  border-top: 1px solid #28283d;
  margin-top: 3rem;
  padding-top: 1.5rem;
  color: #7f7e8e;
  font-size: .8rem
}

.page-hero {
  padding: 6rem 0 4rem;
  background: linear-gradient(180deg, #f8f5ff, #fff);
  text-align: center
}

.page-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -.05em;
  max-width: 900px;
  margin: 1rem auto
}

.page-hero p {
  color: var(--muted)
}

.payment-page {
  padding: 5rem 0;
  background: #f7f6fb;
  min-height: 80vh
}

.payment-shield {
  font-size: 2.2rem;
  color: var(--primary)
}

.summary-line {
  display: flex;
  justify-content: space-between;
  padding: .75rem 0
}

.summary-line.total {
  font-size: 1.2rem;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
  padding-top: 1.2rem
}

.payment-note,
.domain-help {
  display: flex;
  gap: .7rem;
  padding: 1rem;
  border-radius: 16px;
  background: #f5f2ff;
  color: #605b75
}

.payment-note span,
.domain-help p {
  font-size: .82rem;
  margin: 0;
  line-height: 1.6
}

.auth-body {
  background: #f7f6fb
}

.auth-section {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr
}

.auth-panel {
  padding: 3rem 5vw;
  background: linear-gradient(145deg, #17172d, #332468);
  color: #fff;
  display: flex;
  flex-direction: column
}

.auth-panel .brand {
  color: #fff
}

.auth-copy {
  margin: auto 0;
  max-width: 560px
}

.auth-copy h1 {
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 800;
  margin: 1rem 0
}

.auth-copy p {
  color: #c7c3d5;
  line-height: 1.8
}

.auth-visual {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  border: 1px solid #514a77;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06)
}

.auth-benefits {
  list-style: none;
  padding: 0;
  margin: 2rem 0
}

.auth-benefits li {
  margin: 1rem 0
}

.auth-benefits i {
  color: #a795ff;
  margin-right: .6rem
}

.auth-form-wrap {
  display: grid;
  place-items: center;
  padding: 2rem
}

.auth-form-card {
  width: min(100%, 470px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 2rem;
  box-shadow: var(--shadow)
}

.auth-form-card.wide {
  width: min(100%, 600px)
}

.auth-form-card h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-top: 1rem
}

.auth-form-card>p {
  color: var(--muted)
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  font-size: .82rem;
  color: var(--muted)
}

.auth-switch {
  text-align: center;
  margin: 1.2rem 0 0;
  font-size: .84rem
}

.admin-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(circle at top left, #4d35b0, #16162b 55%)
}

.admin-login-card {
  width: min(100%, 460px);
  padding: 2rem;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25)
}

.admin-badge {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin: 2rem 0 1rem;
  padding: .5rem .7rem;
  border-radius: 999px;
  background: #f0ecff;
  color: var(--primary);
  font-size: .75rem;
  font-weight: 800
}

.admin-login-card h1 {
  font-weight: 800;
  letter-spacing: -.04em
}

.admin-login-card>p {
  color: var(--muted)
}

.dashboard-body {
  background: #f6f5f9
}

.dashboard-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.5rem 1rem;
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 40
}

.sidebar-dark {
  background: #17172d;
  border-color: #29293f;
  color: #fff
}

.sidebar-label {
  padding: 2rem .8rem .8rem;
  color: #9d9aaa;
  font-size: .65rem;
  letter-spacing: .16em;
  font-weight: 800
}

.sidebar nav {
  display: grid;
  gap: .35rem
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: #646476;
  font-weight: 700;
  font-size: .88rem
}

.sidebar nav a:hover,
.sidebar nav a.active {
  background: #f1edff;
  color: var(--primary)
}

.sidebar-dark nav a {
  color: #aaa8b8
}

.sidebar-dark nav a:hover,
.sidebar-dark nav a.active {
  background: #252541;
  color: #fff
}

.sidebar-help {
  display: flex;
  gap: .7rem;
  padding: 1rem;
  border-radius: 18px;
  background: #f4f1ff;
  margin: auto 0 1rem
}

.sidebar-help i {
  color: var(--primary)
}

.sidebar-help strong,
.sidebar-help small {
  display: block;
  font-size: .74rem
}

.sidebar-help small {
  color: var(--muted);
  margin-top: .3rem
}

.dashboard-main {
  min-width: 0
}

.dashboard-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: rgba(246, 245, 249, .9);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border)
}

.dashboard-topbar h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: .2rem 0 0
}

.user-chip {
  display: flex;
  align-items: center;
  gap: .7rem
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), #9d7fff);
  color: #fff;
  font-weight: 800
}

.user-chip strong,
.user-chip small,
.table-identity strong,
.table-identity small {
  display: block
}

.user-chip small,
.table-identity small {
  color: var(--muted);
  font-size: .72rem
}

.dashboard-content {
  padding: 2rem
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--border)
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #f0ecff;
  color: var(--primary)
}

.stat-card small,
.stat-card strong {
  display: block
}

.stat-card small {
  color: var(--muted);
  font-size: .76rem
}

.stat-card strong {
  font-size: 1.55rem;
  margin-top: .2rem
}

.card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem
}

.card-heading h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: .35rem 0 0
}

.card-heading p {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .82rem
}

.table>:not(caption)>*>* {
  padding: 1rem .75rem;
  border-bottom-color: #efedf4
}

.table thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a8799
}

.table-identity {
  display: flex;
  gap: .7rem;
  align-items: center
}

.status-pill {
  display: inline-flex;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  background: #efedf4;
  color: #6f6c7d
}

.status-pill.active,
.status-pill.success {
  background: #e8fbf3;
  color: #16875b
}

.status-pill.draft,
.status-pill.pending_dns {
  background: #fff6dd;
  color: #a36a00
}

.status-pill.suspended,
.status-pill.expired {
  background: #ffe9e8;
  color: #b84b43
}

.search-box {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #f7f6fa;
  border-radius: 14px;
  padding: .7rem 1rem
}

.search-box input {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 200px
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem
}

.detail-grid>div {
  padding: 1rem;
  border-radius: 16px;
  background: #f8f7fb
}

.detail-grid small,
.detail-grid strong {
  display: block
}

.detail-grid small {
  color: var(--muted);
  font-size: .72rem
}

.credit-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.2rem
}

.credit-display>div {
  padding: 1.2rem;
  border-radius: 18px;
  background: #f6f4fc
}

.credit-display i {
  color: var(--primary)
}

.credit-display span,
.credit-display strong {
  display: block
}

.credit-display span {
  font-size: .72rem;
  color: var(--muted);
  margin: .7rem 0 .2rem
}

.credit-display strong {
  font-size: 1.6rem
}

.domain-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border)
}

.domain-row strong,
.domain-row small {
  display: block
}

.domain-row small {
  font-size: .7rem;
  color: var(--muted)
}

.empty-copy {
  color: var(--muted);
  margin-top: 1rem
}

.alert-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 18px
}

.alert-card.success {
  background: #eafaf3;
  color: #176e4e
}

.alert-card.warning {
  background: #fff4d9;
  color: #875f00
}

.alert-card i {
  font-size: 1.4rem
}

.alert-card div {
  flex: 1
}

.alert-card p {
  margin: 0;
  font-size: .8rem
}

.activity-list {
  display: grid
}

.activity-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border)
}

.activity-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #eefaf5;
  color: var(--success)
}

.activity-item p,
.activity-item time {
  margin: 0;
  color: var(--muted);
  font-size: .75rem
}

.quick-actions {
  display: grid;
  gap: .7rem
}

.quick-actions>a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  border-radius: 16px;
  background: #f8f7fb;
  text-decoration: none;
  color: var(--ink)
}

.quick-actions>a>i {
  color: var(--primary)
}

.quick-actions strong,
.quick-actions small {
  display: block
}

.quick-actions small {
  font-size: .7rem;
  color: var(--muted)
}

.empty-state {
  text-align: center;
  padding: 2.5rem;
  color: var(--muted)
}

.empty-state i {
  font-size: 2rem;
  color: #b1a8d5
}

.reward-count,
.reward-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: #f0ecff;
  color: var(--primary);
  font-size: .75rem;
  font-weight: 800
}

.customer-profile-head {
  display: flex;
  align-items: center;
  gap: 1rem
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), #9d7fff);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 800
}

.customer-profile-head h2 {
  margin: .2rem 0;
  font-weight: 800
}

.customer-profile-head p {
  margin: 0;
  color: var(--muted)
}

.progress-hero {
  display: flex;
  align-items: center;
  gap: 1.2rem
}

.progress-ring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background: #f0ecff;
  color: var(--primary)
}

.progress-ring strong {
  font-size: 1.6rem
}

.progress-ring span {
  font-size: .72rem
}

.stamp-row.large i {
  width: 46px;
  height: 46px
}

.timeline {
  display: grid
}

.timeline-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: .8rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border)
}

.timeline-item>span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px #eee9ff
}

.timeline-item strong,
.timeline-item small {
  display: block
}

.timeline-item small {
  color: var(--muted);
  font-size: .7rem
}

.timeline-amount {
  font-weight: 800;
  color: var(--success)
}

.domain-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .35rem
}

.domain-input span {
  padding: 0 .7rem;
  color: var(--muted)
}

.domain-input input {
  border: 0;
  outline: 0;
  padding: .8rem 0
}

.connected-domain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: #f8f7fb
}

.connected-domain>div {
  display: flex;
  align-items: center;
  gap: .8rem
}

.connected-domain strong,
.connected-domain small {
  display: block
}

.domain-globe {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #ede8ff;
  color: var(--primary)
}

.dns-table {
  margin-top: 1rem
}

.dns-row {
  display: grid;
  grid-template-columns: 90px 90px 80px 1fr;
  gap: .7rem;
  align-items: center;
  padding: .9rem;
  border-bottom: 1px solid var(--border);
  font-size: .8rem
}

.dns-row code {
  padding: .45rem .6rem;
  border-radius: 10px;
  background: #f5f3fa
}

.check-list {
  list-style: none;
  padding: 0
}

.check-list li {
  margin: .8rem 0
}

.check-list i {
  color: var(--success);
  margin-right: .5rem
}

.channel-setting {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: #f8f7fb;
  margin-bottom: 1rem
}

.channel-logo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.25rem
}

.channel-logo.sms {
  background: #e9f1ff;
  color: #3977d8
}

.channel-logo.whatsapp {
  background: #e9faef;
  color: #1c9a55
}

.channel-setting p {
  margin: 0;
  color: var(--muted);
  font-size: .75rem
}

.tenant-body {
  background: #efeff5
}

.tenant-app {
  max-width: 720px;
  min-height: 100vh;
  margin: 0 auto;
  background: #f7f7fb;
  position: relative;
  padding-bottom: 100px;
  box-shadow: 0 0 80px rgba(31, 28, 70, .12)
}

.tenant-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border)
}

.tenant-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--ink)
}

.tenant-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));
  color: #fff;
  font-weight: 800
}

.tenant-brand strong,
.tenant-brand small {
  display: block
}

.tenant-brand small {
  font-size: .65rem;
  color: var(--muted)
}

.tenant-user {
  display: flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700
}

.tenant-content {
  padding: 1rem
}

.tenant-slider {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));
  color: #fff;
  padding: 1.8rem;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: center
}

.tenant-slide-content {
  position: relative;
  z-index: 2
}

.tenant-chip {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  padding: .45rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  font-size: .68rem;
  font-weight: 800
}

.tenant-slider h1 {
  font-size: clamp(2rem, 8vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 800;
  margin: 1rem 0
}

.tenant-slider p {
  color: rgba(255, 255, 255, .75);
  font-size: .85rem
}

.tenant-slide-art {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 5rem;
  color: rgba(255, 255, 255, .94)
}

.tenant-slide-art .circle-one,
.tenant-slide-art .circle-two {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2)
}

.circle-one {
  width: 150px;
  height: 150px
}

.circle-two {
  width: 210px;
  height: 210px
}

.tenant-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.25rem;
  margin-top: 1rem
}

.card-title-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start
}

.card-title-line small {
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 800
}

.card-title-line h2 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: .2rem 0
}

.loyalty-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem
}

.loyalty-copy span {
  font-size: .72rem;
  color: var(--muted)
}

.tenant-stamps {
  justify-content: space-between
}

.tenant-stamps i {
  width: 50px;
  height: 50px;
  border-radius: 17px
}

.login-prompt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem
}

.login-prompt h2 {
  font-size: 1rem;
  font-weight: 800
}

.login-prompt p {
  margin: 0;
  color: var(--muted);
  font-size: .75rem
}

.tenant-btn {
  background: var(--tenant-primary);
  color: #fff;
  border: none
}

.tenant-btn:hover {
  background: var(--tenant-secondary);
  color: #fff
}

.tenant-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 1.5rem 0 .8rem
}

.tenant-section-heading small,
.tenant-page-title .eyebrow {
  font-size: .65rem;
  color: var(--tenant-primary);
  letter-spacing: .12em;
  font-weight: 800
}

.tenant-section-heading h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: .2rem 0
}

.tenant-section-heading a {
  font-size: .75rem;
  color: var(--tenant-primary);
  text-decoration: none;
  font-weight: 700
}

.tenant-campaign-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem
}

.tenant-campaign {
  min-height: 180px;
  border-radius: 22px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.tenant-campaign span {
  margin-bottom: auto
}

.tenant-campaign h3 {
  font-size: 1rem;
  font-weight: 800
}

.tenant-campaign p {
  font-size: .72rem;
  color: #5e5a6c;
  margin: 0
}

.campaign-1 {
  background: #ede7ff
}

.campaign-2 {
  background: #e5f7ff
}

.campaign-3 {
  background: #fff1dd
}

.tenant-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 50;
  width: min(720px, 100%);
  height: 78px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--border)
}

.tenant-bottom-nav>a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
  color: #9894a6;
  font-size: .61rem;
  font-weight: 700
}

.tenant-bottom-nav>a i {
  font-size: 1rem
}

.tenant-bottom-nav>a.active {
  color: var(--tenant-primary)
}

.tenant-bottom-nav .qr-main {
  margin-top: -34px;
  color: var(--tenant-primary)
}

.tenant-bottom-nav .qr-main>span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));
  color: #fff;
  border: 6px solid #f7f7fb;
  box-shadow: 0 10px 30px rgba(31, 28, 70, .25)
}

.tenant-bottom-nav .qr-main em {
  font-style: normal
}

.tenant-auth-card {
  background: #fff;
  border-radius: 28px;
  padding: 1.6rem;
  margin-top: 1rem;
  border: 1px solid var(--border)
}

.tenant-auth-card h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em
}

.tenant-auth-card>p {
  color: var(--muted);
  font-size: .85rem
}

.tenant-auth-icon {
  width: 58px;
  height: 58px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  background: #f0ecff;
  color: var(--tenant-primary);
  font-size: 1.4rem;
  margin-bottom: 1.2rem
}

.channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem
}

.channel-choice {
  display: flex;
  text-align: left;
  align-items: center;
  gap: .7rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #f8f7fb
}

.channel-choice i {
  font-size: 1.25rem;
  color: #3977d8
}

.channel-choice.whatsapp i {
  color: #1c9a55
}

.channel-choice strong,
.channel-choice small {
  display: block
}

.channel-choice small {
  font-size: .64rem;
  color: var(--muted)
}

.otp-input {
  font-size: 1.8rem;
  letter-spacing: .35em
}

.tenant-page-title {
  padding: 1rem .3rem
}

.tenant-page-title h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  margin: .5rem 0
}

.tenant-page-title p {
  color: var(--muted);
  font-size: .82rem
}

.tenant-campaign-list {
  display: grid;
  gap: .8rem
}

.campaign-detail {
  display: flex;
  gap: 1rem;
  border-radius: 22px;
  padding: 1.2rem
}

.campaign-detail h2 {
  font-size: 1.1rem;
  font-weight: 800
}

.campaign-detail p {
  font-size: .78rem;
  color: #5d596a
}

.campaign-detail small {
  font-size: .67rem;
  color: var(--muted)
}

.map-placeholder {
  height: 260px;
  border-radius: 20px;
  background: radial-gradient(circle at 30% 30%, #eae4ff, #dcd8e8);
  display: grid;
  place-items: center;
  text-align: center;
  color: #686278
}

.map-placeholder i {
  font-size: 3rem;
  color: var(--tenant-primary)
}

.map-placeholder span {
  display: block;
  margin-top: -70px;
  padding: 0 2rem
}

.contact-actions {
  display: grid;
  gap: .7rem;
  margin-top: 1rem
}

.contact-actions a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  border-radius: 16px;
  background: #f8f7fb;
  text-decoration: none;
  color: var(--ink)
}

.contact-actions i {
  color: var(--tenant-primary)
}

.contact-actions strong,
.contact-actions small {
  display: block
}

.contact-actions small {
  font-size: .7rem;
  color: var(--muted)
}

.qr-display-card {
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 1.6rem
}

.qr-frame {
  display: inline-grid;
  place-items: center;
  padding: 1rem;
  border: 1px dashed #c7bddf;
  border-radius: 24px
}

.qr-frame img {
  width: min(100%, 360px);
  display: block
}

.qr-code-text {
  display: block;
  margin: 1rem auto;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: #f3efff;
  color: var(--tenant-primary);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .25em;
  width: max-content
}

.qr-display-card p {
  color: var(--muted);
  font-size: .78rem
}

.error-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem
}

.error-page span {
  font-size: 6rem;
  font-weight: 800;
  color: #ded8f5
}

.error-page h1 {
  font-weight: 800
}

.error-page p {
  color: var(--muted)
}

.error-page pre {
  max-width: 900px;
  white-space: pre-wrap;
  background: #17172d;
  color: #fff;
  padding: 1rem;
  border-radius: 16px;
  font-size: .7rem
}

@media(max-width:1100px) {

  .feature-grid,
  .usecase-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .dashboard-shell {
    grid-template-columns: 220px 1fr
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:991px) {
  .hero-section {
    padding-top: 4rem
  }

  .hero-stage {
    min-height: 520px
  }

  .auth-section {
    grid-template-columns: 1fr
  }

  .auth-panel {
    display: none
  }

  .dashboard-shell {
    display: block
  }

  .sidebar {
    position: fixed;
    left: -280px;
    width: 260px;
    transition: .25s;
    box-shadow: var(--shadow)
  }

  .sidebar.open {
    left: 0
  }

  .dashboard-content,
  .dashboard-topbar {
    padding: 1rem
  }

  .user-chip div {
    display: none
  }

  .pricing-grid {
    grid-template-columns: 1fr
  }

  .price-card.featured {
    transform: none
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .cta-card {
    align-items: flex-start;
    flex-direction: column
  }
}

@media(max-width:680px) {
  .site-header .navbar {
    padding: .7rem 0
  }

  .hero-section h1 {
    font-size: 3.2rem
  }

  .hero-trust {
    gap: 1rem
  }

  .hero-stage {
    min-height: 440px
  }

  .dashboard-mock {
    width: 100%;
    height: 300px
  }

  .phone-mock {
    width: 190px;
    height: 390px
  }

  .floating-card {
    display: none
  }

  .feature-grid,
  .usecase-grid,
  .stat-grid {
    grid-template-columns: 1fr
  }

  .section {
    padding: 4rem 0
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .cta-card {
    padding: 2rem
  }

  .dashboard-topbar h1 {
    font-size: 1.2rem
  }

  .dashboard-content {
    padding: .8rem
  }

  .surface-card {
    padding: 1.1rem
  }

  .detail-grid,
  .credit-display {
    grid-template-columns: 1fr
  }

  .dns-row {
    grid-template-columns: 70px 70px 1fr
  }

  .dns-row code:last-child {
    grid-column: 1/-1
  }

  .tenant-slider {
    grid-template-columns: 1fr;
    min-height: 340px
  }

  .tenant-slide-art {
    position: absolute;
    right: -20px;
    bottom: -10px;
    opacity: .3
  }

  .login-prompt {
    grid-template-columns: auto 1fr
  }

  .login-prompt .btn {
    grid-column: 1/-1
  }

  .tenant-campaign-grid {
    grid-template-columns: 1fr 1fr
  }

  .channel-grid {
    grid-template-columns: 1fr
  }

  .tenant-stamps i {
    width: 42px;
    height: 42px
  }

  .auth-form-wrap {
    padding: 1rem
  }

  .auth-form-card {
    padding: 1.3rem
  }
}

/* MVP ikinci aşama bileşenleri */
.sidebar {
  overflow-y: auto
}

.sidebar nav a {
  flex-shrink: 0
}

.sticky-card {
  position: sticky;
  top: 112px
}

.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem
}

.card-heading h3,
.surface-card h3 {
  font-size: 1.08rem;
  font-weight: 800;
  margin: .25rem 0
}

.text-muted {
  color: var(--muted) !important
}

.operator-hint {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem;
  border-radius: 15px;
  background: #f5f2ff;
  color: #5c5374;
  font-size: .78rem
}

.qr-reader {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  margin-bottom: 1rem;
  background: #111
}

.qr-reader video {
  border-radius: 16px
}

.qr-empty {
  min-height: 390px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  color: var(--muted)
}

.qr-empty>span {
  width: 82px;
  height: 82px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: #f0ecff;
  color: var(--primary);
  font-size: 2rem;
  margin-bottom: 1rem
}

.qr-empty h3 {
  color: var(--ink)
}

.qr-empty p {
  max-width: 420px
}

.operator-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem
}

.management-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start
}

.management-preview {
  flex: 0 0 150px;
  height: 150px;
  border-radius: 20px;
  overflow: hidden;
  background: #f1edff;
  display: grid;
  place-items: center;
  color: var(--primary);
  font-size: 2rem
}

.management-preview.wide {
  height: 190px
}

.management-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--muted)
}

.empty-state i {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem
}

.empty-state h3 {
  color: var(--ink)
}

.mini-tenant-preview {
  border: 8px solid #18182d;
  border-radius: 34px;
  background: #f7f7fb;
  padding: 14px;
  min-height: 460px;
  box-shadow: 0 24px 50px rgba(25, 22, 55, .18)
}

.mini-tenant-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem
}

.mini-tenant-head img,
.mini-tenant-head span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--preview-primary), var(--preview-secondary));
  color: #fff
}

.mini-tenant-hero {
  min-height: 220px;
  border-radius: 22px;
  padding: 1.3rem;
  margin-top: 1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--preview-primary), var(--preview-secondary));
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.mini-tenant-hero small {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em
}

.mini-tenant-hero h4 {
  font-weight: 800;
  margin: .5rem 0
}

.mini-tenant-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: #fff;
  font-size: .72rem
}

.mini-tenant-card i {
  color: var(--preview-primary);
  font-size: 1.2rem
}

.report-filter {
  display: flex;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap
}

.report-filter>div {
  min-width: 190px
}

.report-stats {
  grid-template-columns: repeat(5, 1fr)
}

.report-day-list {
  display: grid
}

.report-day-list>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border)
}

.report-day-list>div:last-child {
  border: none
}

.report-day-list strong,
.report-day-list small {
  display: block
}

.report-day-list small {
  font-size: .7rem;
  color: var(--muted)
}

.report-day-list b {
  font-size: .78rem;
  color: var(--primary)
}

.reward-wallet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem
}

.reward-wallet-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem;
  border-radius: 16px;
  background: #f4f1ff
}

.reward-wallet-item>span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff
}

.reward-wallet-item strong,
.reward-wallet-item small {
  display: block;
  font-size: .76rem
}

.reward-wallet-item small {
  color: var(--muted);
  margin-top: .15rem
}

.reward-wallet-item.used {
  opacity: .55;
  filter: grayscale(1)
}

.timeline-amount.negative {
  color: #d64646
}

.tenant-logo-image {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border)
}

.tenant-carousel {
  position: relative
}

.tenant-carousel-dots {
  position: absolute;
  z-index: 5;
  left: 1.8rem;
  bottom: 1rem;
  display: flex;
  gap: .35rem
}

.tenant-carousel-dots button {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  padding: 0;
  transition: .2s
}

.tenant-carousel-dots button.active {
  width: 24px;
  background: #fff
}

.tenant-slide-picture,
.tenant-slide-overlay {
  position: absolute;
  inset: 0
}

.tenant-slide-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tenant-slide-overlay {
  background: linear-gradient(90deg, rgba(14, 12, 35, .82), rgba(14, 12, 35, .14))
}

.tenant-slider.has-image {
  background: #17172d
}

.tenant-reward-callout {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: .9rem;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));
  color: #fff;
  text-decoration: none
}

.tenant-reward-callout>i:first-child {
  font-size: 1.2rem
}

.tenant-reward-callout>i:last-child {
  margin-left: auto
}

.tenant-reward-callout strong,
.tenant-reward-callout small {
  display: block
}

.tenant-reward-callout small {
  opacity: .75;
  font-size: .67rem
}

.tenant-campaign.has-campaign-image {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #17172d
}

.tenant-campaign.has-campaign-image>img,
.campaign-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.campaign-overlay {
  background: linear-gradient(180deg, rgba(15, 13, 36, .08), rgba(15, 13, 36, .88))
}

.tenant-campaign.has-campaign-image>*:not(img):not(.campaign-overlay) {
  position: relative;
  z-index: 2
}

.tenant-campaign.has-campaign-image p {
  color: rgba(255, 255, 255, .78)
}

@media(max-width:1200px) {
  .report-stats {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:800px) {

  .operator-actions,
  .reward-wallet {
    grid-template-columns: 1fr
  }

  .management-item {
    display: block
  }

  .management-preview {
    width: 100%;
    height: 190px;
    margin-bottom: 1rem
  }

  .sticky-card {
    position: static
  }

  .report-stats {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:520px) {
  .report-stats {
    grid-template-columns: 1fr
  }

  .report-filter>* {
    width: 100%
  }

  .tenant-slide-overlay {
    background: linear-gradient(180deg, rgba(14, 12, 35, .2), rgba(14, 12, 35, .88))
  }

  .tenant-slider.has-image {
    align-items: end
  }

  .tenant-carousel-dots {
    left: 1.8rem;
    bottom: .8rem
  }
}

.provider-credential-box {
  padding: 1rem;
  border: 1px dashed #d9d2ee;
  border-radius: 18px;
  background: #fbfaff
}

.settings-section-title {
  font-size: .85rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1rem
}

.tenant-user {
  border: 0;
  background: transparent
}

.tenant-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));
  color: #fff
}

.tenant-user-menu {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .5rem;
  box-shadow: var(--shadow)
}

.tenant-user-menu .dropdown-item {
  border-radius: 10px;
  font-size: .78rem;
  padding: .65rem .75rem
}

.tenant-user-menu form {
  margin: 0
}

.subscription-assign {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 1rem;
  align-items: end
}

@media(max-width:800px) {
  .subscription-assign {
    grid-template-columns: 1fr
  }

  .subscription-assign .form-check {
    padding-left: 2.5rem;
    margin-bottom: .5rem
  }
}

.staff-list {
  display: grid;
  gap: 14px
}

.staff-card,
.role-card {
  border: 1px solid var(--line, #e8e8ef);
  border-radius: 20px;
  padding: 18px;
  background: #fff
}

.staff-card {
  position: relative
}

.staff-card>.status-pill {
  position: absolute;
  right: 18px;
  top: 18px
}

.permission-grid {
  display: grid;
  gap: 9px
}

.permission-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid #ececf2;
  border-radius: 13px;
  cursor: pointer
}

.permission-check input {
  margin-top: 4px
}

.permission-check span {
  display: flex;
  flex-direction: column
}

.permission-check small {
  color: #7a7a8c
}

.status-muted {
  background: #f1f1f5;
  color: #777
}

.audit-json {
  white-space: pre-wrap;
  max-width: 420px;
  background: #f7f7fa;
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  margin-top: 8px
}

.reward-wallet-item.cancelled {
  opacity: .5;
  filter: grayscale(1)
}

/* =========================
   Siparsis v0.4 canlı demo
   ========================= */
.site-v2 {
  background: #fbfcff
}

.site-header-v2 {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(20, 24, 45, .07)
}

.site-header-v2 .nav-link {
  font-weight: 650;
  color: #555b70;
  border-radius: 12px;
  padding: .65rem .85rem
}

.site-header-v2 .nav-link:hover,
.site-header-v2 .nav-link.active {
  color: #14172b;
  background: #f0efff
}

.site-actions form {
  margin: 0
}

.hero-v2 {
  min-height: 760px;
  padding: 110px 0 90px;
  overflow: hidden
}

.hero-v2 h1 {
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.065em
}

.hero-lead {
  font-size: 1.18rem;
  max-width: 650px;
  color: #62677c;
  line-height: 1.75
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  color: #555b70;
  font-weight: 650
}

.hero-trust i {
  color: #28a66a;
  margin-right: 6px
}

.hero-product-stage {
  position: relative;
  min-height: 590px
}

.product-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 76, 255, .25), transparent 68%);
  left: 10%;
  top: 7%
}

.browser-mockup {
  position: absolute;
  left: 0;
  top: 60px;
  width: 88%;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 35px 90px rgba(32, 32, 70, .2);
  border: 1px solid #e9e9f3;
  overflow: hidden;
  transform: rotate(-2deg)
}

.browser-top {
  height: 42px;
  background: #f6f7fb;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px
}

.browser-top>span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d7d9e4
}

.browser-top small {
  margin: auto;
  color: #9599aa
}

.browser-body {
  display: flex;
  min-height: 350px
}

.mock-sidebar {
  width: 70px;
  background: #17182b;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 24px 0
}

.mock-sidebar b {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #7558ff;
  display: grid;
  place-items: center
}

.mock-main {
  flex: 1;
  padding: 42px
}

.mock-main small {
  font-weight: 800;
  color: #777b93;
  letter-spacing: .15em
}

.mock-main h3 {
  font-size: 1.8rem;
  margin: 5px 0 22px
}

.mock-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.mock-cards span {
  background: #f6f5ff;
  border-radius: 16px;
  padding: 18px;
  color: #6a6e83
}

.mock-cards b {
  display: block;
  font-size: 1.6rem;
  color: #1d2037
}

.mock-chart {
  height: 110px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 34px
}

.mock-chart i {
  flex: 1;
  background: linear-gradient(#8065ff, #c9beff);
  border-radius: 8px 8px 3px 3px
}

.mock-chart i:nth-child(1) {
  height: 35%
}

.mock-chart i:nth-child(2) {
  height: 60%
}

.mock-chart i:nth-child(3) {
  height: 47%
}

.mock-chart i:nth-child(4) {
  height: 80%
}

.mock-chart i:nth-child(5) {
  height: 62%
}

.mock-chart i:nth-child(6) {
  height: 93%
}

.mock-chart i:nth-child(7) {
  height: 75%
}

.loyalty-phone {
  right: -10px;
  bottom: 5px;
  top: auto;
  transform: rotate(4deg);
  z-index: 2;
  padding: 30px 20px 22px;
  background: #16182b;
  color: white;
  width: 245px;
  min-height: 430px;
  border-radius: 38px;
  box-shadow: 0 34px 70px rgba(20, 20, 44, .34)
}

.phone-speaker {
  width: 68px;
  height: 6px;
  border-radius: 10px;
  background: #32354c;
  margin: 0 auto 25px
}

.phone-head {
  display: flex;
  align-items: center;
  gap: 10px
}

.phone-head span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #7558ff;
  display: grid;
  place-items: center;
  font-size: .7rem
}

.gift-orbit {
  height: 132px;
  border-radius: 28px;
  background: linear-gradient(135deg, #7654ff, #a983ff);
  margin: 25px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.gift-orbit:after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(255, 255, 255, .23);
  border-radius: 50%;
  animation: orbitPulse 2.6s infinite
}

.gift-orbit i {
  font-size: 1.6rem
}

.gift-orbit strong {
  font-size: 1.15rem;
  margin-top: 8px
}

.phone-progress {
  background: #25283c;
  border-radius: 22px;
  padding: 17px
}

.phone-progress>b {
  font-size: 1.4rem
}

.phone-progress>span {
  font-size: .7rem;
  color: #b9bdd0;
  display: block;
  margin: 5px 0 12px
}

.phone-progress>div {
  display: flex;
  gap: 6px
}

.phone-progress i {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #856aff
}

.phone-progress i.empty {
  background: #3b3e55
}

.logo-strip {
  background: #fff;
  border-block: 1px solid #ececf4;
  padding: 25px 0
}

.logo-strip p {
  text-align: center;
  color: #888ca0;
  font-size: .84rem
}

.logo-strip .container>div {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  font-weight: 850;
  color: #a1a4b2;
  letter-spacing: .1em
}

.section-space {
  padding: 100px 0
}

.soft-section {
  background: #f5f5fb
}

.section-heading.centered {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 46px
}

.feature-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px
}

.bento-card {
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #ebeaf4;
  border-radius: 28px;
  padding: 34px;
  min-height: 260px;
  box-shadow: 0 18px 45px rgba(30, 33, 70, .06);
  transition: .25s
}

.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(30, 33, 70, .11);
  color: inherit
}

.bento-large {
  grid-row: span 2;
  min-height: 540px;
  background: linear-gradient(145deg, #17182b, #28234f);
  color: #fff
}

.bento-large:hover {
  color: #fff
}

.bento-card h3 {
  font-size: 1.55rem;
  margin: 24px 0 12px
}

.bento-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 55px
}

.bento-flow span {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1)
}

.onboarding-preview {
  background: #fff;
  padding: 24px;
  border-radius: 30px;
  box-shadow: 0 25px 70px rgba(35, 35, 75, .1)
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: 20px;
  margin-bottom: 10px;
  color: #777b8e
}

.onboarding-step>span {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #eff0f6;
  display: grid;
  place-items: center;
  font-weight: 800
}

.onboarding-step div {
  flex: 1
}

.onboarding-step b,
.onboarding-step small {
  display: block
}

.onboarding-step.active {
  background: #f0edff;
  color: #24213e
}

.onboarding-step.active>span {
  background: #7558ff;
  color: #fff
}

.onboarding-step.done i {
  color: #25a968
}

.cta-panel {
  background: linear-gradient(135deg, #191a30, #5f43d9);
  color: #fff;
  border-radius: 36px;
  padding: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  position: relative
}

.cta-panel h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  max-width: 780px
}

.cta-panel p {
  max-width: 700px;
  color: #d8d3f9
}

.site-footer-v2 {
  padding-top: 75px
}

.footer-brand-col {
  max-width: 340px
}

.page-hero {
  padding: 120px 0 85px;
  background: radial-gradient(circle at 70% 20%, rgba(121, 91, 255, .15), transparent 35%), linear-gradient(#fbfcff, #f3f2fb)
}

.page-hero .container {
  max-width: 900px;
  text-align: center
}

.page-hero h1 {
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  letter-spacing: -.055em;
  margin: 18px 0
}

.page-hero p {
  font-size: 1.18rem;
  color: #686d82;
  line-height: 1.7
}

.detail-feature-grid,
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.detail-feature-grid article,
.industry-grid article {
  background: #fff;
  border: 1px solid #eaeaf3;
  border-radius: 26px;
  padding: 32px;
  box-shadow: 0 12px 35px rgba(30, 33, 70, .05)
}

.detail-feature-grid article>span,
.industry-grid article>i {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #efecff;
  color: #6f4cff;
  display: grid;
  place-items: center;
  font-size: 1.3rem
}

.detail-feature-grid h3,
.industry-grid h3 {
  margin: 22px 0 10px
}

.detail-feature-grid p,
.industry-grid p {
  color: #6d7185
}

.process-grid,
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px
}

.process-grid>div,
.values-grid>div {
  background: #fff;
  border: 1px solid #e9e9f1;
  border-radius: 24px;
  padding: 28px
}

.process-grid b,
.values-grid b {
  color: #7256f4;
  font-size: .8rem;
  letter-spacing: .1em
}

.journey-list {
  max-width: 900px;
  margin: auto
}

.journey-list article {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 30px;
  padding: 36px 0;
  border-bottom: 1px solid #e8e8f0
}

.journey-list article>span {
  font-size: 2.4rem;
  font-weight: 900;
  color: #c8c2ee
}

.journey-list small {
  font-weight: 800;
  letter-spacing: .13em;
  color: #785ee8
}

.journey-list h3 {
  font-size: 1.7rem;
  margin: 8px 0
}

.contact-list>a,
.contact-list>div {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 0;
  color: inherit;
  text-decoration: none
}

.contact-list i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eeebff;
  color: #6f4cff;
  display: grid;
  place-items: center
}

.contact-list b,
.contact-list small {
  display: block
}

/* Panel v2 */
.sidebar-upgrade {
  margin: auto 14px 18px;
  background: linear-gradient(145deg, #eeeaff, #fff);
  border: 1px solid #ded8ff;
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px
}

.sidebar-upgrade>i {
  color: #6f4cff;
  font-size: 1.25rem
}

.sidebar-upgrade small {
  color: #777b90
}

.sidebar-upgrade a {
  font-weight: 800;
  color: #6849e9;
  text-decoration: none
}

.subscription-banner {
  border-radius: 28px;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px
}

.subscription-banner>div:first-child {
  display: flex;
  align-items: center;
  gap: 18px
}

.active-subscription-banner,
.dashboard-subscription {
  background: linear-gradient(135deg, #17182b, #403481);
  color: #fff
}

.trial-subscription-banner {
  background: linear-gradient(135deg, #f0edff, #fff);
  border: 1px solid #ddd7ff
}

.subscription-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .14);
  display: grid;
  place-items: center;
  font-size: 1.3rem
}

.trial-subscription-banner .subscription-icon {
  background: #7357ee;
  color: #fff
}

.subscription-banner small {
  letter-spacing: .13em;
  font-weight: 800
}

.subscription-banner h2 {
  margin: 4px 0
}

.subscription-banner p {
  margin: 0;
  color: inherit;
  opacity: .76
}

.subscription-banner a {
  color: inherit;
  font-weight: 800
}

.subscription-days {
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, .2);
  padding-left: 28px
}

.subscription-days strong,
.subscription-days small {
  display: block
}

.subscription-days strong {
  font-size: 2.3rem
}

.panel-plan-card {
  position: relative;
  background: #fff;
  border: 1px solid #e7e7f0;
  border-radius: 28px;
  padding: 30px;
  height: 100%;
  box-shadow: 0 15px 40px rgba(34, 36, 74, .06)
}

.panel-plan-card.featured {
  border: 2px solid #7558ff;
  transform: translateY(-6px)
}

.panel-plan-card ul {
  padding: 0;
  list-style: none;
  margin: 25px 0
}

.panel-plan-card li {
  margin: 11px 0;
  color: #5d6175
}

.panel-plan-card li i {
  color: #27a66b;
  margin-right: 8px
}

.panel-plan-card .plan-price strong {
  display: block;
  font-size: 2rem
}

.featured-label {
  position: absolute;
  right: 20px;
  top: 20px;
  background: #7558ff;
  color: #fff;
  border-radius: 99px;
  padding: 7px 12px;
  font-size: .72rem;
  font-weight: 800
}

.disabled-plan {
  opacity: .62
}

.projected-expiry {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #73778b
}

.activation-gate {
  text-align: center;
  padding: 70px 35px;
  max-width: 920px;
  margin: 30px auto
}

.activation-gate>p {
  max-width: 660px;
  margin: 15px auto;
  color: #6e7285;
  font-size: 1.08rem
}

.activation-illustration {
  height: 150px;
  position: relative;
  display: grid;
  place-items: center
}

.activation-illustration span {
  width: 90px;
  height: 90px;
  border-radius: 30px;
  background: linear-gradient(135deg, #7357ee, #aa8cff);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2rem;
  position: relative;
  z-index: 2
}

.activation-illustration>i {
  position: absolute;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 1px solid #dcd5ff;
  animation: orbitPulse 2.4s infinite
}

.activation-illustration>i:last-child {
  width: 155px;
  height: 155px;
  animation-delay: .7s
}

.activation-benefits {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 25px
}

.activation-benefits span {
  background: #f5f3ff;
  padding: 10px 15px;
  border-radius: 99px
}

.activation-benefits i {
  color: #28a66a;
  margin-right: 5px
}

.welcome-activation-card {
  background: linear-gradient(135deg, #1c1d34, #6650d7);
  color: #fff;
  border-radius: 30px;
  padding: 38px;
  display: flex;
  justify-content: space-between;
  gap: 35px
}

.welcome-activation-card p {
  color: #dad6f5;
  max-width: 680px
}

.welcome-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.welcome-steps span {
  background: rgba(255, 255, 255, .1);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700
}

.welcome-steps .done {
  background: #fff;
  color: #4b3cb0
}

.locked-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.locked-feature-grid article {
  background: #fff;
  border: 1px solid #e9e9f1;
  border-radius: 24px;
  padding: 26px
}

.locked-feature-grid article>i {
  font-size: 1.35rem;
  color: #7256eb
}

.locked-feature-grid h4 {
  margin: 18px 0 7px
}

.locked-feature-grid p {
  color: #74788b
}

.locked-feature-grid a {
  text-decoration: none;
  font-weight: 800
}

.dashboard-stats .stat-card em {
  display: block;
  color: #7b7f92;
  font-size: .75rem;
  font-style: normal;
  margin-top: 3px
}

.activity-list a.activity-item {
  text-decoration: none;
  color: inherit
}

.activity-item:hover {
  background: #f7f6ff
}

.activity-icon.type-reward_redemption {
  background: #fff0df;
  color: #cf7514
}

.activity-icon.type-reversal {
  background: #fce8e8;
  color: #c84646
}

.settings-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px
}

.settings-intro p {
  max-width: 750px;
  color: #6c7083
}

.settings-section-head {
  display: flex;
  gap: 16px;
  margin-bottom: 25px
}

.settings-section-head>span {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 15px;
  background: #7256ed;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 850
}

.settings-section-head p {
  color: #74788b;
  margin: 5px 0 0
}

.color-input {
  display: flex;
  gap: 9px
}

.color-input input[type=color] {
  width: 58px;
  height: 48px;
  padding: 4px;
  border: 1px solid #ddddea;
  border-radius: 12px;
  background: #fff
}

.settings-map-preview,
.tenant-map {
  border-radius: 20px;
  overflow: hidden;
  height: 300px;
  background: #eee
}

.settings-map-preview iframe,
.tenant-map iframe {
  border: 0;
  width: 100%;
  height: 100%
}

.mini-tenant-preview.v2 {
  background: #f5f4fb;
  padding-bottom: 70px
}

.mini-loyalty-gift {
  background: linear-gradient(135deg, var(--preview-secondary), var(--preview-primary));
  color: #fff;
  margin: 13px;
  border-radius: 18px;
  padding: 18px;
  text-align: center
}

.mini-loyalty-gift small,
.mini-loyalty-gift b,
.mini-loyalty-gift span {
  display: block
}

.mini-loyalty-gift b {
  font-size: 2rem
}

.mini-progress-card {
  background: #fff;
  margin: 13px;
  border-radius: 18px;
  padding: 15px
}

.mini-progress-card>div {
  display: flex;
  gap: 4px;
  margin-top: 9px
}

.mini-progress-card i {
  width: 20px;
  height: 20px;
  background: var(--preview-primary);
  border-radius: 50%
}

.mini-progress-card i.empty {
  background: #e8e8ef
}

.mini-bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center
}

.mini-bottom-nav b {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--preview-primary);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: -28px
}

.settings-checklist {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.settings-checklist span {
  color: #9a9dad
}

.settings-checklist .done {
  color: #2a9f69
}

.settings-checklist i {
  width: 20px
}

.loyalty-png-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 17px
}

.loyalty-icon-pool {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px
}

.loyalty-icon-choice input {
  display: none
}

.loyalty-icon-choice span {
  border: 2px solid #ececf3;
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: .2s
}

.loyalty-icon-choice img {
  width: 54px;
  height: 54px;
  object-fit: contain
}

.loyalty-icon-choice input:checked+span {
  border-color: #7458ef;
  background: #f1eeff;
  box-shadow: 0 0 0 3px rgba(116, 88, 239, .1)
}

.custom-icon-upload {
  border: 1px dashed #cac9d8;
  border-radius: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: center
}

.custom-icon-upload p {
  margin: 4px 0 0;
  color: #777b8e
}

.png-stamp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.png-stamp-row span {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #f1f1f5;
  display: grid;
  place-items: center;
  filter: grayscale(1);
  opacity: .38;
  border: 1px solid #e6e6ec
}

.png-stamp-row span.active {
  background: #f0edff;
  filter: none;
  opacity: 1;
  border-color: #d8d0ff
}

.png-stamp-row img {
  width: 34px;
  height: 34px;
  object-fit: contain
}

.png-stamp-row.large span {
  width: 58px;
  height: 58px
}

.png-stamp-row.large img {
  width: 42px;
  height: 42px
}

.loyalty-preview-card {
  margin-top: 20px;
  background: #f5f4fb;
  border-radius: 25px;
  padding: 16px
}

.loyalty-preview-gift {
  background: linear-gradient(135deg, #1c1e35, #7154ec);
  color: #fff;
  border-radius: 21px;
  padding: 18px;
  display: flex;
  gap: 13px
}

.loyalty-preview-gift>span {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .15);
  display: grid;
  place-items: center
}

.loyalty-preview-gift strong {
  font-size: 1.7rem;
  display: block
}

.loyalty-preview-progress {
  background: #fff;
  border-radius: 21px;
  padding: 18px;
  margin-top: 12px
}

.loyalty-preview-progress>div strong {
  font-size: 1.9rem
}

.qr-operation-stage .camera-shell {
  height: 420px;
  border-radius: 25px;
  background: #17182b;
  position: relative;
  overflow: hidden
}

.camera-shell video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.camera-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center
}

.camera-placeholder>span {
  width: 70px;
  height: 70px;
  border-radius: 25px;
  background: rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
  font-size: 1.4rem
}

.camera-placeholder p {
  color: #aeb1c5
}

.scan-frame {
  position: absolute;
  inset: 25%
}

.scan-frame i {
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: #8c72ff;
  border-style: solid
}

.scan-frame i:nth-child(1) {
  left: 0;
  top: 0;
  border-width: 4px 0 0 4px;
  border-radius: 12px 0 0
}

.scan-frame i:nth-child(2) {
  right: 0;
  top: 0;
  border-width: 4px 4px 0 0;
  border-radius: 0 12px 0 0
}

.scan-frame i:nth-child(3) {
  left: 0;
  bottom: 0;
  border-width: 0 0 4px 4px;
  border-radius: 0 0 0 12px
}

.scan-frame i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-width: 0 4px 4px 0;
  border-radius: 0 0 12px
}

.qr-manual-input {
  text-transform: lowercase;
  letter-spacing: .45em;
  font-size: 1.65rem;
  text-align: center;
  font-weight: 850
}

.security-note {
  display: flex;
  gap: 13px;
  background: #f5f4fb;
  border-radius: 18px;
  padding: 18px
}

.security-note>i {
  color: #6950d9;
  margin-top: 4px
}

.security-note p {
  color: #74788a;
  margin: 3px 0 0
}

.qr-customer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px
}

.qr-session-pill,
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 99px;
  background: #e9fff5;
  color: #198658;
  font-weight: 750;
  font-size: .78rem
}

.qr-session-pill i {
  font-size: .68rem
}

.qr-customer-header {
  display: flex;
  align-items: center;
  gap: 18px
}

.qr-session-expiry {
  text-align: right
}

.qr-session-expiry small,
.qr-session-expiry strong {
  display: block
}

.qr-session-expiry strong {
  font-size: 1.7rem
}

.qr-loyalty-summary {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 15px
}

.qr-progress-panel,
.qr-reward-panel {
  border-radius: 22px;
  padding: 23px
}

.qr-progress-panel {
  background: #f3f1ff
}

.qr-reward-panel {
  background: linear-gradient(135deg, #191a31, #5947bb);
  color: #fff
}

.qr-progress-panel small,
.qr-reward-panel small {
  font-weight: 850;
  letter-spacing: .1em
}

.qr-progress-numbers strong {
  font-size: 2.7rem
}

.qr-progress-numbers span {
  font-size: 1.3rem;
  color: #777b90
}

.qr-progress-panel p,
.qr-reward-panel p {
  margin: 5px 0 13px
}

.qr-reward-panel>strong {
  font-size: 3rem;
  display: block
}

.operation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.qr-action-form {
  border: 1px solid #e5e5ef;
  border-radius: 22px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.qr-action-form>span {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  background: #eeeaff;
  color: #6a4de4;
  display: grid;
  place-items: center
}

.qr-action-form p {
  color: #777b8c;
  font-size: .86rem;
  min-height: 42px
}

.live-operation-card {
  height: 100%
}

.live-dot i {
  width: 7px;
  height: 7px;
  background: #25a76b;
  border-radius: 50%;
  animation: livePulse 1.3s infinite
}

.qr-live-movements,
.customer-live-movements {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.qr-live-row,
.customer-live-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f7f7fb;
  border-radius: 16px;
  padding: 13px
}

.qr-live-row>span,
.customer-live-row>span {
  width: 39px;
  height: 39px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #ebe8ff;
  color: #6a4fe0
}

.qr-live-row>div,
.customer-live-row>div {
  flex: 1
}

.qr-live-row strong,
.qr-live-row small,
.customer-live-row strong,
.customer-live-row small {
  display: block
}

.report-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px
}

.report-metric-grid article {
  background: #fff;
  border: 1px solid #e7e7ef;
  border-radius: 22px;
  padding: 20px;
  display: flex;
  gap: 13px
}

.report-metric-grid article>span {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  background: #efecff;
  color: #6a4fdb;
  display: grid;
  place-items: center;
  flex: none
}

.report-metric-grid small,
.report-metric-grid strong,
.report-metric-grid em {
  display: block
}

.report-metric-grid strong {
  font-size: 1.7rem
}

.report-metric-grid em {
  font-style: normal;
  color: #8a8d9f;
  font-size: .73rem
}

.report-filter-bar {
  display: grid;
  grid-template-columns: 155px 155px minmax(220px, 1fr) 200px auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 20px
}

.report-filter-bar label {
  font-size: .75rem;
  font-weight: 800;
  color: #73778b
}

.customer-link {
  font-weight: 800;
  color: #242640;
  text-decoration: none
}

.customer-link:hover {
  color: #6c4ee8
}

.movement-type {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #eeebff;
  color: #6a4fe0;
  display: inline-grid;
  place-items: center;
  margin-right: 8px
}

.movement-type.type-reward_redemption {
  background: #fff0db;
  color: #d27713
}

.movement-type.type-reversal {
  background: #ffe7e7;
  color: #c74646
}

.amount-pill {
  display: inline-block;
  border-radius: 99px;
  padding: 5px 9px;
  font-size: .75rem;
  font-weight: 800;
  margin: 2px
}

.amount-pill.progress {
  background: #ecf8ff;
  color: #2673a6
}

.amount-pill.reward {
  background: #fff2dc;
  color: #b86c0c
}

.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid #ececf2
}

.pagination-bar nav {
  display: flex;
  gap: 5px
}

.role-table td {
  vertical-align: middle
}

.permission-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 550px
}

.permission-chip-list span {
  font-size: .69rem;
  padding: 5px 8px;
  background: #f0eff7;
  border-radius: 99px
}

.permission-chip-list em {
  color: #999cad
}

.role-user-count {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: #f0edff;
  color: #694ddd;
  display: grid;
  place-items: center;
  font-weight: 850
}

.permission-table {
  border: 1px solid #e4e4ed;
  border-radius: 18px;
  overflow: hidden
}

.permission-table-head,
.permission-table label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid #eeeeF3
}

.permission-table label:last-child {
  border: 0
}

.permission-table-head {
  background: #f7f7fa
}

.permission-table small {
  display: block;
  color: #8b8e9f
}

.domain-status-line {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.domain-status-line small,
.domain-status-line strong {
  display: block
}

.dns-record {
  border: 1px solid #e5e5ed;
  border-radius: 17px;
  padding: 14px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.dns-record span small {
  display: block
}

.dns-record code {
  background: #f2efff;
  padding: 8px 10px;
  border-radius: 10px;
  color: #5c43c8
}

.setup-steps>div {
  display: flex;
  gap: 10px;
  margin: 10px 0
}

.setup-steps span {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #6d50df;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  flex: none
}

.setup-steps p {
  margin: 2px 0;
  color: #74778a
}

.customer-reward-total {
  display: flex;
  gap: 10px;
  align-items: center
}

.customer-reward-total>strong {
  font-size: 2.2rem;
  color: #6e51df
}

.customer-reward-total span,
.customer-reward-total small {
  display: block
}

/* Tenant v2 */
.tenant-v2 {
  background: #f4f4fa
}

.tenant-app {
  min-height: 100dvh
}

.tenant-header-fixed {
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 760px);
  z-index: 1040;
  border-radius: 0 0 22px 22px;
  background: rgba(255, 255, 255, .93) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(30, 31, 60, .1);
  padding-top: max(12px, env(safe-area-inset-top))
}

.tenant-header .tenant-brand.logo-only {
  min-width: 80px
}

.tenant-header .tenant-brand.logo-only .tenant-logo-image {
  max-width: 150px;
  max-height: 44px;
  object-fit: contain
}

.tenant-login-btn {
  background: #f0edff;
  color: #6045d6;
  border-radius: 99px;
  font-weight: 800
}

.tenant-content {
  padding-top: 92px !important;
  padding-bottom: 120px !important
}

.tenant-bottom-fixed {
  position: fixed !important;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 760px);
  z-index: 1040;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  box-shadow: 0 -12px 35px rgba(31, 32, 65, .12)
}

.tenant-home-content {
  padding-top: 105px !important
}

.tenant-reward-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--tenant-secondary), var(--tenant-primary));
  color: #fff;
  border-radius: 30px;
  padding: 28px;
  margin-bottom: 18px;
  box-shadow: 0 22px 45px color-mix(in srgb, var(--tenant-primary) 25%, transparent)
}

.reward-hero-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .11);
  right: -70px;
  top: -100px
}

.reward-hero-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative
}

.reward-hero-top h1,
.tenant-reward-hero.guest h1 {
  font-size: clamp(2rem, 7vw, 3.3rem);
  letter-spacing: -.05em;
  margin: 12px 0 6px
}

.reward-hero-top p,
.tenant-reward-hero.guest p {
  color: rgba(255, 255, 255, .74)
}

.tenant-chip.light {
  background: rgba(255, 255, 255, .13);
  color: #fff
}

.reward-orbit {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none
}

.reward-orbit:before,
.reward-orbit:after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  animation: orbitPulse 2.5s infinite
}

.reward-orbit:after {
  inset: -17px;
  animation-delay: .8s
}

.reward-orbit strong {
  font-size: 2.2rem;
  line-height: 1
}

.reward-orbit small {
  font-size: .7rem
}

.reward-ready-card {
  position: relative;
  margin-top: 25px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.reward-ready-card.has-reward {
  background: #fff;
  color: #24243b
}

.reward-ready-card small {
  font-weight: 850;
  letter-spacing: .1em
}

.reward-ready-card h2 {
  font-size: 1.25rem;
  margin: 5px 0
}

.reward-ready-card p {
  font-size: .78rem;
  margin: 0;
  opacity: .7
}

.reward-ready-card a {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--tenant-primary);
  color: #fff;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 1.2rem
}

.animated-progress-card {
  position: relative;
  overflow: hidden
}

.progress-title-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 15px
}

.progress-title-row img {
  width: 62px;
  height: 62px
}

.progress-title-row small {
  font-weight: 850;
  letter-spacing: .11em;
  color: #777b8d
}

.progress-title-row h2 {
  margin: 5px 0
}

.progress-title-row p {
  color: #74788a
}

.progress-track-v2 {
  height: 10px;
  border-radius: 99px;
  background: #ececf2;
  overflow: hidden;
  margin: 17px 0
}

.progress-track-v2 span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tenant-primary), color-mix(in srgb, var(--tenant-primary) 55%, white));
  border-radius: inherit;
  animation: progressEnter 1.2s ease both
}

.tenant-png-stamps span {
  animation: stampEnter .55s ease both;
  animation-delay: var(--delay)
}

.motivation-line {
  margin-top: 16px;
  background: #f5f3ff;
  border-radius: 16px;
  padding: 13px;
  color: #5d46c2;
  display: flex;
  gap: 9px;
  align-items: center;
  font-weight: 750
}

.guest-benefits {
  display: grid;
  gap: 13px
}

.guest-benefits>div {
  display: flex;
  gap: 13px;
  align-items: center
}

.guest-benefits>div>i {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  background: #efecff;
  color: #6b50dc;
  display: grid;
  place-items: center
}

.guest-benefits strong,
.guest-benefits small {
  display: block
}

.guest-benefits small {
  color: #818496
}

.qr-create-card,
.qr-processing-card {
  background: #fff;
  border-radius: 28px;
  padding: 38px 25px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(30, 31, 60, .08)
}

.qr-create-icon {
  width: 90px;
  height: 90px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2rem;
  margin: 0 auto 20px
}

.live-qr-card {
  position: relative
}

.qr-validity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f1efff;
  border-radius: 15px;
  padding: 10px 14px;
  margin-bottom: 16px
}

.qr-validity strong {
  color: #6246d4
}

.qr-processing-card {
  background: linear-gradient(180deg, #fff, #f4f1ff)
}

.processing-animation {
  height: 140px;
  display: grid;
  place-items: center;
  position: relative
}

.processing-animation span {
  width: 80px;
  height: 80px;
  border-radius: 28px;
  background: var(--tenant-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  z-index: 2
}

.processing-animation>i {
  position: absolute;
  width: 110px;
  height: 110px;
  border: 2px solid color-mix(in srgb, var(--tenant-primary) 30%, transparent);
  border-radius: 50%;
  animation: orbitPulse 1.8s infinite
}

.processing-animation>i:last-child {
  width: 145px;
  height: 145px;
  animation-delay: .7s
}

.customer-live-movements {
  margin-top: 22px;
  text-align: left
}

.customer-live-row>b {
  font-size: .78rem;
  color: #6449d6
}

.live-wait {
  padding: 22px;
  border-radius: 17px;
  background: #fff;
  display: flex;
  gap: 10px;
  justify-content: center;
  color: #777b8d
}

.tenant-map {
  height: 320px;
  margin-bottom: 16px
}

.contact-address {
  display: flex;
  gap: 13px;
  align-items: start;
  padding: 16px;
  background: #f5f4fa;
  border-radius: 17px;
  margin-bottom: 14px
}

.contact-address>i {
  color: var(--tenant-primary);
  margin-top: 3px
}

.contact-address strong,
.contact-address small {
  display: block
}

.tenant-page-title {
  margin-top: 15px
}

@keyframes orbitPulse {
  0% {
    transform: scale(.8);
    opacity: .8
  }

  100% {
    transform: scale(1.15);
    opacity: 0
  }
}

@keyframes livePulse {
  50% {
    box-shadow: 0 0 0 6px rgba(37, 167, 107, .15)
  }
}

@keyframes progressEnter {
  from {
    width: 0
  }
}

@keyframes stampEnter {
  from {
    transform: scale(.5) translateY(8px);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@media(max-width:1199px) {
  .report-metric-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .report-filter-bar {
    grid-template-columns: repeat(2, 1fr)
  }

  .report-filter-bar .filter-grow {
    grid-column: span 2
  }

  .hero-product-stage {
    min-height: 520px
  }
}

@media(max-width:991px) {
  .hero-v2 {
    padding-top: 75px
  }

  .hero-product-stage {
    margin-top: 10px
  }

  .feature-bento {
    grid-template-columns: 1fr
  }

  .bento-large {
    grid-row: auto;
    min-height: 420px
  }

  .detail-feature-grid,
  .industry-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .site-actions {
    padding: 16px 0
  }

  .locked-feature-grid {
    grid-template-columns: 1fr
  }

  .report-metric-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .welcome-activation-card {
    flex-direction: column
  }

  .custom-icon-upload {
    grid-template-columns: 1fr
  }

  .loyalty-icon-pool {
    grid-template-columns: repeat(4, 1fr)
  }

  .cta-panel {
    flex-direction: column;
    align-items: flex-start
  }
}

@media(max-width:767px) {
  .section-space {
    padding: 70px 0
  }

  .hero-v2 h1 {
    font-size: 3.2rem
  }

  .hero-product-stage {
    min-height: 450px
  }

  .browser-mockup {
    width: 96%;
    top: 25px
  }

  .browser-body {
    min-height: 300px
  }

  .mock-main {
    padding: 25px 15px
  }

  .mock-sidebar {
    width: 50px
  }

  .loyalty-phone {
    width: 190px;
    min-height: 345px
  }

  .gift-orbit {
    height: 100px
  }

  .cta-panel {
    padding: 35px 25px
  }

  .detail-feature-grid,
  .industry-grid,
  .process-grid,
  .values-grid {
    grid-template-columns: 1fr
  }

  .journey-list article {
    grid-template-columns: 55px 1fr;
    gap: 14px
  }

  .report-metric-grid {
    grid-template-columns: 1fr
  }

  .report-filter-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch
  }

  .report-filter-bar .filter-grow {
    grid-column: auto
  }

  .qr-loyalty-summary,
  .operation-grid {
    grid-template-columns: 1fr
  }

  .qr-customer-header {
    flex-wrap: wrap
  }

  .qr-session-expiry {
    margin-left: auto
  }

  .loyalty-icon-pool {
    grid-template-columns: repeat(2, 1fr)
  }

  .settings-intro {
    align-items: flex-start;
    flex-direction: column
  }

  .subscription-banner {
    align-items: flex-start
  }

  .subscription-banner>div:first-child {
    align-items: flex-start
  }

  .subscription-days {
    display: none
  }

  .panel-plan-card.featured {
    transform: none
  }

  .pagination-bar {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column
  }

  .reward-hero-top {
    flex-direction: column
  }

  .reward-orbit {
    position: absolute;
    right: 2px;
    top: 5px;
    width: 90px;
    height: 90px
  }

  .reward-hero-top>div {
    padding-right: 80px
  }

  .reward-orbit strong {
    font-size: 1.7rem
  }

  .tenant-reward-hero {
    padding: 23px
  }

  .tenant-header .tenant-user>span:last-child {
    display: none
  }

  .tenant-header-fixed {
    border-radius: 0
  }

  .mock-cards {
    grid-template-columns: 1fr 1fr
  }

  .mock-cards span:last-child {
    display: none
  }
}

/* Paket sayfası yönlendirme notu */
.package-entry-note {
  max-width: 920px;
  margin: 0 auto 38px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid #ded8ff;
  border-radius: 24px;
  background: linear-gradient(135deg, #faf8ff, #f2efff);
  box-shadow: 0 14px 40px rgba(78, 54, 171, .08)
}

.package-entry-note>i {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: #6f4cff;
  color: #fff;
  font-size: 1.2rem;
  flex: none
}

.package-entry-note strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 5px
}

.package-entry-note p {
  margin: 0;
  color: #6f7085;
  line-height: 1.7
}

@media(max-width:575px) {
  .package-entry-note {
    padding: 18px;
    gap: 13px
  }

  .package-entry-note>i {
    width: 44px;
    height: 44px;
    border-radius: 14px
  }
}

.password-reset-result {
  padding: 16px;
  border: 1px solid #ddd7ff;
  border-radius: 18px;
  background: #f7f4ff
}

.password-reset-result strong,
.password-reset-result p {
  display: block
}

.password-reset-result p {
  margin: 5px 0 12px;
  color: #737589;
  font-size: .85rem
}

/* Tenant v3 — mobile product UI */
.tenant-v3 {
  background: #d9dadd;
  font-family: Inter, system-ui, sans-serif;
  color: #171820
}

.tenant-v3 .tenant-app {
  max-width: 520px;
  min-height: 100dvh;
  margin: 0 auto;
  background: #f6f6f3;
  box-shadow: 0 0 70px rgba(18, 19, 25, .2);
  padding: 0;
  overflow: hidden
}

.tenant-v3 h1,
.tenant-v3 h2,
.tenant-v3 h3,
.tenant-v3 h4 {
  font-family: Sora, Inter, sans-serif;
  letter-spacing: -.035em
}

.tenant-v3 .tenant-header-fixed {
  width: min(100%, 520px);
  height: 72px;
  padding: 14px 20px !important;
  border-radius: 0;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid #e7e7e3;
  box-shadow: none;
  backdrop-filter: blur(20px)
}

.tenant-v3 .tenant-brand {
  height: 42px;
  gap: 10px
}

.tenant-v3 .tenant-brand strong {
  font-family: Sora, sans-serif;
  font-size: 15px
}

.tenant-v3 .tenant-logo {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: none
}

.tenant-v3 .tenant-header .tenant-brand.logo-only {
  min-width: 0
}

.tenant-v3 .tenant-header .tenant-brand.logo-only .tenant-logo-image {
  max-width: 142px;
  max-height: 38px
}

.app-header-actions {
  display: flex;
  align-items: center
}

.app-profile-button {
  height: 40px;
  padding: 4px 7px 4px 4px;
  border: 1px solid #e4e4df;
  border-radius: 12px;
  background: #fff;
  color: #1b1c22
}

.app-profile-button .tenant-user-avatar {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--tenant-primary);
  color: #fff;
  font-size: 12px
}

.app-profile-button>i {
  font-size: 9px;
  color: #777982;
  margin: 0 3px
}

.app-login-link {
  padding: 9px 14px;
  border: 1px solid #deded9;
  border-radius: 11px;
  color: #1e2027;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px
}

.app-user-menu-head {
  padding: 10px 16px 12px;
  border-bottom: 1px solid #ecece8;
  margin-bottom: 5px
}

.app-user-menu-head strong,
.app-user-menu-head small {
  display: block
}

.app-user-menu-head small {
  color: #898b93;
  font-size: 11px;
  margin-top: 2px
}

.tenant-v3 .tenant-user-menu {
  min-width: 220px;
  border: 1px solid #e6e6e1;
  border-radius: 14px;
  padding: 7px;
  box-shadow: 0 20px 50px rgba(20, 20, 25, .14)
}

.tenant-v3 .tenant-user-menu .dropdown-item {
  border-radius: 9px;
  padding: 10px;
  font-size: 13px
}

.tenant-v3 .tenant-content {
  padding: 92px 18px 112px !important
}

.tenant-v3 .tenant-home-content {
  padding-top: 92px !important
}

.app-page {
  min-height: 100dvh
}

.app-welcome-line {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 2px 16px
}

.app-welcome-line small,
.app-page-heading small,
.app-section-head small,
.surface-heading small,
.reward-pass-head span,
.reward-pass-kicker,
.journey-head small,
.profile-summary-card small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em
}

.app-welcome-line small,
.app-page-heading small,
.app-section-head small,
.surface-heading small,
.journey-head small {
  color: #8b8d94
}

.app-welcome-line h1 {
  font-size: 24px;
  margin: 4px 0 0
}

.app-member-status {
  font-size: 11px;
  font-weight: 700;
  color: #2d7251;
  padding-bottom: 3px
}

.app-member-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35a76f;
  margin-right: 5px;
  box-shadow: 0 0 0 4px rgba(53, 167, 111, .12)
}

.reward-pass {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background: #202129;
  color: #fff;
  border: 1px solid #2f3039;
  border-radius: 20px;
  box-shadow: 0 18px 38px rgba(25, 26, 34, .18)
}

.reward-pass-ready {
  background: linear-gradient(145deg, #1c1d24 0%, color-mix(in srgb, var(--tenant-primary) 72%, #171820) 115%)
}

.reward-pass-pattern {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent)
}

.reward-pass:after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border: 45px solid rgba(255, 255, 255, .045);
  right: -85px;
  top: -90px;
  border-radius: 50%
}

.reward-pass-head,
.reward-pass-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.reward-pass-head span {
  color: rgba(255, 255, 255, .82)
}

.reward-pass-head span i {
  margin-right: 6px
}

.reward-pass-head small {
  color: rgba(255, 255, 255, .55);
  font-size: 10px
}

.reward-pass-copy {
  position: relative;
  z-index: 2;
  padding: 36px 0 28px;
  max-width: 340px
}

.reward-pass-kicker {
  color: #cfc7ff
}

.reward-pass-copy h2 {
  font-size: 29px;
  line-height: 1.16;
  margin: 8px 0 10px
}

.reward-pass-copy p {
  max-width: 310px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  line-height: 1.65;
  margin: 0
}

.reward-pass-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .13)
}

.reward-pass-count {
  display: flex;
  align-items: center;
  gap: 9px
}

.reward-pass-count strong {
  font-family: Sora, sans-serif;
  font-size: 30px;
  line-height: 1
}

.reward-pass-count span {
  font-size: 10px;
  color: rgba(255, 255, 255, .62);
  line-height: 1.3
}

.reward-pass-footer>a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: #fff;
  color: #1b1c22;
  text-decoration: none;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800
}

.reward-pass-footer>a i:last-child {
  font-size: 9px;
  color: #85868d
}

.birthday-feature,
.account-birthday-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding: 17px;
  background: #fff5d8;
  border: 1px solid #f0dfaa;
  border-radius: 16px;
  overflow: hidden
}

.birthday-feature.used,
.account-birthday-card:not(.today) {
  background: #fff;
  border-color: #e3e3de
}

.birthday-icon {
  width: 43px;
  height: 43px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #202129;
  color: #ffd75a
}

.birthday-feature small,
.account-birthday-card small,
.birthday-campaign-card small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #927423
}

.birthday-feature h3,
.account-birthday-card h3 {
  font-size: 14px;
  margin: 4px 0
}

.birthday-feature p,
.account-birthday-card p {
  font-size: 11px;
  color: #777266;
  line-height: 1.5;
  margin: 0
}

.birthday-state {
  align-self: start;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(93, 71, 10, .13);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  color: #80620f
}

.birthday-sparkles i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #e4aa20;
  transform: rotate(45deg)
}

.birthday-sparkles i:nth-child(1) {
  right: 28px;
  bottom: 14px
}

.birthday-sparkles i:nth-child(2) {
  right: 52px;
  top: 10px
}

.birthday-sparkles i:nth-child(3) {
  left: 72px;
  top: 8px
}

.loyalty-journey-card,
.app-surface {
  margin-top: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e3e3df;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(24, 25, 30, .04)
}

.journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px
}

.journey-head h2 {
  font-size: 20px;
  margin: 5px 0 7px
}

.journey-head p {
  font-size: 12px;
  color: #777982;
  line-height: 1.5;
  margin: 0
}

.journey-ring {
  --progress: 0;
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--tenant-primary) var(--progress-angle, 0deg), #ecece8 0);
  display: grid;
  place-items: center
}

.journey-ring:before {
  content: "";
  position: absolute
}

.journey-ring>div {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: #fff
}

.journey-ring strong {
  font-family: Sora;
  font-size: 18px;
  line-height: 1
}

.journey-ring span {
  font-size: 9px;
  color: #898b92
}

.journey-track,
.account-progress-line {
  height: 5px;
  background: #ecece8;
  margin: 20px 0 18px;
  overflow: hidden
}

.journey-track span,
.account-progress-line span {
  display: block;
  height: 100%;
  background: var(--tenant-primary);
  animation: progressEnter .9s ease both
}

.journey-stamps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px
}

.journey-stamp {
  animation: stampEnter .45s ease both;
  animation-delay: var(--delay)
}

.journey-stamp>span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #dfdfda;
  border-radius: 12px;
  background: #f6f6f3
}

.journey-stamp.done>span {
  border-color: color-mix(in srgb, var(--tenant-primary) 32%, #ddd);
  background: color-mix(in srgb, var(--tenant-primary) 8%, white)
}

.journey-stamp img {
  width: 70%;
  height: 70%;
  object-fit: contain
}

.journey-stamp b {
  font-size: 11px;
  color: #a0a1a7
}

.journey-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #ecece8
}

.journey-note>span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f0edff;
  color: var(--tenant-primary)
}

.journey-note strong,
.journey-note small {
  display: block
}

.journey-note strong {
  font-size: 12px
}

.journey-note small {
  font-size: 10px;
  color: #8b8d94;
  margin-top: 2px
}

.app-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 27px 2px 12px
}

.app-section-head h2 {
  font-size: 19px;
  margin: 4px 0 0
}

.app-section-head>a {
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  color: #53545b
}

.app-section-head>a i {
  font-size: 9px;
  margin-left: 4px
}

.app-offer-grid {
  display: grid;
  gap: 11px
}

.app-offer-card {
  position: relative;
  min-height: 150px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #e1e1dc;
  background: #fff;
  border-radius: 16px
}

.app-offer-card.has-image {
  min-height: 210px;
  color: #fff;
  border: 0
}

.app-offer-card>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.app-offer-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 16, 21, .08), rgba(15, 16, 21, .88))
}

.app-offer-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%
}

.app-offer-content>span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--tenant-primary)
}

.app-offer-card.has-image .app-offer-content>span,
.app-offer-card.has-image .app-offer-content p,
.app-offer-card.has-image .app-offer-content small {
  color: rgba(255, 255, 255, .78)
}

.app-offer-content h3 {
  font-size: 17px;
  margin: 10px 0 6px
}

.app-offer-content p {
  font-size: 11px;
  line-height: 1.55;
  color: #6f7179;
  margin: 0 0 10px
}

.app-offer-content small {
  font-size: 9px;
  color: #97989e
}

.app-empty-offer {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border: 1px dashed #d7d7d1;
  border-radius: 16px
}

.app-empty-offer>i {
  color: var(--tenant-primary)
}

.app-empty-offer h3 {
  font-size: 14px;
  margin: 0 0 4px
}

.app-empty-offer p {
  font-size: 11px;
  color: #85868d;
  margin: 0
}

.guest-welcome-card {
  padding: 26px 22px;
  background: #202129;
  color: #fff;
  border-radius: 20px
}

.guest-brand-dot {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tenant-primary);
  margin-bottom: 28px
}

.guest-welcome-card>small {
  font-size: 9px;
  letter-spacing: .14em;
  color: #bdbec5;
  font-weight: 800
}

.guest-welcome-card h1 {
  font-size: 29px;
  line-height: 1.15;
  margin: 8px 0 12px
}

.guest-welcome-card p {
  font-size: 13px;
  color: #b9bac1;
  line-height: 1.65
}

.app-primary-action,
.app-secondary-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800
}

.app-primary-action {
  background: var(--tenant-primary);
  color: #fff
}

.app-primary-action:hover {
  color: #fff;
  filter: brightness(.96)
}

.app-secondary-action {
  background: #f3f3ef;
  color: #292a31;
  border: 1px solid #dfdfd9
}

.guest-welcome-card .app-primary-action {
  margin-top: 22px;
  background: #fff;
  color: #191a20
}

.guest-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #363741
}

.guest-trust-row span {
  font-size: 9px;
  color: #b5b6bd
}

.guest-trust-row i {
  color: #7be4a9;
  margin-right: 4px
}

.app-page-heading {
  padding: 5px 2px 15px
}

.app-page-heading h1 {
  font-size: 26px;
  line-height: 1.2;
  margin: 5px 0 7px
}

.app-page-heading p {
  font-size: 12px;
  line-height: 1.55;
  color: #777982;
  margin: 0
}

.profile-summary-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  background: #202129;
  color: #fff;
  border-radius: 16px
}

.profile-summary-avatar {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tenant-primary);
  font-family: Sora;
  font-weight: 700
}

.profile-summary-card h2 {
  font-size: 14px;
  margin: 0 0 4px
}

.profile-summary-card p {
  font-size: 11px;
  color: #b5b6bd;
  margin: 0
}

.profile-summary-card>span {
  font-size: 9px;
  color: #b7e9cd
}

.surface-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px
}

.surface-heading h2 {
  font-size: 18px;
  margin: 5px 0 6px
}

.surface-heading p {
  font-size: 11px;
  line-height: 1.55;
  color: #7d7f87;
  margin: 0
}

.surface-heading>i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f1ed;
  color: #62636a;
  display: grid;
  place-items: center
}

.app-form-field {
  margin-top: 18px
}

.app-form-field label,
.app-input-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #42434a
}

.tenant-v3 .app-form-field .form-control,
.tenant-v3 .phone-input-shell,
.tenant-v3 .app-otp-input {
  border: 1px solid #deded8;
  border-radius: 11px;
  background: #fafaf8;
  padding: 13px 14px;
  font-size: 13px
}

.app-form-field>small,
.app-field-note {
  display: block;
  font-size: 9px;
  line-height: 1.5;
  color: #94959b;
  margin-top: 6px
}

.locked-date-field {
  position: relative
}

.locked-date-field span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 7px;
  border-radius: 7px;
  background: #e8e8e3;
  color: #6d6e74;
  font-size: 9px;
  font-weight: 800
}

.app-form-submit {
  margin-top: 20px
}

.account-loyalty-card .surface-heading {
  align-items: center
}

.account-reward-count {
  display: flex;
  align-items: center;
  gap: 7px
}

.account-reward-count strong {
  font-family: Sora;
  font-size: 30px;
  color: var(--tenant-primary)
}

.account-reward-count span {
  font-size: 9px;
  color: #85868e;
  line-height: 1.25
}

.account-stamp-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px
}

.account-stamp-row>span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #deded9;
  background: #f5f5f1;
  border-radius: 10px
}

.account-stamp-row>span.done {
  background: color-mix(in srgb, var(--tenant-primary) 8%, white);
  border-color: color-mix(in srgb, var(--tenant-primary) 25%, #ddd)
}

.account-stamp-row img {
  width: 70%;
  height: 70%;
  object-fit: contain
}

.account-stamp-row b {
  font-size: 10px;
  color: #aaa
}

.movement-heading {
  margin-top: 28px
}

.app-movement-list {
  padding: 4px 17px
}

.app-movement-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #ecece7
}

.app-movement-row:last-child {
  border: 0
}

.movement-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #edf6f1;
  color: #24845a;
  font-size: 12px
}

.movement-icon.reward {
  background: #fff3d9;
  color: #b47c0d
}

.app-movement-row strong,
.app-movement-row small {
  display: block
}

.app-movement-row strong {
  font-size: 11px
}

.app-movement-row small {
  font-size: 9px;
  color: #999aa0;
  margin-top: 3px
}

.app-movement-row>b {
  font-size: 10px;
  color: #2f865e
}

.app-movement-row>b.negative {
  color: #c75555
}

.account-logout {
  margin-top: 16px
}

.account-logout button {
  width: 100%;
  padding: 13px;
  border: 1px solid #e4d3d3;
  background: #fff6f6;
  color: #b94d4d;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800
}

.app-empty-state {
  text-align: center;
  padding: 30px 18px
}

.app-empty-state>i {
  font-size: 22px;
  color: #aaa
}

.app-empty-state h3 {
  font-size: 14px;
  margin: 12px 0 5px
}

.app-empty-state p {
  font-size: 11px;
  color: #8b8c92;
  margin: 0
}

.birthday-campaign-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 20px;
  background: #202129;
  color: #fff;
  border-radius: 18px;
  margin-bottom: 13px
}

.birthday-campaign-card.used {
  opacity: .75
}

.birthday-campaign-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #ffd75a;
  color: #29220f
}

.birthday-campaign-card h2 {
  font-size: 18px;
  margin: 5px 0 7px
}

.birthday-campaign-card p {
  font-size: 11px;
  color: #c7c8ce;
  line-height: 1.55;
  margin: 0
}

.birthday-campaign-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 13px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, .09);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800
}

.birthday-confetti i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ffd75a;
  transform: rotate(45deg)
}

.birthday-confetti i:nth-child(1) {
  right: 20px;
  top: 18px
}

.birthday-confetti i:nth-child(2) {
  right: 45px;
  bottom: 20px;
  background: #d2b9ff
}

.birthday-confetti i:nth-child(3) {
  left: 15px;
  bottom: 15px;
  background: #75dab0
}

.birthday-confetti i:nth-child(4) {
  right: 80px;
  top: 9px;
  background: #ff8e8e
}

.campaign-feed {
  display: grid;
  gap: 12px
}

.campaign-feed-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e1dc;
  border-radius: 17px
}

.campaign-feed-image {
  position: relative;
  height: 165px
}

.campaign-feed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.campaign-feed-image:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .22))
}

.campaign-feed-image span {
  position: absolute;
  z-index: 2;
  left: 13px;
  top: 13px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .9);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em
}

.campaign-feed-visual {
  height: 85px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  background: #202129;
  color: #fff
}

.campaign-feed-visual>i {
  font-size: 20px;
  color: #cabfff
}

.campaign-feed-visual>span {
  font-family: Sora;
  font-size: 27px;
  color: #444650
}

.campaign-feed-copy {
  padding: 17px
}

.campaign-feed-copy>small {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--tenant-primary)
}

.campaign-feed-copy h2 {
  font-size: 17px;
  margin: 7px 0
}

.campaign-feed-copy p {
  font-size: 11px;
  line-height: 1.6;
  color: #73757d
}

.campaign-feed-copy>div {
  padding-top: 12px;
  border-top: 1px solid #ecece8
}

.campaign-feed-copy>div span {
  font-size: 9px;
  color: #93949a
}

.campaign-feed-copy>div i {
  margin-right: 5px
}

.map-app-card {
  position: relative;
  overflow: hidden;
  height: 310px;
  border-radius: 17px;
  border: 1px solid #dfdfda;
  background: #e9e9e4
}

.map-app-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.7) contrast(.95)
}

.map-empty {
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  color: #777
}

.map-empty i {
  font-size: 30px
}

.map-address-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .12)
}

.map-address-overlay>span {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #202129;
  color: #fff
}

.map-address-overlay small,
.map-address-overlay strong {
  display: block
}

.map-address-overlay small {
  font-size: 8px;
  letter-spacing: .12em;
  color: #92939a;
  font-weight: 800
}

.map-address-overlay strong {
  font-size: 11px;
  margin-top: 3px
}

.contact-action-list {
  display: grid;
  gap: 9px;
  margin-top: 13px
}

.contact-action-list>a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e1e1dc;
  border-radius: 13px;
  text-decoration: none;
  color: #202129
}

.contact-action-list>a>span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f0edff;
  color: var(--tenant-primary)
}

.contact-action-list small,
.contact-action-list strong {
  display: block
}

.contact-action-list small {
  font-size: 8px;
  letter-spacing: .12em;
  color: #96979d;
  font-weight: 800
}

.contact-action-list strong {
  font-size: 11px;
  margin-top: 3px
}

.contact-action-list>a>i {
  font-size: 10px;
  color: #98999f
}

.auth-app-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - 204px)
}

.app-login-hero {
  padding: 5px 2px 18px
}

.app-login-hero>span {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #202129;
  color: #fff;
  margin-bottom: 24px
}

.app-login-hero>small {
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--tenant-primary);
  font-weight: 800
}

.app-login-hero h1 {
  font-size: 29px;
  margin: 7px 0 10px
}

.app-login-hero p {
  font-size: 12px;
  color: #777982;
  line-height: 1.6;
  max-width: 390px
}

.app-login-card {
  margin-top: 0
}

.phone-input-shell {
  display: flex;
  align-items: center;
  padding: 0 !important;
  overflow: hidden
}

.phone-input-shell>span {
  padding: 0 12px;
  border-right: 1px solid #dfdfda;
  font-size: 10px;
  font-weight: 800;
  color: #696a71
}

.phone-input-shell .form-control {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important
}

.app-channel-list {
  display: grid;
  gap: 8px;
  margin-top: 20px
}

.app-channel-button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 13px;
  border: 1px solid #dfdfd9;
  background: #fafaf8;
  border-radius: 12px;
  text-align: left
}

.app-channel-button>span {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #edf2ff;
  color: #3469c8
}

.app-channel-button.whatsapp>span {
  background: #e7f7ed;
  color: #218d52
}

.app-channel-button strong,
.app-channel-button small {
  display: block
}

.app-channel-button strong {
  font-size: 11px
}

.app-channel-button small {
  font-size: 9px;
  color: #92939a;
  margin-top: 3px
}

.app-channel-button>i {
  font-size: 9px;
  color: #999
}

.app-warning-message {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 13px;
  background: #fff5dd;
  border: 1px solid #f1e0b8;
  border-radius: 11px
}

.app-warning-message strong {
  font-size: 11px
}

.app-warning-message p {
  font-size: 9px;
  color: #7e725b;
  margin: 3px 0 0
}

.code-step-head {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 18px
}

.code-step-head>span {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #edf7f1;
  color: #2b875c
}

.code-step-head small {
  font-size: 8px;
  letter-spacing: .13em;
  color: #919298;
  font-weight: 800
}

.code-step-head h2 {
  font-size: 16px;
  margin: 3px 0
}

.tenant-v3 .app-otp-input {
  text-align: center;
  font-family: Sora;
  font-size: 23px;
  letter-spacing: .28em
}

.app-text-button {
  width: 100%;
  margin-top: 13px;
  border: 0;
  background: none;
  color: #686a71;
  font-size: 10px;
  font-weight: 800
}

.login-security-line {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 15px;
  color: #919298;
  font-size: 9px
}

.qr-app-create,
.qr-app-active,
.qr-app-processing {
  text-align: center;
  margin-top: 0
}

.qr-app-illustration,
.processing-store {
  position: relative;
  height: 130px;
  display: grid;
  place-items: center
}

.qr-app-illustration>span,
.processing-store>span {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #202129;
  color: #fff;
  font-size: 24px
}

.qr-app-illustration>i,
.processing-store>i {
  position: absolute;
  width: 96px;
  height: 96px;
  border: 1px solid #deded8;
  border-radius: 24px;
  animation: orbitPulse 2s infinite
}

.qr-app-illustration>i:last-child,
.processing-store>i:last-child {
  width: 124px;
  height: 124px;
  animation-delay: .7s
}

.qr-app-create>small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--tenant-primary)
}

.qr-app-create h2,
.qr-app-processing h2 {
  font-size: 20px;
  margin: 7px 0 9px
}

.qr-app-create>p,
.qr-app-processing>p {
  font-size: 11px;
  line-height: 1.6;
  color: #777982
}

.qr-app-rules {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 15px;
  color: #8d8f96;
  font-size: 9px
}

.qr-active-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left
}

.qr-active-head small {
  font-size: 8px;
  letter-spacing: .13em;
  color: #8f9096;
  font-weight: 800
}

.qr-active-head h2 {
  font-size: 18px;
  margin: 4px 0
}

.qr-time-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f0edff;
  color: var(--tenant-primary);
  font-size: 11px
}

.qr-app-frame {
  position: relative;
  width: 260px;
  max-width: 100%;
  margin: 18px auto;
  padding: 14px;
  background: #fff;
  border: 1px solid #dfdfda;
  box-shadow: 0 12px 35px rgba(20, 20, 25, .08)
}

.qr-app-frame img {
  width: 100%;
  display: block
}

.qr-scan-line {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 30%;
  height: 2px;
  background: var(--tenant-primary);
  box-shadow: 0 0 10px var(--tenant-primary);
  animation: qrScan 2.4s ease-in-out infinite
}

.qr-app-code {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px
}

.qr-app-code small {
  font-size: 8px;
  letter-spacing: .13em;
  color: #97989e;
  font-weight: 800
}

.qr-app-code strong {
  font-family: Sora;
  font-size: 18px;
  letter-spacing: .17em
}

.qr-active-note {
  font-size: 9px;
  color: #888a91;
  margin: 15px 0
}

.processing-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #eaf8f0;
  color: #287d55;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em
}

.processing-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fa46d;
  animation: livePulse 1.5s infinite
}

.app-live-movements {
  text-align: left;
  margin: 20px 0
}

.live-wait {
  border-radius: 11px;
  background: #f5f5f1;
  font-size: 10px
}

.customer-live-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ecece8
}

.customer-live-row>span {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #eaf7ef;
  color: #288057
}

.customer-live-row>span.reward_redemption,
.customer-live-row>span.birthday_benefit_redemption {
  background: #fff2d7;
  color: #ae7610
}

.customer-live-row strong,
.customer-live-row small {
  display: block
}

.customer-live-row strong {
  font-size: 10px
}

.customer-live-row small {
  font-size: 8px;
  color: #999
}

.customer-live-row>b {
  font-size: 9px
}

.tenant-v3 .app-tabbar {
  width: min(100%, 520px);
  height: 78px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid #e5e5e0;
  box-shadow: 0 -8px 25px rgba(20, 20, 25, .07);
  backdrop-filter: blur(20px)
}

.tenant-v3 .app-tabbar>a {
  gap: 4px;
  color: #97989e;
  font-size: 9px;
  font-weight: 600
}

.tenant-v3 .app-tabbar>a i {
  font-size: 16px
}

.tenant-v3 .app-tabbar>a.active {
  color: var(--tenant-primary)
}

.tenant-v3 .app-tabbar .qr-main {
  margin-top: -27px
}

.tenant-v3 .app-tabbar .qr-main>span {
  width: 52px;
  height: 52px;
  border: 5px solid #f6f6f3;
  background: #202129;
  border-radius: 17px;
  box-shadow: 0 10px 24px rgba(22, 23, 29, .22)
}

.tenant-v3 .app-tabbar .qr-main.active>span {
  background: var(--tenant-primary)
}

.tenant-v3 .app-tabbar .qr-main em {
  font-size: 9px;
  margin-top: 1px
}

.birthday-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.birthday-settings-wide {
  grid-column: 1/-1
}

.birthday-rule-note {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #f0dfaa;
  background: #fff9e9;
  border-radius: 14px
}

.birthday-rule-note>i {
  color: #b57c10;
  margin-top: 3px
}

.birthday-rule-note strong {
  font-size: .86rem
}

.birthday-rule-note p {
  font-size: .75rem;
  color: #7a7466;
  margin: 3px 0 0
}

.loyalty-preview-birthday {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  background: #fff6da;
  border: 1px solid #efdfae;
  border-radius: 13px
}

.loyalty-preview-birthday>i {
  color: #b67c0e
}

.loyalty-preview-birthday small,
.loyalty-preview-birthday strong {
  display: block
}

.loyalty-preview-birthday small {
  font-size: .62rem;
  letter-spacing: .1em;
  color: #8d772f
}

.loyalty-preview-birthday strong {
  font-size: .77rem;
  margin-top: 3px
}

.birthday-operator-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid #f0d893;
  background: #fff7dc;
  border-radius: 15px
}

.birthday-operator-icon {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  background: #202129;
  color: #ffd75a;
  display: grid;
  place-items: center;
  flex: none
}

.birthday-operator-card small {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #927423
}

.birthday-operator-card h4 {
  font-size: .94rem;
  margin: 3px 0
}

.birthday-operator-card p {
  font-size: .75rem;
  color: #766e5b;
  margin: 0
}

.birthday-operator-card .btn {
  flex: none
}

@keyframes qrScan {

  0%,
  100% {
    top: 20%;
    opacity: .35
  }

  50% {
    top: 78%;
    opacity: 1
  }
}

@media(max-width:560px) {
  .tenant-v3 {
    background: #f6f6f3
  }

  .tenant-v3 .tenant-app {
    box-shadow: none
  }

  .tenant-v3 .tenant-content {
    padding-left: 15px !important;
    padding-right: 15px !important
  }

  .journey-stamps,
  .account-stamp-row {
    gap: 6px
  }

  .reward-pass-copy h2 {
    font-size: 26px
  }

  .reward-pass {
    padding: 20px
  }

  .birthday-settings-grid {
    grid-template-columns: 1fr
  }

  .birthday-settings-wide {
    grid-column: auto
  }

  .birthday-operator-card {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .birthday-operator-card .btn {
    width: 100%
  }
}

.birthday-panel-alert {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fff8df;
  border-color: #eedb9d
}

.birthday-panel-alert>span {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #202129;
  color: #ffd75a;
  display: grid;
  place-items: center
}

.birthday-panel-alert small {
  font-size: .65rem;
  letter-spacing: .11em;
  color: #967719;
  font-weight: 800
}

.birthday-panel-alert h3 {
  margin: 3px 0;
  font-size: 1rem
}

.birthday-panel-alert p {
  margin: 0;
  color: #766f5e;
  font-size: .78rem
}

.birthday-panel-alert>strong {
  margin-left: auto;
  font-size: .75rem;
  padding: 7px 9px;
  background: #fff;
  border-radius: 8px
}

.birthday-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #fff3cc;
  color: #8d6a0b;
  font-size: .63rem;
  font-weight: 800;
  vertical-align: middle
}

/* tenant v4 mobile application refinement */
.tenant-v3 .tenant-app {
  background: linear-gradient(180deg, #fcfcfa 0%, #f4f4f1 58%, #f7f7f4 100%)
}

.tenant-v3 .tenant-header-fixed {
  height: 78px;
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid #e7e4dd;
  box-shadow: 0 10px 24px rgba(24, 25, 30, .06)
}

.tenant-v3 .tenant-header .tenant-brand.logo-only .tenant-logo-image {
  max-width: 190px;
  max-height: 46px
}

.tenant-v3 .tenant-content {
  padding: 88px 18px 112px !important
}

.tenant-v3 .tenant-home-content {
  padding-top: 82px !important
}

.tenant-v3 .app-profile-button {
  height: 46px;
  padding: 4px 10px 4px 4px;
  border: 2px solid color-mix(in srgb, var(--tenant-primary) 50%, white);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--tenant-primary) 16%, transparent)
}

.tenant-v3 .app-profile-button .tenant-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22)
}

.tenant-v3 .app-profile-button>i {
  font-size: 12px;
  color: #5c5d66;
  margin-left: 6px
}

.tenant-v3 .app-page-home {
  position: relative
}

.tenant-v3 .home-brand-crest {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 2px 0 18px
}

.tenant-v3 .home-brand-crest-line {
  height: 1px;
  flex: 1;
  background: #d8d5cd
}

.tenant-v3 .home-brand-crest-badge {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f9f9f7, #efefeb);
  border: 1px solid #dfddd6;
  box-shadow: 0 8px 18px rgba(36, 36, 40, .08);
  overflow: hidden
}

.tenant-v3 .home-brand-crest-badge img {
  width: 75%;
  height: 75%;
  object-fit: contain
}

.tenant-v3 .home-brand-crest-badge i {
  font-size: 34px;
  color: var(--tenant-primary)
}

.tenant-v3 .reward-pass-v4 {
  background: linear-gradient(145deg, #2a2143 0%, color-mix(in srgb, var(--tenant-primary) 88%, #221833) 74%, #7654ff 135%);
  border-color: rgba(255, 255, 255, .08);
  border-radius: 28px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 42px rgba(39, 24, 86, .24)
}

.tenant-v3 .reward-pass-v4:after {
  width: 230px;
  height: 230px;
  border-width: 42px;
  right: -105px;
  top: -88px;
  opacity: .7
}

.tenant-v3 .reward-pass-beans {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='2'%3E%3Cellipse cx='24' cy='28' rx='12' ry='20' transform='rotate(-20 24 28)'/%3E%3Cpath d='M18 13c8 8 10 21 5 30'/%3E%3Cellipse cx='86' cy='20' rx='12' ry='20' transform='rotate(18 86 20)'/%3E%3Cpath d='M79 6c8 8 10 21 5 30'/%3E%3Cellipse cx='52' cy='70' rx='12' ry='20' transform='rotate(-14 52 70)'/%3E%3Cpath d='M46 54c8 8 10 21 5 30'/%3E%3Cellipse cx='100' cy='74' rx='12' ry='20' transform='rotate(15 100 74)'/%3E%3Cpath d='M94 59c8 8 10 21 5 30'/%3E%3Cellipse cx='20' cy='96' rx='12' ry='20' transform='rotate(16 20 96)'/%3E%3Cpath d='M14 81c8 8 10 21 5 30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
  opacity: 1;
  mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .85) 45%, rgba(0, 0, 0, .95) 100%)
}

.tenant-v3 .reward-pass-v4 .reward-pass-copy {
  padding: 30px 0 20px;
  max-width: 340px
}

.tenant-v3 .reward-pass-v4 .reward-pass-copy h2 {
  font-size: 24px;
  line-height: 1.15;
  max-width: 290px
}

.tenant-v3 .reward-pass-v4 .reward-pass-copy p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78)
}

.tenant-v3 .reward-pass-footer-minimal {
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.tenant-v3 .reward-pass-footnote strong,
.tenant-v3 .reward-pass-footnote small {
  display: block
}

.tenant-v3 .reward-pass-footnote strong {
  font-size: 15px;
  font-weight: 800
}

.tenant-v3 .reward-pass-footnote small {
  font-size: 11px;
  color: rgba(255, 255, 255, .64);
  margin-top: 2px
}

.tenant-v3 .reward-pass-footer-minimal>a {
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  gap: 10px;
  box-shadow: 0 12px 24px rgba(17, 17, 21, .14)
}

.tenant-v3 .birthday-inline-feature {
  margin-bottom: 14px;
  padding: 18px 18px 18px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff8ee, #fff4e1);
  border: 1px solid #f0dcc1;
  box-shadow: 0 10px 24px rgba(95, 74, 34, .08)
}

.tenant-v3 .loyalty-journey-card-v4 {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid #dfddd6;
  box-shadow: 0 10px 26px rgba(25, 25, 30, .05)
}

.tenant-v3 .journey-head-v4 h2 {
  font-size: 18px;
  margin: 5px 0 9px
}

.tenant-v3 .journey-head-v4 p {
  font-size: 13px;
  color: #72747d;
  line-height: 1.55;
  max-width: 265px
}

.tenant-v3 .journey-head-v4 p strong {
  color: #171820
}

.tenant-v3 .journey-ring-v4 {
  width: 78px;
  height: 78px;
  background: conic-gradient(var(--tenant-primary) var(--progress-angle, 0deg), #ece8e0 0);
  position: relative
}

.tenant-v3 .journey-ring-v4>div {
  width: 62px;
  height: 62px;
  background: #fffdf9;
  box-shadow: inset 0 0 0 1px #edeae2
}

.tenant-v3 .journey-ring-v4 strong {
  font-size: 20px
}

.tenant-v3 .journey-ring-v4 span {
  font-size: 10px
}

.tenant-v3 .journey-track-v4 {
  height: 8px;
  margin: 18px 0 16px;
  border-radius: 999px;
  background: #ebe7df
}

.tenant-v3 .journey-track-v4 span {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tenant-primary), color-mix(in srgb, var(--tenant-primary) 60%, #ffffff))
}

.tenant-v3 .journey-step-row {
  display: grid;
  gap: 10px
}

.tenant-v3 .journey-step-pill {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 20px;
  background: #f0e1d3;
  border: 1px solid #ead7c7;
  min-width: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .45)
}

.tenant-v3 .journey-step-pill b {
  font-family: Sora, sans-serif;
  font-size: 12px;
  color: #5d4532;
  min-width: 14px;
  text-align: center
}

.tenant-v3 .journey-step-pill span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .55);
  justify-self: end;
  border: 1px solid rgba(126, 87, 49, .12)
}

.tenant-v3 .journey-step-pill.done {
  background: #d8bda6;
  border-color: #d7baa2
}

.tenant-v3 .journey-step-pill.done span {
  background: #fff;
  box-shadow: 0 8px 12px rgba(87, 52, 21, .12)
}

.tenant-v3 .journey-step-pill img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(67, 42, 18, .18))
}

.tenant-v3 .journey-step-pill i {
  font-size: 13px;
  color: #b4a89c
}

.tenant-v3 .journey-note-v4 {
  margin-top: 16px;
  padding: 16px 0 0;
  border-top: 1px solid #efede7
}

.tenant-v3 .journey-note-v4>span {
  background: #f1edff;
  color: var(--tenant-primary);
  box-shadow: none
}

.tenant-v3 .journey-note-v4 strong {
  font-size: 13px
}

.tenant-v3 .journey-note-v4 small {
  font-size: 11px;
  color: #7d7f87;
  line-height: 1.45
}

.tenant-v3 .external-order-surface {
  margin-top: 16px;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #e0ddd6
}

.tenant-v3 .external-brand-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px
}

.tenant-v3 .external-brand {
  height: 58px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: Sora, Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  border: 1px solid #e4e1db;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8)
}

.tenant-v3 .external-brand.yemeksepeti {
  color: #d41f58
}

.tenant-v3 .external-brand.getir {
  background: linear-gradient(180deg, #6c38ff, #5b2cd6);
  color: #ffd23c;
  border-color: transparent
}

.tenant-v3 .external-brand.trendyol {
  background: linear-gradient(180deg, #ff8c31, #f56b14);
  color: #fff;
  border-color: transparent
}

.tenant-v3 .external-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ddd9d0;
  background: #fff
}

.tenant-v3 .external-form-row input {
  border: 0 !important;
  border-radius: 0 !important;
  height: 58px;
  padding: 0 18px;
  background: #fff;
  color: #1b1c22;
  box-shadow: none !important
}

.tenant-v3 .external-form-row button {
  height: 58px;
  padding: 0 24px;
  border: 0;
  background: #faf8f3;
  color: #171820;
  font-weight: 800;
  min-width: 120px
}

.tenant-v3 .app-section-head-v4 {
  margin: 18px 2px 10px
}

.tenant-v3 .app-section-head-v4 h2 {
  font-size: 17px;
  margin-top: 3px
}

.tenant-v3 .app-section-head-v4 a {
  font-size: 13px;
  color: #554770;
  text-decoration: none;
  font-weight: 700
}

.tenant-v3 .app-offer-grid-v4 {
  display: grid;
  gap: 12px
}

.tenant-v3 .app-offer-card-v4 {
  position: relative;
  min-height: 155px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e1dfd8;
  box-shadow: 0 8px 24px rgba(24, 24, 30, .05)
}

.tenant-v3 .app-offer-card-v4.has-image {
  overflow: hidden
}

.tenant-v3 .app-offer-card-v4 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tenant-v3 .app-offer-card-v4 .app-offer-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 25, .08), rgba(18, 18, 25, .6))
}

.tenant-v3 .app-offer-card-v4 .app-offer-content {
  position: relative;
  z-index: 1
}

.tenant-v3 .app-offer-card-v4 .app-offer-content span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f5f2ea;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #5f526d
}

.tenant-v3 .app-offer-card-v4.has-image .app-offer-content span {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  backdrop-filter: blur(8px)
}

.tenant-v3 .app-offer-card-v4 h3 {
  font-size: 20px;
  margin: 16px 0 8px
}

.tenant-v3 .app-offer-card-v4 p {
  font-size: 13px;
  line-height: 1.6;
  color: #6f7179;
  max-width: 330px;
  margin-bottom: 10px
}

.tenant-v3 .app-offer-card-v4.has-image h3,
.tenant-v3 .app-offer-card-v4.has-image p,
.tenant-v3 .app-offer-card-v4.has-image small {
  color: #fff
}

.tenant-v3 .app-offer-card-v4 small {
  font-size: 11px;
  color: #8a8c93
}

.tenant-v3 .app-tabbar {
  height: 84px;
  padding: 8px 14px max(8px, env(safe-area-inset-bottom));
  background: rgba(250, 249, 246, .98);
  border-top: 1px solid #e4e0d8;
  box-shadow: 0 -10px 28px rgba(22, 22, 28, .08)
}

.tenant-v3 .app-tabbar>a {
  font-size: 10px;
  color: #8c8e96;
  gap: 5px
}

.tenant-v3 .app-tabbar>a i {
  font-size: 22px
}

.tenant-v3 .app-tabbar .qr-main {
  margin-top: -34px;
  color: #4d4666
}

.tenant-v3 .app-tabbar .qr-main>span {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 7px solid #f6f4ef;
  background: radial-gradient(circle at 30% 30%, #2d3042, #17181f 70%);
  box-shadow: 0 0 0 5px rgba(113, 75, 255, .1), 0 18px 35px rgba(32, 33, 40, .24), 0 0 22px color-mix(in srgb, var(--tenant-primary) 40%, transparent)
}

.tenant-v3 .app-tabbar .qr-main.active>span {
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--tenant-primary) 75%, white), var(--tenant-primary) 70%)
}

.tenant-v3 .app-tabbar .qr-main>span i {
  font-size: 28px;
  color: #fff
}

.tenant-v3 .app-tabbar .qr-main em {
  font-size: 0;
  display: none
}

@media(max-width:560px) {
  .tenant-v3 .reward-pass-v4 .reward-pass-copy h2 {
    font-size: 22px;
    max-width: 240px
  }

  .tenant-v3 .reward-pass-footer-minimal>a {
    padding: 13px 15px
  }

  .tenant-v3 .external-brand {
    font-size: 15px
  }

  .tenant-v3 .external-form-row button {
    min-width: 102px;
    padding: 0 18px
  }
}

/* 0.5.2 customer refinements and branch module */
.tenant-v3 .tenant-brand.logo-only {
  min-width: 0 !important;
  overflow: visible
}

.tenant-v3 .tenant-header .tenant-brand.logo-only .tenant-logo-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 54px;
  object-fit: initial;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none
}

.tenant-v3 .reward-pass-beans,
.tenant-v3 .reward-pass-pattern {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important
}

.tenant-v3 .journey-step-pill {
  background: color-mix(in srgb, var(--tenant-primary) 9%, #fff);
  border-color: color-mix(in srgb, var(--tenant-primary) 20%, #ddd);
  box-shadow: none
}

.tenant-v3 .journey-step-pill b {
  color: color-mix(in srgb, var(--tenant-primary) 78%, #28232f)
}

.tenant-v3 .journey-step-pill span {
  background: rgba(255, 255, 255, .75);
  border-color: color-mix(in srgb, var(--tenant-primary) 18%, #ddd)
}

.tenant-v3 .journey-step-pill.done {
  background: color-mix(in srgb, var(--tenant-primary) 22%, #fff);
  border-color: color-mix(in srgb, var(--tenant-primary) 35%, #ddd)
}

.tenant-v3 .journey-step-pill.done span {
  background: #fff;
  box-shadow: 0 7px 14px color-mix(in srgb, var(--tenant-primary) 14%, transparent)
}

.tenant-v3 .journey-step-pill i {
  color: color-mix(in srgb, var(--tenant-primary) 35%, #aaa)
}

.tenant-v3 .home-campaign-list {
  display: grid;
  gap: 12px
}

.tenant-v3 .home-campaign-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 15px;
  min-height: 126px;
  padding: 13px 12px 13px 13px;
  background: #fff;
  border: 1px solid #e2dfd7;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(24, 24, 30, .045);
  overflow: hidden
}

.tenant-v3 .home-campaign-media {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 11%, #fff), #f6f4ee);
  display: grid;
  place-items: center
}

.tenant-v3 .home-campaign-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tenant-v3 .home-campaign-media span {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--tenant-primary);
  font-size: 20px;
  box-shadow: 0 8px 18px rgba(25, 25, 30, .08)
}

.tenant-v3 .home-campaign-copy {
  min-width: 0;
  padding: 0
}

.tenant-v3 .home-campaign-label {
  display: inline-block;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  color: var(--tenant-primary);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  line-height: 1
}

.tenant-v3 .home-campaign-copy h3 {
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 5px;
  color: #1b1c22
}

.tenant-v3 .home-campaign-copy p {
  font-size: 11px;
  line-height: 1.45;
  color: #74767e;
  margin: 0 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.tenant-v3 .home-campaign-copy small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #999a9f;
  font-size: 9px
}

.tenant-v3 .home-campaign-card>a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #5d5866;
  background: #f4f2ed;
  font-size: 10px
}

.tenant-v3 .home-campaign-card.has-image .home-campaign-media {
  background: #eee
}

.tenant-v3 .contact-page-v4 {
  padding-top: 98px !important
}

.tenant-v3 .branch-contact-list {
  display: grid;
  gap: 16px
}

.tenant-v3 .branch-contact-card {
  background: #fff;
  border: 1px solid #e0ddd6;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 9px 25px rgba(24, 24, 30, .05)
}

.tenant-v3 .branch-contact-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px
}

.tenant-v3 .branch-number {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tenant-primary) 10%, #fff);
  color: var(--tenant-primary);
  font-family: Sora, sans-serif;
  font-size: 12px;
  font-weight: 800
}

.tenant-v3 .branch-contact-head small {
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 800;
  color: #999a9f
}

.tenant-v3 .branch-contact-head h2 {
  font-size: 18px;
  margin: 3px 0 4px
}

.tenant-v3 .branch-contact-head p {
  font-size: 11px;
  color: #777982;
  line-height: 1.5;
  margin: 0
}

.tenant-v3 .branch-map-frame {
  height: 210px;
  border-radius: 18px;
  overflow: hidden;
  background: #f0efeb;
  border: 1px solid #e4e1da
}

.tenant-v3 .branch-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0
}

.tenant-v3 .branch-map-frame .map-empty {
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  color: #8c8e94;
  padding: 20px
}

.tenant-v3 .branch-map-frame .map-empty i {
  font-size: 28px;
  color: var(--tenant-primary);
  margin-bottom: 8px
}

.tenant-v3 .branch-map-frame .map-empty p {
  font-size: 11px;
  margin: 0
}

.tenant-v3 .branch-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px
}

.tenant-v3 .branch-contact-actions a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border-radius: 14px;
  background: #f7f5f0;
  color: #202127;
  text-decoration: none;
  border: 1px solid #ebe8e1
}

.tenant-v3 .branch-contact-actions a.directions {
  grid-column: 1/-1;
  background: color-mix(in srgb, var(--tenant-primary) 8%, #fff);
  border-color: color-mix(in srgb, var(--tenant-primary) 18%, #ddd)
}

.tenant-v3 .branch-contact-actions>a>i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--tenant-primary);
  font-size: 12px;
  flex: none
}

.tenant-v3 .branch-contact-actions small,
.tenant-v3 .branch-contact-actions strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.tenant-v3 .branch-contact-actions small {
  font-size: 8px;
  letter-spacing: .1em;
  color: #96979d;
  font-weight: 800
}

.tenant-v3 .branch-contact-actions strong {
  font-size: 10px;
  margin-top: 2px
}

.branch-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.branch-summary-card h3 {
  margin: 4px 0 5px
}

.branch-summary-card p {
  margin: 0;
  color: #747887
}

.branch-summary-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #f0edff;
  color: #6849db;
  font-size: 22px
}

.branch-table td small {
  line-height: 1.7
}

.branch-table .status-pill {
  white-space: nowrap
}

@media(max-width:560px) {
  .tenant-v3 .tenant-header .tenant-brand.logo-only .tenant-logo-image {
    max-width: 178px;
    max-height: 48px
  }

  .tenant-v3 .home-campaign-card {
    grid-template-columns: 82px minmax(0, 1fr) 28px;
    gap: 12px
  }

  .tenant-v3 .home-campaign-media {
    width: 82px;
    height: 88px
  }

  .tenant-v3 .branch-contact-actions {
    grid-template-columns: 1fr
  }

  .tenant-v3 .branch-contact-actions a.directions {
    grid-column: auto
  }
}

/* campaigns v5 */
.tenant-v3 .campaigns-page-v5 .app-page-heading {
  padding-bottom: 8px
}

.tenant-v3 .campaign-list-v5 {
  display: grid;
  gap: 14px
}

.tenant-v3 .campaign-card-v5 {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2dfd8;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(25, 25, 31, .055)
}

.tenant-v3 .campaign-card-media-v5 {
  min-height: 172px;
  position: relative;
  background: color-mix(in srgb, var(--tenant-primary) 8%, #f5f1e9)
}

.tenant-v3 .campaign-card-media-v5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0
}

.tenant-v3 .campaign-card-generated-v5 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary) 90%, #20192f), color-mix(in srgb, var(--tenant-primary) 52%, #fff))
}

.tenant-v3 .campaign-card-generated-v5:before,
.tenant-v3 .campaign-card-generated-v5:after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%
}

.tenant-v3 .campaign-card-generated-v5:before {
  width: 100px;
  height: 100px;
  right: -43px;
  top: -30px
}

.tenant-v3 .campaign-card-generated-v5:after {
  width: 75px;
  height: 75px;
  left: -34px;
  bottom: -24px
}

.tenant-v3 .campaign-card-generated-v5 span {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .94);
  color: var(--tenant-primary);
  font-size: 20px;
  box-shadow: 0 12px 24px rgba(25, 20, 40, .18);
  position: relative;
  z-index: 1
}

.tenant-v3 .campaign-card-generated-v5>i {
  position: absolute;
  right: 13px;
  top: 13px;
  color: rgba(255, 255, 255, .65);
  font-size: 13px
}

.tenant-v3 .campaign-card-body-v5 {
  padding: 17px 17px 15px;
  display: flex;
  flex-direction: column;
  min-width: 0
}

.tenant-v3 .campaign-card-meta-v5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.tenant-v3 .campaign-card-meta-v5>span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tenant-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em
}

.tenant-v3 .campaign-card-meta-v5>small {
  color: #9a9b9f;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92px
}

.tenant-v3 .campaign-card-body-v5 h2 {
  font-size: 16px;
  line-height: 1.3;
  margin: 9px 0 6px;
  color: #191a20
}

.tenant-v3 .campaign-card-body-v5 p {
  font-size: 11px;
  line-height: 1.55;
  color: #757780;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.tenant-v3 .campaign-card-footer-v5 {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid #efede8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.tenant-v3 .campaign-card-footer-v5>span {
  font-size: 9px;
  color: #8b8c92;
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.tenant-v3 .campaign-card-footer-v5 .campaign-ready-v5 {
  color: #4d4168;
  font-weight: 800;
  white-space: nowrap
}

@media(max-width:390px) {
  .tenant-v3 .campaign-card-v5 {
    grid-template-columns: 100px minmax(0, 1fr)
  }

  .tenant-v3 .campaign-card-body-v5 {
    padding: 14px
  }

  .tenant-v3 .campaign-card-footer-v5 {
    align-items: flex-start;
    flex-direction: column
  }
}

/* single location contact */
.tenant-v3 .single-location-card {
  padding: 16px
}

.tenant-v3 .single-contact-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 3px 16px
}

.tenant-v3 .single-contact-address>span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tenant-primary) 9%, #fff);
  color: var(--tenant-primary);
  flex: none
}

.tenant-v3 .single-contact-address small {
  display: block;
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 800;
  color: #999a9f;
  margin-bottom: 4px
}

.tenant-v3 .single-contact-address p {
  font-size: 13px;
  line-height: 1.55;
  color: #36373e;
  margin: 0
}

.qr-manual-input {
  text-transform: none;
  letter-spacing: .28em;
  font-variant-numeric: tabular-nums
}

/* 0.6.0 müşteri yolculuğu ve kampanya sayfası */
.tenant-v3 .journey-step-row {
  display: flex !important;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scrollbar-width: none;
  scroll-snap-type: x proximity
}

.tenant-v3 .journey-step-row::-webkit-scrollbar {
  display: none
}

.tenant-v3 .journey-step-pill {
  flex: 0 0 54px;
  grid-template-columns: 14px 1fr;
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--tenant-primary) 9%, #fff);
  border-color: color-mix(in srgb, var(--tenant-primary) 24%, #ddd)
}

.tenant-v3 .journey-step-pill.done {
  background: color-mix(in srgb, var(--tenant-primary) 19%, #fff);
  border-color: color-mix(in srgb, var(--tenant-primary) 42%, #ddd)
}

.tenant-v3 .journey-step-pill b {
  color: color-mix(in srgb, var(--tenant-primary) 80%, #25252a)
}

.tenant-v3 .journey-step-pill span {
  border-color: color-mix(in srgb, var(--tenant-primary) 20%, #ddd)
}

.tenant-v3 .campaigns-page-v6 {
  padding-left: 16px !important;
  padding-right: 16px !important
}

.campaigns-hero-v6 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 2px 18px
}

.campaigns-hero-icon {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tenant-primary) 13%, white);
  color: var(--tenant-primary);
  font-size: 20px
}

.campaigns-hero-v6 small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--tenant-primary)
}

.campaigns-hero-v6 h1 {
  font-size: 25px;
  margin: 5px 0
}

.campaigns-hero-v6 p {
  font-size: 12px;
  line-height: 1.55;
  color: #777981;
  margin: 0
}

.campaign-feed-v6 {
  display: grid;
  gap: 15px
}

.campaign-tile-v6 {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1ded7;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(27, 27, 32, .055)
}

.campaign-tile-media-v6 {
  height: 158px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tenant-primary) 85%, #222), color-mix(in srgb, var(--tenant-primary) 52%, white))
}

.campaign-tile-v6.variant-1 .campaign-tile-media-v6 {
  background: linear-gradient(135deg, #172f3d, #3a817f)
}

.campaign-tile-v6.variant-2 .campaign-tile-media-v6 {
  background: linear-gradient(135deg, #522816, #d66d32)
}

.campaign-tile-media-v6>img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.campaign-tile-v6.has-image .campaign-tile-media-v6:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, .02), rgba(10, 10, 15, .28))
}

.campaign-art-v6 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center
}

.campaign-art-v6 span {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .17);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 30px;
  transform: rotate(-5deg);
  box-shadow: 0 18px 35px rgba(0, 0, 0, .12)
}

.campaign-art-v6>i {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%
}

.campaign-art-v6>i:last-child {
  width: 190px;
  height: 190px
}

.campaign-date-badge {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #32333a;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .08)
}

.campaign-tile-body-v6 {
  padding: 18px
}

.campaign-category-v6 {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tenant-primary) 9%, white);
  color: var(--tenant-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em
}

.campaign-tile-body-v6 h2 {
  font-size: 19px;
  margin: 10px 0 8px
}

.campaign-tile-body-v6 p {
  font-size: 12.5px;
  line-height: 1.62;
  color: #73757d;
  margin: 0
}

.campaign-action-v6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #efede7
}

.campaign-action-v6>span {
  font-size: 11px;
  color: #85878f
}

.campaign-action-v6>span i {
  margin-right: 6px
}

.campaign-action-v6>a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--tenant-primary);
  font-size: 12px;
  font-weight: 800
}

.otp-delivery-state {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  margin-bottom: 12px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--tenant-primary) 8%, white);
  color: color-mix(in srgb, var(--tenant-primary) 82%, #222);
  font-size: 12px;
  font-weight: 700
}

.paytr-checkout-page {
  padding: 70px 0
}

.payment-checkout-heading {
  margin-bottom: 28px
}

.payment-checkout-heading>a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #666b77;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 20px
}

.payment-checkout-heading h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.045em
}

.payment-checkout-heading p {
  color: #6f7380;
  max-width: 720px
}

.paytr-secure-badge {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: #eaf8f0;
  color: #197849;
  font-weight: 800;
  font-size: 11px
}

.installment-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.installment-option {
  cursor: pointer
}

.installment-option input {
  position: absolute;
  opacity: 0
}

.installment-option>span {
  display: block;
  padding: 14px;
  border: 1px solid #dddfe5;
  border-radius: 16px;
  background: #fafafd;
  transition: .2s
}

.installment-option.selected>span {
  border-color: #6f4cff;
  background: #f3f0ff;
  box-shadow: 0 0 0 3px rgba(111, 76, 255, .09)
}

.installment-option strong,
.installment-option small,
.installment-option em {
  display: block
}

.installment-option strong {
  font-size: 14px
}

.installment-option small {
  font-size: 11px;
  color: #747886;
  margin-top: 4px
}

.installment-option em {
  font-style: normal;
  font-size: 10px;
  color: #6f4cff;
  margin-top: 7px;
  font-weight: 700
}

.payment-result-page {
  min-height: 80vh;
  padding: 90px 0;
  display: grid;
  place-items: center
}

.payment-result-card {
  max-width: 720px;
  margin: auto;
  text-align: center;
  padding: 44px;
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 28px;
  box-shadow: 0 25px 70px rgba(30, 32, 45, .1)
}

.payment-result-icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  background: #fff5dc;
  color: #b77700;
  font-size: 30px
}

.payment-result-card.status-success .payment-result-icon {
  background: #e7f8ee;
  color: #198450
}

.payment-result-card.status-failed .payment-result-icon {
  background: #ffe9e8;
  color: #c93636
}

.payment-result-number {
  padding: 17px;
  margin: 25px 0;
  border-radius: 15px;
  background: #f6f6f9
}

.payment-result-number small,
.payment-result-number strong {
  display: block
}

.payment-result-number small {
  font-size: 10px;
  letter-spacing: .14em;
  color: #838692
}

.payment-result-number strong {
  font-size: 18px;
  margin-top: 4px
}

.payment-result-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px
}

.payment-result-details>div {
  padding: 13px;
  background: #fafafd;
  border-radius: 12px
}

.payment-result-details span,
.payment-result-details strong {
  display: block
}

.payment-result-details span {
  font-size: 10px;
  color: #8b8e98
}

.payment-result-details strong {
  font-size: 13px;
  margin-top: 4px
}

.payment-result-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px
}

.provider-toggle-card {
  display: block;
  position: relative;
  cursor: pointer
}

.provider-toggle-card>input[type=checkbox] {
  position: absolute;
  right: 16px;
  top: 16px
}

.provider-toggle-card>input[type=hidden] {
  display: none
}

.provider-toggle-card>span {
  display: block;
  padding: 18px 48px 18px 18px;
  border: 1px solid #e1e3e9;
  border-radius: 16px;
  background: #fafafd
}

.provider-toggle-card i,
.provider-toggle-card strong,
.provider-toggle-card small {
  display: block
}

.provider-toggle-card i {
  font-size: 20px;
  color: #6f4cff;
  margin-bottom: 10px
}

.provider-toggle-card small {
  color: #7b7e89;
  font-size: 11px;
  margin-top: 4px
}

.otp-admin-code {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .12em
}

@media(max-width:767px) {
  .installment-option-grid {
    grid-template-columns: 1fr
  }

  .payment-result-details {
    grid-template-columns: 1fr 1fr
  }

  .payment-result-card {
    padding: 28px 18px
  }

  .payment-result-actions {
    flex-direction: column
  }
}

.paytr-result-security {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  margin: 18px 0;
  border: 1px solid #dcebe3;
  background: #f2faf5;
  border-radius: 16px;
  color: #245e42
}

.paytr-result-security>i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #dff2e6;
  color: #197849;
  flex: none
}

.paytr-result-security strong,
.paytr-result-security small {
  display: block
}

.paytr-result-security strong {
  font-size: 13px
}

.paytr-result-security small {
  font-size: 11px;
  line-height: 1.55;
  color: #5e7366;
  margin-top: 3px
}

/* PayTR Direct API corporate checkout */
.paytr-direct-checkout {
  background: linear-gradient(180deg, #f7f8fb 0%, #eef1f6 100%);
  min-height: 100vh;
  padding: 54px 0 90px
}

.checkout-progress {
  max-width: 560px;
  margin: 0 auto 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a9fab;
  font-size: 12px;
  font-weight: 700
}

.checkout-progress span {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap
}

.checkout-progress span b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e4e7ed;
  color: #777d89;
  font-size: 11px
}

.checkout-progress span.done,
.checkout-progress span.active {
  color: #252936
}

.checkout-progress span.done b {
  background: #def4e7;
  color: #19824d
}

.checkout-progress span.active b {
  background: #171b29;
  color: #fff;
  box-shadow: 0 8px 18px rgba(23, 27, 41, .18)
}

.checkout-progress>i {
  width: 72px;
  height: 1px;
  background: #d9dde5;
  margin: 0 12px
}

.payment-checkout-heading-v2 {
  margin-bottom: 30px
}

.payment-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px
}

.payment-checkout-heading-v2 h1 {
  margin: 8px 0 8px
}

.payment-checkout-heading-v2 p {
  margin: 0
}

.paytr-corporate-mark {
  min-width: 132px;
  padding: 15px 18px;
  border: 1px solid #dce1e9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(28, 31, 43, .05)
}

.paytr-corporate-mark span,
.paytr-corporate-mark small {
  display: block
}

.paytr-corporate-mark span {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #1c2340
}

.paytr-corporate-mark small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #8a909c;
  margin-top: 2px
}

.payment-form-surface {
  border-radius: 26px;
  padding: 28px;
  border: 1px solid #e0e4eb;
  box-shadow: 0 20px 60px rgba(27, 31, 45, .08)
}

.payment-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px
}

.payment-surface-head h2 {
  font-size: 22px;
  margin: 5px 0 7px
}

.payment-surface-head p {
  margin: 0;
  color: #727887;
  font-size: 13px
}

.secure-3d-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #edf8f2;
  color: #17784a;
  font-size: 11px;
  white-space: nowrap
}

.secure-3d-badge i {
  font-size: 15px
}

.checkout-card-preview {
  position: relative;
  overflow: hidden;
  min-height: 218px;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 26px;
  color: #fff;
  background: radial-gradient(circle at 85% 15%, rgba(119, 91, 255, .72), transparent 32%), linear-gradient(135deg, #151a2b 0%, #252c45 55%, #4b3d78 100%);
  box-shadow: 0 22px 42px rgba(21, 26, 43, .22)
}

.checkout-card-preview:before,
.checkout-card-preview:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .09)
}

.checkout-card-preview:before {
  width: 230px;
  height: 230px;
  right: -90px;
  top: -110px
}

.checkout-card-preview:after {
  width: 150px;
  height: 150px;
  right: -45px;
  top: -70px
}

.checkout-card-top,
.checkout-card-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.checkout-chip {
  width: 42px;
  height: 31px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f3d78d, #bfa45d);
  box-shadow: inset 0 0 0 1px rgba(87, 67, 22, .2)
}

.checkout-network {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em
}

.checkout-card-preview>strong {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 23px;
  letter-spacing: .11em;
  margin: 38px 0 30px;
  font-variant-numeric: tabular-nums
}

.checkout-card-bottom>div:last-child {
  text-align: right
}

.checkout-card-bottom small,
.checkout-card-bottom span {
  display: block
}

.checkout-card-bottom small {
  font-size: 8px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .58)
}

.checkout-card-bottom span {
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px
}

.payment-field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.payment-field-wide {
  grid-column: 1/-1
}

.payment-field label {
  display: block;
  font-size: 12px;
  font-weight: 750;
  color: #3c414e;
  margin-bottom: 7px
}

.payment-field .form-control,
.payment-field .form-select {
  height: 54px;
  border: 1px solid #dce0e7;
  border-radius: 13px;
  background: #fbfcfd;
  font-size: 14px;
  box-shadow: none
}

.payment-field .form-control:focus,
.payment-field .form-select:focus {
  border-color: #7257dd;
  box-shadow: 0 0 0 4px rgba(114, 87, 221, .1);
  background: #fff
}

.payment-input-wrap {
  position: relative
}

.payment-input-wrap>i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: #8b909c
}

.payment-input-wrap .form-control {
  padding-left: 44px
}

.card-scheme-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 8px;
  border-radius: 7px;
  background: #edf0f5;
  color: #5d6471;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em
}

.payment-card-number {
  padding-right: 78px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em
}

.installment-selection-v2 {
  margin-top: 28px;
  padding-top: 25px;
  border-top: 1px solid #eceef2
}

.installment-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 13px
}

.installment-title h3 {
  font-size: 17px;
  margin: 4px 0 0
}

.installment-title>small {
  font-size: 11px;
  color: #858b97
}

.installment-option-v2>span {
  padding: 15px;
  border-radius: 15px;
  background: #f7f8fa;
  border: 1px solid #e0e3e9;
  min-height: 126px
}

.installment-option-v2.selected>span {
  background: #f2efff;
  border-color: #7659e6;
  box-shadow: 0 0 0 3px rgba(118, 89, 230, .09)
}

.installment-option-v2 b,
.installment-option-v2 strong,
.installment-option-v2 small,
.installment-option-v2 em {
  display: block
}

.installment-option-v2 b {
  font-size: 12px;
  color: #555b67
}

.installment-option-v2 strong {
  font-size: 16px;
  color: #1d2130;
  margin-top: 10px
}

.installment-option-v2 strong small {
  display: inline;
  font-size: 10px;
  color: #777d89;
  margin-left: 3px;
  font-weight: 600
}

.installment-option-v2 em {
  font-size: 10px;
  margin-top: 8px
}

.payment-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 0;
  cursor: pointer
}

.payment-consent input {
  position: absolute;
  opacity: 0
}

.payment-consent>span {
  width: 20px;
  height: 20px;
  border: 1px solid #cfd4dc;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: transparent;
  background: #fff;
  flex: none;
  margin-top: 1px
}

.payment-consent input:checked+span {
  background: #222838;
  border-color: #222838;
  color: #fff
}

.payment-consent>span i {
  font-size: 9px
}

.payment-consent p {
  margin: 0;
  color: #626875;
  font-size: 12px;
  line-height: 1.55
}

.payment-submit-button {
  width: 100%;
  min-height: 61px;
  margin-top: 20px;
  padding: 12px 17px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #202536, #111622);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 15px 30px rgba(17, 22, 34, .2);
  transition: .2s
}

.payment-submit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(17, 22, 34, .24)
}

.payment-submit-button:disabled {
  opacity: .72;
  transform: none
}

.payment-submit-button span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800
}

.payment-submit-button strong {
  font-size: 14px
}

.payment-provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 19px;
  padding-top: 18px;
  border-top: 1px solid #eceef2
}

.payment-provider-row>div:first-child {
  display: flex;
  align-items: center;
  gap: 10px
}

.payment-provider-row>div:first-child>i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #edf8f2;
  color: #19794b
}

.payment-provider-row strong,
.payment-provider-row small {
  display: block
}

.payment-provider-row strong {
  font-size: 11px
}

.payment-provider-row small {
  font-size: 9px;
  color: #858b96;
  margin-top: 2px
}

.payment-card-brands {
  display: flex;
  align-items: center;
  gap: 9px
}

.payment-card-brands b {
  font-size: 10px;
  color: #555b68
}

.payment-summary-card-v2 {
  border-radius: 24px;
  padding: 26px;
  border: 1px solid #e0e4eb;
  box-shadow: 0 20px 60px rgba(27, 31, 45, .07)
}

.summary-package-head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.summary-package-head>i {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #f1efff;
  color: #6d50dc
}

.payment-summary-card-v2 h3 {
  font-size: 23px;
  margin: 18px 0 8px
}

.payment-summary-card-v2>p {
  font-size: 13px;
  color: #747a87;
  line-height: 1.6
}

.summary-divider {
  height: 1px;
  background: #e9ebef;
  margin: 22px 0
}

.payment-summary-card-v2 .summary-line {
  padding: 9px 0
}

.payment-summary-card-v2 .summary-line.total {
  margin-top: 10px;
  padding: 17px 0 0;
  border-top: 1px solid #e9ebef
}

.payment-summary-card-v2 .summary-line.total strong {
  font-size: 22px;
  color: #191e2c
}

.corporate-payment-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 23px;
  padding: 15px;
  border-radius: 15px;
  background: #f3f6fa;
  border: 1px solid #e1e5eb
}

.corporate-payment-note>i {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #2c3653;
  flex: none
}

.corporate-payment-note strong {
  font-size: 12px
}

.corporate-payment-note p {
  font-size: 10px;
  line-height: 1.55;
  color: #68707e;
  margin: 4px 0 0
}

.payment-assurance-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px
}

.payment-assurance-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #656c79;
  font-size: 11px
}

.payment-assurance-list i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e7f6ed;
  color: #1a7d4d;
  font-size: 8px
}

@media(max-width:991px) {
  .payment-heading-row {
    align-items: flex-start
  }

  .paytr-corporate-mark {
    display: none
  }

  .payment-summary-card-v2 {
    position: static !important
  }

  .checkout-progress>i {
    width: 42px
  }

  .payment-field-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .payment-field-wide {
    grid-column: 1/-1
  }

  .payment-field-grid>.payment-field:last-child {
    grid-column: 1/-1
  }

  .payment-provider-row {
    align-items: flex-start;
    flex-direction: column
  }
}

@media(max-width:575px) {
  .paytr-direct-checkout {
    padding: 34px 0 70px
  }

  .checkout-progress {
    font-size: 10px
  }

  .checkout-progress>i {
    width: 20px;
    margin: 0 7px
  }

  .checkout-progress span b {
    width: 24px;
    height: 24px
  }

  .payment-form-surface {
    padding: 19px;
    border-radius: 20px
  }

  .payment-surface-head {
    align-items: flex-start
  }

  .secure-3d-badge {
    font-size: 0;
    padding: 10px
  }

  .secure-3d-badge i {
    font-size: 16px
  }

  .checkout-card-preview {
    min-height: 190px;
    padding: 20px
  }

  .checkout-card-preview>strong {
    font-size: 18px;
    margin: 34px 0 28px
  }

  .payment-field-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }

  .payment-field-wide {
    grid-column: 1/-1
  }

  .payment-field-grid>.payment-field:last-child {
    grid-column: 1/-1
  }

  .installment-option-grid {
    grid-template-columns: 1fr
  }

  .installment-option-v2>span {
    min-height: auto
  }

  .payment-provider-row {
    display: none
  }

  .payment-submit-button {
    min-height: 58px
  }

  .payment-summary-card-v2 {
    padding: 20px
  }

  .payment-card-brands {
    display: none
  }
}

.payment-layout-body {
  margin: 0;
  background: #f2f4f8;
  color: #202431;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}

.payment-layout-header {
  height: 72px;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e2e5eb
}

.payment-layout-header .container,
.payment-layout-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.payment-layout-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #202431;
  text-decoration: none
}

.payment-layout-brand .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #171c2a;
  color: #fff
}

.payment-layout-header .container>span {
  font-size: 11px;
  font-weight: 750;
  color: #68707d
}

.payment-layout-header .container>span i {
  color: #19804e;
  margin-right: 6px
}

.payment-layout-footer {
  padding: 24px 0;
  background: #fff;
  border-top: 1px solid #e2e5eb;
  color: #7c828d;
  font-size: 10px
}

.payment-inline-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #f0c9c9;
  border-radius: 12px;
  background: #fff3f3;
  color: #a63030;
  font-size: 12px;
  line-height: 1.5
}

.payment-inline-error i {
  margin-top: 2px
}

/* 0.6.5 tenant journey and domain refinements */
.tenant-v3 .journey-step-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  overflow: visible !important;
  padding: 2px 1px 4px !important;
  scroll-snap-type: none !important;
}

.tenant-v3 .journey-step-pill {
  min-width: 0 !important;
  width: 100% !important;
  flex: none !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
}

.registered-domain-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px;
  border: 1px solid #dedbe7;
  border-radius: 18px;
  background: #f8f7fb
}

.registered-domain-box small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #86828f
}

.registered-domain-box strong {
  font-size: 25px;
  letter-spacing: -.03em;
  color: #1b1b22;
  word-break: break-word
}

.registered-domain-box span {
  font-size: 12px;
  color: #746f7d
}

.registered-domain-box span i {
  margin-right: 6px
}

.domain-simple-card .input-group-text {
  background: #f5f3f8;
  border-color: #dedbe7;
  color: #77717f
}

@media(max-width:420px) {
  .tenant-v3 .journey-step-row {
    gap: 6px !important
  }

  .tenant-v3 .journey-step-pill {
    padding: 6px 5px !important;
    grid-template-columns: 12px minmax(0, 1fr) !important
  }

  .tenant-v3 .journey-step-pill span {
    width: 25px !important;
    height: 25px !important
  }

  .tenant-v3 .journey-step-pill img {
    width: 19px !important;
    height: 19px !important
  }
}

/* v0.7.0 — dış sipariş yönetimi ve iki aşamalı QR süreleri */
.external-order-live {
  border-radius: 24px !important;
  border: 1px solid #e1ded6 !important;
  background: linear-gradient(180deg, #fff, #fbfaf7) !important;
  box-shadow: 0 12px 32px rgba(29, 29, 36, .06) !important
}

.external-order-live .surface-heading {
  align-items: flex-start
}

.external-order-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef8f1;
  color: #23734b;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap
}

.external-provider-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important
}

.external-provider-picker .external-brand {
  height: 72px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  border-radius: 16px !important;
  cursor: pointer;
  min-width: 0;
  transition: .18s ease;
  background: #fff !important;
  color: #30313a !important
}

.external-provider-picker .provider-choice.active {
  border-color: color-mix(in srgb, var(--tenant-primary) 55%, #ddd) !important;
  background: color-mix(in srgb, var(--tenant-primary) 7%, white) !important;
  box-shadow: 0 9px 20px color-mix(in srgb, var(--tenant-primary) 13%, transparent) !important
}

.external-provider-picker .external-brand strong {
  font-size: 10px;
  line-height: 1.15;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.external-provider-logo {
  width: 36px;
  height: 30px;
  display: grid;
  place-items: center
}

.external-provider-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px
}

.external-provider-logo i {
  font-size: 18px;
  color: var(--tenant-primary)
}

.external-other-button span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eeece6;
  color: #575962
}

.external-order-form-live {
  margin-top: 14px !important
}

.external-order-form-live input {
  font-size: 13px !important
}

.external-order-form-live button {
  background: var(--tenant-primary) !important;
  color: #fff !important
}

.external-order-help {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 11px;
  color: #85868e;
  font-size: 10px;
  line-height: 1.45
}

.external-order-help i {
  margin-top: 2px;
  color: var(--tenant-primary)
}

.external-provider-modal .modal-content {
  border: 0;
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(25, 25, 34, .2);
  overflow: hidden
}

.external-provider-modal .modal-header {
  padding: 20px;
  border-bottom: 1px solid #ece9e2
}

.external-provider-modal .modal-header small {
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 800;
  color: #8b8d94
}

.external-provider-modal-list {
  display: grid;
  gap: 8px
}

.external-provider-modal-list button {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid #e7e4dc;
  background: #fff;
  padding: 10px 12px;
  border-radius: 15px;
  text-align: left
}

.external-provider-modal-list button>span {
  width: 50px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #f5f3ed;
  border-radius: 10px
}

.external-provider-modal-list img {
  max-width: 44px;
  max-height: 32px;
  object-fit: contain
}

.external-provider-modal-list strong {
  font-size: 13px
}

.external-provider-modal-list>button>i {
  font-size: 11px;
  color: #999aa1
}

.external-order-history-list {
  padding: 5px 18px !important
}

.external-history-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #efede8
}

.external-history-row:last-child {
  border-bottom: 0
}

.external-history-logo {
  width: 44px;
  height: 38px;
  border-radius: 11px;
  background: #f3f1eb;
  display: grid;
  place-items: center;
  overflow: hidden
}

.external-history-logo img {
  width: 38px;
  height: 30px;
  object-fit: contain
}

.external-history-row strong,
.external-history-row small {
  display: block
}

.external-history-row strong {
  font-size: 12px
}

.external-history-row small {
  font-size: 10px;
  color: #8b8d94;
  margin-top: 3px
}

.external-order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap
}

.external-order-status.status-pending {
  background: #fff3d8;
  color: #936000
}

.external-order-status.status-completed {
  background: #e8f7ee;
  color: #23734b
}

.external-order-status.status-cancelled {
  background: #f9e9ea;
  color: #a33a42
}

.qr-expiry-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 0;
  color: #777982;
  font-size: 11px;
  line-height: 1.45
}

.qr-expiry-note i {
  margin-top: 2px;
  color: var(--tenant-primary)
}

.qr-operation-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  padding: 13px 15px;
  border-radius: 15px;
  background: #f3f0ff;
  border: 1px solid #e3dcff
}

.qr-operation-time span {
  font-size: 11px;
  color: #6f687f;
  font-weight: 700
}

.qr-operation-time strong {
  font-family: Sora, Inter, sans-serif;
  color: var(--tenant-primary);
  font-size: 18px
}

.provider-table-cell {
  display: flex;
  align-items: center;
  gap: 10px
}

.provider-table-cell>div {
  min-width: 0
}

.provider-table-cell strong,
.provider-table-cell small {
  display: block
}

.provider-table-cell small {
  font-size: 11px;
  color: #8a8c94
}

.provider-table-logo {
  width: 48px;
  height: 40px;
  border-radius: 10px;
  background: #f4f3ef;
  border: 1px solid #ebe8e1;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none
}

.provider-table-logo img {
  max-width: 44px;
  max-height: 34px;
  object-fit: contain
}

.provider-table-logo i {
  color: #777985
}

.external-provider-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.external-provider-setting-card {
  position: relative;
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e2e2dd;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: .18s ease
}

.external-provider-setting-card>input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.external-provider-setting-card.selected {
  border-color: color-mix(in srgb, var(--primary) 55%, #ddd);
  background: color-mix(in srgb, var(--primary) 4%, white);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 9%, transparent)
}

.external-provider-setting-logo {
  width: 66px;
  height: 52px;
  border-radius: 12px;
  background: #f6f5f1;
  display: grid;
  place-items: center;
  overflow: hidden
}

.external-provider-setting-logo img {
  max-width: 58px;
  max-height: 42px;
  object-fit: contain
}

.external-provider-setting-copy strong,
.external-provider-setting-copy small,
.external-provider-setting-copy em {
  display: block
}

.external-provider-setting-copy strong {
  font-size: 14px
}

.external-provider-setting-copy small {
  font-size: 11px;
  color: #7d7f87;
  margin-top: 3px
}

.external-provider-setting-copy em {
  font-size: 10px;
  color: #9a9ba1;
  font-style: normal;
  margin-top: 6px
}

.provider-switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #d9d9d4;
  padding: 3px;
  transition: .18s
}

.provider-switch i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  transition: .18s
}

.external-provider-setting-card.selected .provider-switch {
  background: var(--primary)
}

.external-provider-setting-card.selected .provider-switch i {
  transform: translateX(18px)
}

.dashboard-half-card {
  height: 100%
}

.external-dashboard-list {
  display: grid
}

.external-dashboard-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #ecebe7;
  text-decoration: none;
  color: inherit
}

.external-dashboard-row:last-child {
  border-bottom: 0
}

.external-dashboard-logo {
  width: 46px;
  height: 38px;
  border-radius: 10px;
  background: #f5f3ed;
  display: grid;
  place-items: center;
  overflow: hidden
}

.external-dashboard-logo img {
  max-width: 40px;
  max-height: 30px;
  object-fit: contain
}

.external-dashboard-row strong,
.external-dashboard-row p {
  display: block;
  margin: 0
}

.external-dashboard-row strong {
  font-size: 12px
}

.external-dashboard-row p {
  font-size: 10px;
  color: #898b92;
  margin-top: 3px
}

.external-order-filters {
  grid-template-columns: minmax(240px, 1fr) 190px 160px auto auto !important
}

.external-orders-table td {
  vertical-align: middle
}

.external-orders-table a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none
}

.external-order-detail-head {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 16px;
  align-items: center
}

.external-order-detail-logo {
  width: 78px;
  height: 64px;
  border-radius: 15px;
  background: #f5f3ed;
  display: grid;
  place-items: center;
  overflow: hidden
}

.external-order-detail-logo img {
  max-width: 68px;
  max-height: 52px;
  object-fit: contain
}

.external-order-detail-head h2 {
  margin: 3px 0;
  font-size: 24px
}

.external-order-detail-head p {
  margin: 0;
  color: #7e8088
}

.external-order-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px
}

.external-order-meta-grid article {
  padding: 14px;
  border-radius: 14px;
  background: #f7f7f4;
  border: 1px solid #ecebe6
}

.external-order-meta-grid small,
.external-order-meta-grid strong,
.external-order-meta-grid span,
.external-order-meta-grid a {
  display: block
}

.external-order-meta-grid small {
  font-size: 10px;
  color: #8a8c93
}

.external-order-meta-grid strong,
.external-order-meta-grid a {
  font-size: 13px;
  color: #202128;
  text-decoration: none;
  margin-top: 4px
}

.external-order-meta-grid span {
  font-size: 10px;
  color: #8a8c93;
  margin-top: 2px
}

.external-auto-description {
  padding: 13px;
  border-radius: 13px;
  background: #f5f2ff;
  border: 1px solid #e5ddff
}

.external-auto-description small,
.external-auto-description strong {
  display: block
}

.external-auto-description small {
  font-size: 10px;
  color: #7a718e
}

.external-auto-description strong {
  font-size: 12px;
  margin-top: 3px
}

@media(max-width:991px) {
  .external-provider-settings-grid {
    grid-template-columns: 1fr
  }

  .external-order-filters {
    display: flex !important;
    flex-direction: column
  }

  .external-order-detail-head {
    grid-template-columns: 64px 1fr
  }

  .external-order-detail-head>.external-order-status {
    grid-column: 1/-1;
    justify-self: start
  }

  .external-order-detail-logo {
    width: 64px;
    height: 54px
  }
}

@media(max-width:560px) {
  .external-order-secure {
    display: none
  }

  .external-provider-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important
  }

  .external-order-form-live {
    grid-template-columns: 1fr auto !important
  }

  .external-order-form-live button {
    min-width: 90px !important
  }

  .external-history-row {
    grid-template-columns: 42px 1fr
  }

  .external-history-row>.external-order-status {
    grid-column: 2;
    justify-self: start
  }

  .external-order-meta-grid {
    grid-template-columns: 1fr
  }

  .external-dashboard-row {
    grid-template-columns: 42px 1fr
  }

  .external-dashboard-row>.external-order-status {
    grid-column: 2;
    justify-self: start
  }
}

/* 0.8.0 content, integration and responsive panel */
.integration-showcase {
  padding: 76px 0;
  background: #f8f7fb;
  border-bottom: 1px solid var(--border);
  overflow: hidden
}

.integration-showcase-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 28px
}

.integration-showcase-head h2 {
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  max-width: 760px;
  letter-spacing: -.045em;
  margin: .6rem 0 0
}

.integration-showcase-head p {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0
}

.integration-logo-viewport {
  overflow: hidden;
  padding: 10px 0
}

.integration-logo-track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform
}

.integration-logo-slide {
  width: 220px;
  height: 108px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e7e5ed;
  box-shadow: 0 12px 30px rgba(27, 25, 60, .06)
}

.integration-logo-slide img {
  max-width: 110px;
  max-height: 54px;
  object-fit: contain
}

.integration-logo-slide strong {
  font-size: .88rem;
  max-width: 90px
}

.integration-logo-slide i {
  font-size: 1.8rem;
  color: var(--primary)
}

.blog-page-hero {
  padding-bottom: 80px
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px
}

.blog-card {
  overflow: hidden;
  border: 1px solid #e5e3eb;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 14px 38px rgba(30, 27, 64, .07)
}

.blog-card-visual {
  height: 220px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f1edff, #eef8ff);
  overflow: hidden
}

.blog-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .35s
}

.blog-card:hover .blog-card-visual img {
  transform: scale(1.04)
}

.blog-card-visual span {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--primary);
  font-size: 1.7rem
}

.blog-card-copy {
  padding: 23px
}

.blog-card-copy>small {
  font-size: .72rem;
  color: #91909d;
  font-weight: 700
}

.blog-card-copy h2 {
  font-size: 1.22rem;
  line-height: 1.35;
  margin: 10px 0
}

.blog-card-copy h2 a {
  color: var(--ink);
  text-decoration: none
}

.blog-card-copy p {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted);
  min-height: 72px
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 800;
  font-size: .82rem
}

.site-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 34px
}

.site-pagination a {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800
}

.site-pagination a.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary)
}

.blog-detail-head {
  padding: 90px 0 180px;
  background: linear-gradient(180deg, #f7f4ff, #fff);
  text-align: center
}

.blog-detail-head .container {
  max-width: 900px
}

.blog-detail-head h1 {
  font-size: clamp(2.6rem, 5vw, 5rem);
  letter-spacing: -.055em;
  line-height: 1.03;
  margin: 20px auto
}

.blog-detail-head p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--muted)
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 25px
}

.blog-detail-cover {
  display: block;
  width: min(1100px, calc(100% - 30px));
  height: min(560px, 52vw);
  object-fit: cover;
  border-radius: 34px;
  margin: -130px auto 55px;
  box-shadow: 0 30px 80px rgba(35, 28, 73, .18)
}

.blog-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 70px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 100px
}

.blog-article-copy p {
  font-size: 1.05rem;
  line-height: 1.95;
  color: #484956;
  margin: 0 0 1.7rem
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.blog-sidebar>a {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid #e7e5eb;
  text-decoration: none;
  color: var(--ink)
}

.blog-sidebar img,
.blog-sidebar>a>i {
  width: 72px;
  height: 60px;
  border-radius: 11px;
  object-fit: cover;
  background: #f2efff;
  display: grid;
  place-items: center;
  color: var(--primary)
}

.blog-sidebar strong,
.blog-sidebar small {
  display: block
}

.blog-sidebar strong {
  font-size: .78rem;
  line-height: 1.35
}

.blog-sidebar small {
  font-size: .66rem;
  color: #9796a1;
  margin-top: 6px
}

.blog-admin-thumb {
  width: 60px;
  height: 46px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f1eff8;
  overflow: hidden
}

.blog-admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.blog-content-editor {
  line-height: 1.7
}

.external-order-modal .modal-content {
  border: 0;
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(27, 25, 51, .25)
}

.external-order-modal .modal-header {
  padding: 22px 24px;
  border-bottom: 1px solid #eceae5
}

.external-order-modal .modal-body {
  padding: 24px
}

.external-modal-loading {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #777a87
}

.external-modal-loading i {
  font-size: 2rem;
  color: var(--primary)
}

.external-order-modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.external-order-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px
}

.external-order-modal-actions .btn {
  min-width: 170px
}

.qr-action-heading {
  display: flex;
  align-items: center;
  gap: 12px
}

.qr-action-heading>span {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: none
}

.qr-action-heading small {
  display: block;
  font-size: .66rem;
  letter-spacing: .13em;
  font-weight: 850
}

.qr-action-heading h4 {
  margin: 2px 0 0
}

.sale-action-form {
  background: linear-gradient(180deg, #f8fbff, #fff);
  border-color: #dcecf9
}

.sale-action-form .qr-action-heading>span {
  background: #e5f3ff;
  color: #2177b4
}

.sale-action-form .qr-action-heading small {
  color: #4380a8
}

.reward-action-form {
  background: linear-gradient(180deg, #fff9ee, #fff);
  border-color: #f2dfb9
}

.reward-action-form .qr-action-heading>span {
  background: #fff0ce;
  color: #b56a08
}

.reward-action-form .qr-action-heading small {
  color: #aa6a1a
}

.quick-amount-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px
}

.quick-amount-grid button {
  height: 38px;
  border: 1px solid #d9e6f1;
  border-radius: 11px;
  background: #fff;
  color: #4d6576;
  font-weight: 850
}

.quick-amount-grid button:hover,
.quick-amount-grid button.active {
  background: #257db9;
  color: #fff;
  border-color: #257db9;
  box-shadow: 0 7px 16px rgba(37, 125, 185, .2)
}

.reward-balance-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #fff4db;
  border: 1px solid #f1dfb8
}

.reward-balance-notice>i {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #b16b12
}

.reward-balance-notice small,
.reward-balance-notice strong {
  display: block
}

.reward-balance-notice small {
  font-size: .68rem;
  color: #8e744e
}

.reward-balance-notice strong {
  font-size: 1.15rem
}

.store-qr-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 22px;
  align-items: start
}

.store-qr-preview {
  position: sticky;
  top: 24px
}

.qr-style-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px
}

.qr-style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 13px 10px;
  border: 1px solid #e1e2e8;
  border-radius: 16px;
  background: #f8f9fb
}

.qr-style-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
  background: color-mix(in srgb, var(--primary) 4%, white)
}

.qr-style-card strong {
  font-size: .78rem
}

.qr-style-card small {
  font-size: .62rem;
  color: #858796
}

.qr-style-icon {
  width: 46px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e3e4e9;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  padding: 7px
}

.qr-style-icon i {
  background: #1e2533
}

.style-rounded i {
  border-radius: 5px
}

.style-dots i {
  border-radius: 50%
}

.style-premium i:nth-child(1) {
  background: var(--primary)
}

.style-minimal i:nth-child(2) {
  opacity: .25
}

.qr-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.qr-control {
  padding: 14px;
  border: 1px solid #e4e4e9;
  border-radius: 15px
}

.qr-control label {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  font-weight: 800;
  margin-bottom: 10px
}

.qr-control label b {
  color: var(--primary)
}

.qr-control>div {
  display: flex;
  justify-content: space-between;
  color: #9495a0;
  font-size: .63rem
}

.qr-control input[type=range] {
  width: 100%;
  accent-color: var(--primary)
}

.qr-color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.qr-color-grid label>span {
  font-size: .72rem;
  font-weight: 800
}

.qr-color-grid label>div {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid #e4e4e9;
  border-radius: 13px
}

.qr-color-grid input {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent
}

.qr-color-grid code {
  font-size: .68rem;
  color: #737583
}

.qr-option-switches {
  display: grid;
  gap: 10px
}

.qr-option-switches label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px;
  border: 1px solid #e4e4e9;
  border-radius: 15px
}

.qr-option-switches strong,
.qr-option-switches small {
  display: block
}

.qr-option-switches strong {
  font-size: .78rem
}

.qr-option-switches small {
  font-size: .65rem;
  color: #858796;
  margin-top: 2px
}

.qr-option-switches input {
  display: none
}

.qr-option-switches label>span {
  width: 44px;
  height: 25px;
  border-radius: 999px;
  background: #d4d5da;
  padding: 3px;
  transition: .2s
}

.qr-option-switches label>span:before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  transition: .2s
}

.qr-option-switches input:checked+span {
  background: var(--primary)
}

.qr-option-switches input:checked+span:before {
  transform: translateX(19px)
}

.qr-template-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 16px
}

.qr-template-card {
  padding: 7px;
  border: 1px solid #e0e0e5;
  border-radius: 14px;
  background: #fff;
  text-align: left
}

.qr-template-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent)
}

.qr-template-card img {
  width: 100%;
  aspect-ratio: 1/1.2;
  object-fit: cover;
  object-position: top;
  border-radius: 9px;
  background: #f4f3ef
}

.qr-template-card span,
.qr-template-card strong,
.qr-template-card small {
  display: block
}

.qr-template-card span {
  padding: 7px 3px 2px
}

.qr-template-card strong {
  font-size: .68rem
}

.qr-template-card small {
  font-size: .56rem;
  color: #9798a2;
  margin-top: 2px
}

.store-qr-preview>h3 {
  margin: 8px 0 18px
}

.store-qr-canvas {
  display: grid;
  place-items: center;
  padding: 17px;
  border-radius: 22px;
  background-image: linear-gradient(45deg, #f1f2f4 25%, transparent 25%), linear-gradient(-45deg, #f1f2f4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f2f4 75%), linear-gradient(-45deg, transparent 75%, #f1f2f4 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  border: 1px solid #e1e2e7;
  overflow: hidden
}

.store-qr-canvas canvas,
.store-qr-canvas svg {
  width: 100% !important;
  height: auto !important;
  max-width: 310px
}

.store-qr-preview>strong,
.store-qr-preview>small {
  display: block;
  text-align: center
}

.store-qr-preview>strong {
  font-size: .73rem;
  margin-top: 13px
}

.store-qr-preview>small {
  font-size: .66rem;
  color: #91929d;
  word-break: break-all;
  margin-top: 4px
}

.qr-print-note {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: #f4f2eb
}

.qr-print-note i {
  color: var(--primary);
  margin-top: 3px
}

.qr-print-note p {
  font-size: .66rem;
  color: #70727c;
  margin: 0;
  line-height: 1.45
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(18, 18, 29, .48);
  backdrop-filter: blur(3px);
  z-index: 1050
}

.sidebar-mobile-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #f1f0f5;
  color: #252634;
  z-index: 2
}

.sidebar-dark .sidebar-mobile-close {
  background: #292941;
  color: #fff
}

.mobile-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.mobile-qr-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 7px
}

.dashboard-title-wrap {
  min-width: 0
}

.dashboard-content img {
  max-width: 100%
}

.table-responsive {
  max-width: 100%
}

@media(max-width:1199px) {
  .store-qr-page {
    grid-template-columns: 1fr
  }

  .store-qr-preview {
    position: static
  }

  .qr-template-grid {
    grid-template-columns: repeat(5, 1fr)
  }
}

@media(max-width:991px) {
  body.sidebar-open {
    overflow: hidden
  }

  .dashboard-shell {
    display: block
  }

  .sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    width: min(310px, 86vw);
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 1060;
    overflow-y: auto;
    box-shadow: 20px 0 60px rgba(20, 18, 39, .2)
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .sidebar.open~* {}

  .sidebar-backdrop {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: .2s
  }

  .sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible
  }

  .dashboard-main {
    min-width: 0
  }

  .dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: 13px 15px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #e8e7ed
  }

  .dashboard-topbar h1 {
    font-size: 1.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw
  }

  .dashboard-topbar .eyebrow {
    display: none
  }

  .dashboard-topbar .user-chip {
    padding: 5px 8px
  }

  .dashboard-topbar .user-chip>div {
    display: none
  }

  .dashboard-content {
    padding: 16px
  }

  .surface-card {
    padding: 18px;
    border-radius: 19px
  }

  .card-heading {
    align-items: flex-start;
    gap: 12px
  }

  .card-heading>.btn,
  .card-heading>a.btn {
    white-space: nowrap
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .blog-detail-layout {
    grid-template-columns: 1fr;
    gap: 35px
  }

  .blog-sidebar {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
  }

  .blog-sidebar>a {
    grid-template-columns: 1fr
  }

  .integration-showcase-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px
  }

  .external-order-modal-form {
    grid-template-columns: 1fr
  }

  .qr-style-presets {
    grid-template-columns: repeat(3, 1fr)
  }

  .qr-template-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .external-order-filters {
    display: flex !important;
    flex-direction: column
  }

  .report-filter-bar>* {
    width: 100%
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .stat-card {
    min-width: 0
  }

  .operation-grid {
    grid-template-columns: 1fr
  }

  .qr-loyalty-summary {
    grid-template-columns: 1fr
  }

  .external-provider-settings-grid {
    grid-template-columns: 1fr
  }

  .role-table,
  .external-orders-table {
    min-width: 850px
  }
}

@media(max-width:767px) {
  .site-header .site-actions {
    align-items: stretch !important;
    flex-direction: column
  }

  .integration-logo-slide {
    width: 180px;
    height: 92px
  }

  .integration-logo-slide img {
    max-width: 85px
  }

  .blog-grid,
  .blog-grid-home {
    grid-template-columns: 1fr
  }

  .blog-detail-head {
    padding: 70px 0 140px
  }

  .blog-detail-cover {
    margin-top: -100px
  }

  .blog-sidebar {
    grid-template-columns: 1fr
  }

  .qr-style-presets {
    grid-template-columns: repeat(2, 1fr)
  }

  .qr-editor-grid,
  .qr-color-grid {
    grid-template-columns: 1fr
  }

  .qr-template-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .external-order-modal-actions {
    flex-direction: column-reverse
  }

  .external-order-modal-actions .btn {
    width: 100%
  }

  .dashboard-stats {
    grid-template-columns: 1fr
  }

  .dashboard-content {
    padding: 12px
  }

  .dashboard-topbar .user-chip {
    display: none
  }

  .dashboard-topbar h1 {
    max-width: 72vw
  }

  .subscription-banner {
    padding: 18px
  }

  .subscription-banner h2 {
    font-size: 1.2rem
  }

  .stat-grid {
    grid-template-columns: 1fr
  }

  .card-heading {
    flex-direction: column
  }

  .card-heading>.btn,
  .card-heading>a.btn {
    width: 100%
  }

  .quick-amount-grid {
    grid-template-columns: repeat(5, 1fr)
  }

  .qr-customer-toolbar {
    align-items: stretch;
    flex-direction: column
  }

  .qr-customer-header {
    padding: 17px
  }

  .qr-session-expiry {
    width: 100%;
    text-align: left
  }

  .report-metric-grid {
    grid-template-columns: 1fr
  }

  .pagination-bar {
    align-items: flex-start;
    flex-direction: column
  }

  .pagination-bar nav {
    flex-wrap: wrap
  }

  .external-order-detail-head {
    grid-template-columns: 58px 1fr
  }

  .external-order-detail-head>.external-order-status {
    grid-column: 1/-1;
    justify-self: start
  }

  .external-order-meta-grid {
    grid-template-columns: 1fr
  }

  .provider-table-cell {
    min-width: 180px
  }
}

@media(max-width:480px) {
  .mobile-qr-shortcut span {
    display: none
  }

  .mobile-qr-shortcut {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center
  }

  .dashboard-topbar h1 {
    font-size: 1.12rem
  }

  .qr-style-presets {
    grid-template-columns: 1fr 1fr
  }

  .qr-template-grid {
    grid-template-columns: 1fr 1fr
  }

  .quick-amount-grid {
    gap: 5px
  }

  .quick-amount-grid button {
    height: 34px
  }

  .store-qr-editor,
  .store-qr-preview {
    padding: 15px
  }

  .external-order-modal .modal-body {
    padding: 16px
  }

  .external-order-modal .modal-header {
    padding: 17px
  }

  .blog-card-visual {
    height: 190px
  }
}

:root {
  --brand-primary: #7C4DFF;
  --brand-primary-2: #A855F7;
  --brand-dark: #382163;
  --brand-soft: #f7f3ff;
}

body,
button,
input,
select,
textarea {
  font-family: 'Nunito', sans-serif !important
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-2));
  border: none
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #6f43ee, #9f47f0)
}

.brand-logo-only img {
  height: 46px;
  width: auto;
  display: block
}

.site-header .nav-link i {
  opacity: .75
}

.hero-slider-card {
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  min-height: 560px;
  box-shadow: 0 30px 70px rgba(50, 23, 94, .2)
}

.hero-slider-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-slider-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(32, 16, 63, .9) 0%, rgba(74, 35, 128, .78) 40%, rgba(74, 35, 128, .18) 100%)
}

.hero-slider-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 70px 56px;
  color: #fff
}

.integration-logo-viewport.manual-scroll {
  overflow: auto;
  scrollbar-width: thin;
  padding-bottom: 12px
}

.integration-logo-track {
  display: flex;
  gap: 24px;
  min-width: max-content;
  animation: marquee 28s linear infinite
}

.integration-logo-viewport:hover .integration-logo-track {
  animation-play-state: paused
}

.integration-logo-slide.logo-only {
  width: 150px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0
}

.integration-logo-slide.logo-only img {
  max-width: 120px;
  max-height: 54px;
  object-fit: contain;
  filter: none
}

@keyframes marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.qr-visual-card {
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
  overflow: hidden
}

.qr-visual-card>* {
  position: relative;
  z-index: 2
}

.qr-visual-card .bento-scrim {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1
}

.home-band-section {
  padding: 72px 0
}

.home-band-media {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(41, 16, 86, .08)
}

.home-band-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.site-footer-upgraded {
  padding-top: 64px
}

.footer-grid-upgraded {
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 18px
}

.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none
}

.footer-contact-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 10px
}

.industry-grid-demos {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px
}

.industry-demo-card {
  padding: 24px;
  border: 1px solid #ede8f8;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(50, 23, 94, .06)
}

.industry-demo-head img {
  height: 56px;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 16px
}

.sidebar-help-link {
  text-decoration: none;
  color: inherit
}

.user-dropdown-menu {
  border-radius: 16px;
  padding: .5rem
}

.user-dropdown-menu .dropdown-item {
  border-radius: 10px
}

.contact-list a,
.contact-list div {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #ece7f5;
  text-decoration: none;
  color: inherit
}

.contact-list i {
  margin-top: 4px;
  color: var(--brand-primary)
}

@media (max-width:991.98px) {
  .hero-slider-copy {
    padding: 48px 28px
  }

  .hero-slider-card {
    min-height: 520px
  }

  .footer-grid-upgraded {
    grid-template-columns: 1fr 1fr
  }

  .integration-logo-track {
    animation: none
  }
}

@media (max-width:575.98px) {
  .footer-grid-upgraded {
    grid-template-columns: 1fr
  }

  .hero-slider-card {
    min-height: 460px
  }

  .brand-logo-only img {
    height: 38px
  }
}

/* 0.9.1 içerik yönetimi ve genel düzenlemeler */
.integration-logo-track {
  animation: none !important;
  transition: transform .65s cubic-bezier(.22, .75, .28, 1)
}

.integration-logo-viewport.manual-scroll {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity
}

.integration-logo-viewport.manual-scroll:active {
  cursor: grabbing
}

.integration-logo-slide.logo-only {
  scroll-snap-align: center
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 58px
}

.hero-carousel .carousel-indicators {
  bottom: 18px
}

.hero-carousel .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 999px
}

.management-preview.wide {
  width: 180px;
  min-width: 180px;
  height: 130px;
  border-radius: 18px;
  overflow: hidden;
  background: #f4f1fa
}

.management-preview.wide img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.site-band-admin-card {
  padding: 20px;
  border: 1px solid #ece7f6;
  border-radius: 20px;
  background: #faf9fd
}

.loyalty-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px
}

.loyalty-admin-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: start
}

.loyalty-admin-item>img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border: 1px solid #eee8f7;
  border-radius: 22px;
  padding: 12px;
  background: #fff
}

.sidebar .brand-logo-only img {
  max-width: 165px;
  max-height: 48px;
  filter: none
}

.sidebar-dark .brand-logo-only img {
  filter: brightness(0) invert(1)
}

.dashboard-topbar .user-chip.dropdown-toggle:after {
  margin-left: 10px
}

@media(min-width:992px) {
  .dashboard-topbar .dropdown:hover>.dropdown-menu {
    display: block;
    margin-top: 0
  }

  .dashboard-topbar .dropdown:hover>.dropdown-toggle {
    box-shadow: 0 10px 28px rgba(68, 39, 126, .12)
  }
}

@media(max-width:767.98px) {
  .management-item {
    display: block
  }

  .management-preview.wide {
    width: 100%;
    height: 180px;
    margin-bottom: 16px
  }

  .loyalty-admin-grid {
    grid-template-columns: 1fr
  }

  .loyalty-admin-item {
    grid-template-columns: 72px 1fr
  }

  .loyalty-admin-item>img {
    width: 72px;
    height: 72px
  }

  .hero-slider-copy h1 {
    font-size: clamp(2rem, 9vw, 3.2rem)
  }
}

.demo-readonly-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--tenant-primary) 24%, #ddd);
  background: color-mix(in srgb, var(--tenant-primary) 8%, white);
  border-radius: 18px
}

.demo-readonly-banner>i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tenant-primary);
  color: #fff
}

.demo-readonly-banner strong,
.demo-readonly-banner small {
  display: block
}

.demo-readonly-banner small {
  color: #777;
  margin-top: 2px
}

.integration-showcase {
  background: #fff;
  border-bottom: 0
}

:root {
  --primary: #7C4DFF;
  --primary-dark: #5F35D8;
  --ink: #24143D;
  --soft: #F8F5FF;
  --border: #EAE3F6
}

.site-footer .brand-logo-only img {
  height: 54px;
  background: #fff;
  border-radius: 15px;
  padding: 7px 12px
}

/* ===== Siparsis 0.9.2 site refresh ===== */
:root {
  --primary: #ff244f;
  --primary-dark: #df173f;
  --ink: #161829;
  --muted: #666a7f;
  --soft: #fff6f7;
  --border: #ece6ea;
  --surface: #ffffff;
  --shadow: 0 18px 60px rgba(20, 17, 34, .08)
}

body,
.payment-layout-body {
  font-family: 'Nunito', sans-serif !important
}

.brand-logo-only img {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain
}

.site-header {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(22, 24, 41, .06)
}

.site-header .nav-link {
  font-weight: 800;
  color: #3e4355;
  padding: .9rem .8rem !important;
  border-radius: 999px
}

.site-header .nav-link.active,
.site-header .nav-link:hover {
  color: var(--primary);
  background: rgba(255, 36, 79, .06)
}

.site-actions .btn-light {
  border-color: #ebe5e8;
  background: #fff
}

.hero-slider-shell {
  background: #fff
}

.hero-carousel-full,
.hero-carousel-full .carousel-inner,
.hero-carousel-full .carousel-item,
.hero-slider-panel {
  min-height: calc(100vh - 86px)
}

.hero-slider-panel {
  display: flex;
  align-items: center
}

.hero-slider-fluid {
  padding-inline: clamp(18px, 4vw, 48px)
}

.hero-slider-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  min-height: calc(100vh - 86px);
  padding: 40px 0 74px
}

.hero-slider-copy {
  padding: 0;
  color: #fff;
  max-width: 720px
}

.hero-slider-copy h1 {
  font-size: clamp(3rem, 5.6vw, 5.9rem);
  line-height: .95;
  letter-spacing: -.055em;
  margin: 1rem 0 1.2rem;
  font-weight: 900
}

.hero-slider-copy .hero-lead {
  font-size: 1.12rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .84);
  max-width: 650px
}

.hero-slider-copy .hero-badge {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff
}

.hero-slider-copy .btn-light {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .96)
}

.hero-slider-copy .btn-primary {
  background: #fff;
  color: #171828;
  box-shadow: none
}

.hero-slider-copy .btn-primary:hover {
  background: #fff;
  color: #171828
}

.hero-slider-visual {
  display: flex;
  justify-content: flex-end
}

.hero-slider-image-frame {
  width: min(100%, 760px);
  height: min(70vh, 740px);
  min-height: 440px;
  border-radius: 34px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08)
}

.hero-slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.hero-carousel-indicators {
  bottom: 26px;
  gap: 10px
}

.hero-carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .5);
  opacity: 1
}

.hero-carousel-indicators .active {
  width: 42px;
  background: #fff
}

.hero-carousel-control {
  width: 64px;
  opacity: 1
}

.hero-carousel-control .carousel-control-prev-icon,
.hero-carousel-control .carousel-control-next-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .14);
  background-size: 42%
}

.integration-showcase-v2 {
  padding: 76px 0 54px;
  background: #fff
}

.integration-showcase-head.compact {
  margin-bottom: 22px
}

.integration-showcase-head.compact h2 {
  max-width: 620px;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.04;
  margin: .5rem 0 0;
  letter-spacing: -.05em
}

.integration-logo-viewport {
  overflow: hidden;
  padding: 14px 0
}

.integration-logo-track {
  display: flex;
  gap: 34px;
  width: max-content;
  will-change: transform
}

.integration-logo-slide.logo-only {
  width: 190px;
  height: 92px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none
}

.integration-logo-slide.logo-only img {
  max-width: 150px;
  max-height: 58px;
  object-fit: contain;
  opacity: .92;
  border-radius: 10px;
}

.integration-logo-slide.logo-only i {
  font-size: 2.1rem;
  color: #989ba7
}

.manual-scroll,
.no-scrollbar {
  scrollbar-width: none
}

.manual-scroll::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none
}

.home-band-media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 520px;
  object-fit: cover;
  border-radius: 30px
}

.home-band-section h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.05em;
  font-weight: 900;
  margin: .8rem 0 1rem
}

.home-band-section .lead {
  font-size: 1.05rem;
  line-height: 1.9
}

.feature-bento .qr-visual-card {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat
}

.bento-scrim {
  background: linear-gradient(135deg, rgba(9, 12, 28, .9), rgba(255, 36, 79, .52))
}

.feature-bento h3 {
  font-weight: 900
}

.feature-bento p {
  line-height: 1.8
}

.site-footer-upgraded {
  padding: 82px 0 24px;
  background: #101321;
  color: #fff;
  position: relative;
  overflow: hidden
}

.site-footer-upgraded:before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 36, 79, .14), transparent 32%)
}

.site-footer .brand-logo-only img {
  height: 56px;
  background: none;
  padding: 0;
  border-radius: 0
}

.footer-grid-upgraded {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .9fr)) minmax(0, 1.1fr);
  gap: 34px;
  position: relative;
  z-index: 1
}

.footer-grid-upgraded h6 {
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
  margin-bottom: 18px
}

.footer-grid-upgraded a,
.footer-grid-upgraded span {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  line-height: 1.8
}

.footer-grid-upgraded a:hover {
  color: #fff
}

.footer-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px
}

.footer-contact-line i {
  margin-top: 6px;
  min-width: 18px
}

.footer-contact-line .fa-envelope {
  margin-right: 4px
}

.footer-tagline {
  max-width: 340px;
  line-height: 1.85
}

.footer-socials a {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08)
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 36px;
  padding-top: 18px;
  color: rgba(255, 255, 255, .58)
}

.industries-three-up {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}

.industry-demo-card {
  border-radius: 28px;
  border: 1px solid #ece5ea;
  box-shadow: 0 16px 40px rgba(17, 19, 33, .06);
  padding: 28px;
  display: flex;
  flex-direction: column
}

.industry-demo-card h3 {
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: .75rem
}

.industry-demo-card p {
  color: var(--muted);
  line-height: 1.75
}

.industry-demo-head {
  min-height: 84px;
  display: flex;
  align-items: center
}

.industry-demo-head img {
  height: 58px;
  width: auto;
  object-fit: contain
}

.industry-feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 10px
}

.industry-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #41485c;
  font-weight: 700
}

.industry-feature-list i {
  color: var(--primary);
  margin-top: 4px
}

.admin-image-hint,
.form-text {
  color: #7d8094;
  font-size: .78rem
}

@media(max-width:1199.98px) {
  .hero-slider-layout {
    grid-template-columns: 1fr 1fr
  }

  .industries-three-up {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:991.98px) {

  .hero-carousel-full,
  .hero-carousel-full .carousel-inner,
  .hero-carousel-full .carousel-item,
  .hero-slider-panel {
    min-height: auto
  }

  .hero-slider-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 34px 0 86px
  }

  .hero-slider-copy h1 {
    font-size: clamp(2.6rem, 9vw, 4.5rem)
  }

  .hero-slider-image-frame {
    height: 360px;
    min-height: 360px
  }

  .footer-grid-upgraded {
    grid-template-columns: 1fr 1fr
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start
  }

  .integration-logo-slide.logo-only {
    width: 160px;
    height: 84px
  }
}

@media(max-width:767.98px) {
  .site-header .navbar-collapse {
    padding: 12px 0 6px
  }

  .site-actions {
    flex-direction: column;
    align-items: stretch !important
  }

  .site-actions .btn,
  .site-actions form,
  .site-actions form button {
    width: 100%
  }

  .hero-slider-copy .hero-actions {
    flex-direction: column;
    align-items: stretch
  }

  .hero-slider-copy .hero-actions .btn {
    width: 100%
  }

  .integration-showcase-v2 {
    padding: 60px 0 40px
  }

  .integration-logo-track {
    gap: 18px
  }

  .integration-logo-slide.logo-only {
    width: 138px;
    height: 70px
  }

  .integration-logo-slide.logo-only img {
    max-width: 120px;
    max-height: 44px
  }

  .home-band-media img {
    min-height: 260px
  }

  .footer-grid-upgraded {
    grid-template-columns: 1fr
  }

  .industries-three-up {
    grid-template-columns: 1fr
  }
}
/* ===== Siparsis 0.9.3 köşeli ana site ve kurumsal renk sistemi ===== */
.site-body{
  --primary:#ed1529;
  --primary-dark:#c80f22;
  --ink:#130d30;
  --muted:#676779;
  --soft:#f7f6f8;
  --border:#dedbe3;
  --brand-gradient:linear-gradient(135deg,#12162d 0%,#ff244f 100%);
  color:var(--ink);
}
.site-body .btn,
.site-body .form-control,
.site-body .form-select,
.site-body .hero-badge,
.site-body .surface-card,
.site-body .hero-slider-image-frame,
.site-body .integration-logo-slide,
.site-body .home-band-media,
.site-body .home-band-media img,
.site-body .bento-card,
.site-body .feature-icon,
.site-body .onboarding-preview,
.site-body .onboarding-step,
.site-body .blog-card,
.site-body .blog-card-visual,
.site-body .cta-panel,
.site-body .industry-demo-card,
.site-body .price-card,
.site-body .auth-form-card,
.site-body .auth-panel,
.site-body .contact-list a,
.site-body .contact-list div,
.site-body .footer-socials a,
.site-body .page-hero,
.site-body .carousel-indicators [data-bs-target],
.site-body .nav-link,
.site-body .alert,
.site-body .accordion-item,
.site-body .accordion-button,
.site-body .badge{
  border-radius:0!important;
}
.site-body .btn-primary{
  background:#ed1529!important;
  border-color:#ed1529!important;
  color:#fff!important;
  box-shadow:none!important;
}
.site-body .btn-primary:hover,
.site-body .btn-primary:focus{
  background:#130d30!important;
  border-color:#130d30!important;
  color:#fff!important;
}
.site-body .btn-outline-dark{
  border-color:#130d30;
  color:#130d30;
}
.site-body .btn-outline-dark:hover{
  background:#130d30;
  border-color:#130d30;
  color:#fff;
}
.site-body .btn-light{
  background:#fff;
  border-color:#d9d5df;
  color:#130d30;
  box-shadow:none;
}
.site-body .btn-light:hover{
  background:#f4f2f5;
  border-color:#130d30;
  color:#130d30;
}
.site-body .eyebrow,
.site-body .industry-feature-list i,
.site-body .blog-read-link,
.site-body .contact-list i{
  color:#ed1529;
}
.site-body .site-header .nav-link.active,
.site-body .site-header .nav-link:hover{
  color:#ed1529;
  background:rgba(237,21,41,.06);
}
.site-body .header-brand-logo img{
  height:48px;
  width:auto;
  max-width:220px;
  object-fit:contain;
}
.site-body .hero-slider-panel,
.site-body .cta-panel{
  background:var(--brand-gradient);
}
.site-body .hero-slider-copy .btn-primary{
  background:#ed1529!important;
  color:#fff!important;
  border-color:#ed1529!important;
}
.site-body .hero-slider-copy .btn-primary:hover{
  background:#130d30!important;
  border-color:#130d30!important;
}
.site-body .hero-carousel-control .carousel-control-prev-icon,
.site-body .hero-carousel-control .carousel-control-next-icon{
  border-radius:0;
}
.site-body .site-footer-upgraded{
  background:#130d30;
}
.site-body .site-footer-upgraded:before{
  background:linear-gradient(120deg,rgba(237,21,41,.08),transparent 42%);
}
.site-body .footer-brand-logo img{
  height:58px;
  width:auto;
  max-width:250px;
  object-fit:contain;
  background:none!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
}
.site-body .footer-contact-column{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.site-body .footer-contact-item{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:14px;
  margin:0 0 17px!important;
  padding:0!important;
  color:rgba(255,255,255,.82)!important;
  text-decoration:none;
}
.site-body .footer-contact-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  color:#ed1529!important;
}
.site-body .footer-contact-icon i{
  margin:0!important;
  line-height:1;
}
.site-body .footer-contact-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.35;
}
.site-body .footer-contact-text small{
  display:block;
  margin:0 0 5px;
  color:rgba(255,255,255,.45);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.site-body .footer-contact-text strong{
  display:block;
  color:rgba(255,255,255,.86);
  font-size:.88rem;
  font-weight:700;
  overflow-wrap:anywhere;
}
.site-body .footer-grid-upgraded a:hover .footer-contact-text strong{
  color:#fff;
}
.site-body .footer-socials a:hover{
  background:#ed1529;
  border-color:#ed1529;
}
.site-body .footer-bottom{
  border-top-color:rgba(255,255,255,.12);
}
.site-logo-preview{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border:1px solid #dedbe3;
}
.site-logo-preview.light{background:#fff}
.site-logo-preview.dark{background:#130d30}
.site-logo-preview img{max-width:100%;max-height:58px;object-fit:contain}
@media(max-width:767.98px){
  .site-body .header-brand-logo img{height:42px;max-width:190px}
  .site-body .footer-brand-logo img{height:50px;max-width:220px}
}

/* Public site uses a deliberately square visual language. */
.site-body *{border-radius:0!important}

/* ===== Siparsis 1.0 platform paketleri + radiuslu site güncellemesi ===== */
.site-body .btn,
.site-body .form-control,
.site-body .form-select,
.site-body .surface-card,
.site-body .home-band-media,
.site-body .home-band-media img,
.site-body .bento-card,
.site-body .blog-card,
.site-body .blog-card-visual,
.site-body .cta-panel,
.site-body .industry-demo-card,
.site-body .price-card,
.site-body .auth-form-card,
.site-body .contact-list a,
.site-body .contact-list div,
.site-body .accordion-item,
.site-body .accordion-button,
.site-body .alert { border-radius: 18px !important; }
.site-body .btn { border-radius: 12px !important; }
.site-body .badge,.site-body .hero-badge,.site-body .plan-duration,.site-body .platform-status { border-radius: 999px !important; }
.site-body .hero-slider-image-frame,
.site-body .hero-slider-image-frame img { border-radius: 28px !important; overflow:hidden; }
.site-body .integration-logo-slide { border-radius: 16px !important; }
.site-body .nav-link { border-radius: 10px !important; }
.site-body .page-hero { border-radius: 0 !important; margin:0 !important; padding:46px 0 42px !important; }
.site-body .section-space:first-of-type { margin-top:0; }

.site-top-strip{background:#130d30;color:#fff;font-size:.78rem;line-height:1.2}
.site-top-strip .container{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-top-slogan{font-weight:800;letter-spacing:.01em}
.site-top-contact{display:flex;align-items:center;gap:18px}
.site-top-contact a{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.82);text-decoration:none;transition:.2s ease}
.site-top-contact a:hover{color:#fff}

.site-floating-social{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:1040;display:flex;flex-direction:column;gap:8px;padding:7px;background:rgba(255,255,255,.9);border:1px solid rgba(19,13,48,.1);border-radius:18px!important;box-shadow:0 16px 40px rgba(19,13,48,.14);backdrop-filter:blur(14px)}
.site-floating-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:12px!important;color:#130d30;background:#f5f3f6;text-decoration:none;transition:.2s ease}
.site-floating-social a:hover{background:#ed1529;color:#fff;transform:translateX(-2px)}

.site-body .hero-carousel-full,
.site-body .hero-carousel-full .carousel-inner,
.site-body .hero-carousel-full .carousel-item,
.site-body .hero-slider-panel{min-height:70vh}
.site-body .hero-slider-layout{min-height:70vh;padding-top:34px;padding-bottom:48px}

.external-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.external-feature-card{background:#fff;border:1px solid #ebe7ed;border-radius:24px!important;overflow:hidden;box-shadow:0 18px 50px rgba(19,13,48,.07)}
.external-feature-image{aspect-ratio:16/10;background:#f5f3f6;overflow:hidden}
.external-feature-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.external-feature-card:hover .external-feature-image img{transform:scale(1.035)}
.external-feature-copy{padding:22px}
.external-feature-copy h3{font-size:1.2rem;font-weight:900;margin-bottom:8px}
.external-feature-copy p{margin:0;color:#6f6c7d;line-height:1.7}

.home-platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.home-platform-card{position:relative;display:flex;flex-direction:column;min-height:100%;padding:26px;background:#fff;border:1px solid #e9e5ec;border-radius:26px!important;box-shadow:0 18px 50px rgba(19,13,48,.06)}
.home-platform-card.featured{border-color:rgba(237,21,41,.32);box-shadow:0 22px 60px rgba(237,21,41,.1)}
.home-platform-icon,.platform-plan-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px!important;background:#130d30;color:#fff;font-size:1.35rem;margin-bottom:18px}
.home-platform-card .platform-status{position:absolute;right:22px;top:22px}
.home-platform-card h3{font-weight:900;margin:3px 0 10px}
.home-platform-card p{color:#6f6c7d;line-height:1.65;flex:1}
.home-platform-price{display:flex;align-items:end;gap:7px;margin:18px 0}
.home-platform-price strong{font-size:1.8rem;font-weight:900;color:#130d30}
.home-platform-price small{color:#797587;padding-bottom:5px}
.platform-status{display:inline-flex;align-items:center;padding:6px 10px;font-size:.72rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.platform-status.ready{background:#e8f8ee;color:#117a3f}
.platform-status.soon{background:#f1eef3;color:#777082}

.package-platform-section{padding-top:34px!important}
.package-entry-note,.renewal-rule-card{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border:1px solid #e9e4ec;background:#fff;border-radius:22px!important}
.package-entry-note>i,.renewal-rule-card>i{width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;border-radius:15px!important;background:#130d30;color:#fff}
.package-entry-note p,.renewal-rule-card p{margin:4px 0 0;color:#706c7e}
.platform-package-stack{display:grid;gap:28px}
.platform-package-row{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);background:#fff;border:1px solid #e8e4eb;border-radius:30px!important;overflow:hidden;box-shadow:0 22px 60px rgba(19,13,48,.06)}
.platform-package-row.reverse .platform-package-visual{order:2}
.platform-package-visual{position:relative;min-height:390px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#12162d,#ed1529);color:#fff}
.platform-package-row.coming-soon .platform-package-visual{background:linear-gradient(145deg,#252538,#777180)}
.platform-orbit{position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%!important}
.platform-orbit.one{width:310px;height:310px}.platform-orbit.two{width:430px;height:430px}
.platform-device{position:relative;z-index:2;text-align:center;display:grid;gap:10px;justify-items:center}
.platform-device i{font-size:4.2rem}.platform-device strong{font-size:1.55rem}.platform-device small{color:rgba(255,255,255,.72)}
.platform-package-copy{padding:clamp(30px,5vw,58px);align-self:center}
.platform-package-copy h2{font-size:clamp(2rem,3.2vw,3rem);font-weight:900;margin:15px 0 10px}
.platform-package-copy .lead{color:#6f6c7d;line-height:1.75}
.platform-price{display:flex;align-items:end;gap:9px;margin:25px 0 20px}
.platform-price strong{font-size:2rem;font-weight:900}.platform-price span{padding-bottom:5px;color:#777282}
.platform-benefit-list{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
.platform-benefit-list li{display:flex;gap:10px;color:#413d4c}.platform-benefit-list i{width:18px;color:#ed1529;margin-top:4px}
.renewal-rule-card{margin-top:28px;background:#f8f6f8}

.demo-showcase-block{margin-top:54px}
.demo-card-slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,calc((100% - 32px)/3));gap:16px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scroll-behavior:smooth}
.demo-showcase-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:16px;min-height:100%;padding:24px;background:#fff;border:1px solid #e8e3eb;border-radius:24px!important;box-shadow:0 15px 45px rgba(19,13,48,.06)}
.demo-showcase-logo{height:80px;display:flex;align-items:center;justify-content:flex-start}
.demo-showcase-logo img{max-width:150px;max-height:66px;object-fit:contain;border-radius:12px!important}
.demo-showcase-logo>span{width:62px;height:62px;display:grid;place-items:center;border-radius:18px!important;background:#130d30;color:#fff;font-size:1.6rem;font-weight:900}
.demo-showcase-card h3{font-weight:900;margin:10px 0 6px}.demo-showcase-card p{color:#767180;line-height:1.6}.demo-showcase-card .btn{margin-top:auto}
.demo-live-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:900;color:#17763f;text-transform:uppercase}.demo-live-pill i{width:7px;height:7px;border-radius:50%!important;background:#20a95a}

.dashboard-topbar-right{display:flex;align-items:center;gap:14px}
.panel-quick-actions{align-items:center;gap:10px}
.panel-quick-action{display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 12px;border:1px solid #e8e4ec;border-radius:14px;color:#232032;text-decoration:none;background:#fff;transition:.2s ease}
.panel-quick-action:hover{border-color:#cfc8d4;box-shadow:0 8px 24px rgba(27,21,49,.08);color:#232032}
.panel-quick-action>i{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#f1eef4;color:#5b5264}
.panel-quick-action.qr>i{background:#171329;color:#fff}
.panel-quick-action span{display:flex;flex-direction:column;line-height:1.15}.panel-quick-action strong{font-size:.83rem}.panel-quick-action small{font-size:.66rem;color:#8a8492;margin-top:3px;white-space:nowrap}

.real-preview-card{overflow:hidden}
.real-phone-preview{position:relative;width:min(100%,360px);aspect-ratio:9/18.8;margin:18px auto 0;padding:11px;background:#12121b;border:1px solid #242431;border-radius:36px!important;box-shadow:0 28px 60px rgba(18,18,27,.2);overflow:hidden}
.real-phone-preview iframe{width:100%;height:100%;border:0;background:#fff;border-radius:27px!important;overflow:hidden}
.real-phone-speaker{position:absolute;z-index:3;top:18px;left:50%;transform:translateX(-50%);width:72px;height:17px;border-radius:999px!important;background:#111;pointer-events:none}
.logo-crop-stage{padding:12px;background:#181823;border-radius:18px!important;overflow:auto}
.logo-crop-stage canvas{display:block;width:100%;height:auto;max-height:420px;touch-action:none;cursor:grab;border-radius:10px!important}
.logo-crop-stage canvas:active{cursor:grabbing}
.company-logo-selected{display:flex;align-items:center;gap:12px;margin-top:12px}.company-logo-selected img{width:120px;height:46px;object-fit:contain;border:1px solid #e6e1e9;border-radius:10px!important;background:#fff;padding:5px}

.reverse-transaction-button{display:inline-flex!important;align-items:center;gap:6px;white-space:nowrap;border-radius:10px!important;transform:none!important}
.transaction-reverse-popup{border-radius:22px!important;padding:8px!important}
.transaction-reverse-popup .swal2-textarea{width:calc(100% - 2rem)!important;box-sizing:border-box!important;margin:1rem!important;transform:none!important;border-radius:12px!important}
.transaction-reverse-popup .swal2-actions{gap:10px!important}.transaction-reverse-popup .swal-action-button{min-width:110px;border-radius:10px!important}

.home-login-card{margin-top:6px}
.home-login-heading{display:flex;align-items:flex-start;gap:15px;margin-bottom:22px}
.home-login-heading>span{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;border-radius:15px;background:var(--tenant-primary);color:#fff}
.home-login-heading small{font-size:.7rem;font-weight:900;letter-spacing:.08em;color:var(--tenant-primary)}
.home-login-heading h1{font-size:1.65rem;font-weight:900;margin:4px 0 6px}.home-login-heading p{margin:0;color:#777383;line-height:1.55}

.auth-panel .brand img{filter:brightness(0) invert(1);max-height:64px;max-width:240px;object-fit:contain}

@media(max-width:1199.98px){
  .home-platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-card-slider{grid-auto-columns:minmax(300px,calc((100% - 16px)/2))}
  .panel-quick-action small{display:none}
}
@media(max-width:991.98px){
  .site-body .hero-carousel-full,.site-body .hero-carousel-full .carousel-inner,.site-body .hero-carousel-full .carousel-item,.site-body .hero-slider-panel,.site-body .hero-slider-layout{min-height:auto}
  .external-feature-grid{grid-template-columns:1fr 1fr}
  .platform-package-row{grid-template-columns:1fr}.platform-package-row.reverse .platform-package-visual{order:0}.platform-package-visual{min-height:300px}
  .real-phone-preview{max-width:330px}
}
@media(max-width:767.98px){
  .site-top-strip .container{min-height:38px;gap:10px}.site-top-slogan{font-size:.72rem}.site-top-contact{gap:10px}.site-top-contact a{font-size:0;gap:0}.site-top-contact a i{font-size:.82rem}
  .site-floating-social{right:8px;padding:5px;gap:5px;border-radius:14px!important}.site-floating-social a{width:32px;height:32px;border-radius:9px!important;font-size:.8rem}
  .site-body .page-hero{padding:30px 0 28px!important}.site-body .page-hero h1{font-size:clamp(2rem,10vw,3rem)}
  .external-feature-grid,.home-platform-grid{grid-template-columns:1fr}
  .platform-package-row{border-radius:22px!important}.platform-package-visual{min-height:240px}.platform-device i{font-size:3.2rem}.platform-package-copy{padding:26px 22px}.platform-price{align-items:flex-start;flex-direction:column}
  .package-entry-note,.renewal-rule-card{padding:18px;gap:12px}
  .demo-card-slider{grid-auto-columns:86%;gap:12px}.demo-showcase-block{margin-top:38px}.demo-showcase-card{padding:20px;border-radius:20px!important}
  .real-phone-preview{width:min(100%,310px);border-radius:30px!important}.real-phone-preview iframe{border-radius:22px!important}
  .reverse-transaction-button span{display:none}
  .home-login-heading h1{font-size:1.35rem}.home-login-heading{gap:11px}.home-login-heading>span{width:42px;height:42px}
}

/* ===== Kümülatif patch v1.1 — slider, demo görünürlüğü ve önizleme düzeltmeleri ===== */
.site-body .hero-slider-shell{
  padding:20px clamp(16px,3vw,48px) 0!important;
  background:#fff;
}
.site-body .hero-carousel-full,
.site-body .hero-carousel-full .carousel-inner,
.site-body .hero-carousel-full .carousel-item,
.site-body .hero-slider-panel,
.site-body .hero-slider-layout{
  height:600px;
  min-height:600px;
}
.site-body .hero-carousel-full{
  overflow:hidden;
  border-radius:30px!important;
}
.site-body .hero-slider-layout{padding-top:34px;padding-bottom:48px}
.site-body .hero-slider-image-frame{height:500px;min-height:0}
.site-body .home-package-demos{margin-top:34px}
.site-body .home-package-demos .demo-showcase-block{margin-top:0}
.site-body .how-steps-section{padding-top:0!important}
.site-body .how-steps-section .journey-list article:first-child{padding-top:0}

@media(max-width:991.98px){
  .site-body .hero-slider-shell{padding:14px 14px 0!important}
  .site-body .hero-carousel-full,
  .site-body .hero-carousel-full .carousel-inner,
  .site-body .hero-carousel-full .carousel-item,
  .site-body .hero-slider-panel,
  .site-body .hero-slider-layout{height:auto;min-height:600px}
  .site-body .hero-slider-layout{padding:34px 0 42px}
  .site-body .hero-slider-image-frame{height:280px;min-height:0}
}
@media(max-width:575.98px){
  .site-body .hero-slider-shell{padding-inline:10px!important}
  .site-body .hero-carousel-full{border-radius:22px!important}
  .site-body .hero-slider-layout{min-height:600px;gap:18px}
  .site-body .hero-slider-copy h1{font-size:clamp(2.2rem,11vw,3.35rem)}
  .site-body .hero-slider-copy .hero-lead{font-size:.94rem;line-height:1.6}
  .site-body .hero-slider-image-frame{height:230px}
}

/* Panel içi gerçek müşteri ekranı: iframe yok, tenant bileşenleri doğrudan render edilir. */
.customer-live-preview{margin-top:16px;font-family:Inter,system-ui,sans-serif;color:#171820;background:transparent!important}
.customer-preview-phone{position:relative;width:min(100%,370px);height:720px;margin:14px auto 0;padding:10px;background:#12121b;border:1px solid #292934;border-radius:38px!important;box-shadow:0 28px 60px rgba(18,18,27,.2);overflow:hidden}
.customer-preview-speaker{position:absolute;z-index:30;top:16px;left:50%;transform:translateX(-50%);width:72px;height:16px;border-radius:999px!important;background:#111;box-shadow:0 1px 0 rgba(255,255,255,.1)}
.customer-preview-scroll{position:absolute;inset:10px;overflow:auto;overscroll-behavior:contain;background:#f6f6f3;border-radius:29px!important;scrollbar-width:thin}
.customer-live-preview .tenant-app{width:100%;max-width:none;min-height:100%;margin:0;background:linear-gradient(180deg,#fcfcfa 0%,#f4f4f1 58%,#f7f7f4 100%);box-shadow:none;overflow:visible}
.customer-live-preview .tenant-header-fixed{position:sticky!important;top:0;left:auto;transform:none;width:100%;height:72px;padding:14px 14px!important;z-index:20;border-radius:0!important}
.customer-live-preview .tenant-header .tenant-brand.logo-only .tenant-logo-image{max-width:155px;max-height:40px}
.customer-live-preview .tenant-brand{pointer-events:none}
.customer-live-preview .tenant-content,.customer-live-preview .tenant-home-content{padding:18px 14px 28px!important;min-height:auto!important}
.customer-live-preview .birthday-feature{margin-top:0}
.customer-live-preview .reward-pass-v4{padding:19px 18px 16px;border-radius:24px!important}
.customer-live-preview .reward-pass-v4 .reward-pass-copy{padding:22px 0 16px}
.customer-live-preview .reward-pass-v4 .reward-pass-copy h2{font-size:21px}
.customer-live-preview .reward-pass-footer{gap:10px}
.customer-live-preview .customer-preview-action{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:10px 11px;border-radius:13px!important;background:rgba(255,255,255,.14);color:#fff;font-size:10px;font-weight:800}
.customer-live-preview .loyalty-journey-card-v4{padding:18px;border-radius:22px!important}
.customer-live-preview .journey-head-v4{gap:10px}
.customer-live-preview .journey-head-v4 h2{font-size:17px}
.customer-live-preview .journey-head-v4 p{font-size:11px}
.customer-live-preview .journey-ring-v4{width:58px;height:58px}
.customer-live-preview .journey-ring-v4>div{width:46px;height:46px}
.customer-live-preview .journey-step-row{gap:7px}
.customer-live-preview .journey-step-pill{min-width:42px}
.customer-live-preview .external-order-surface{padding:18px;border-radius:22px!important}
.customer-live-preview .external-brand-row{gap:8px}
.customer-live-preview .external-brand{min-width:0;padding:9px 8px}
.customer-live-preview .external-form-row{grid-template-columns:1fr auto;gap:8px}
.customer-live-preview .external-form-row .form-control{font-size:11px}
.customer-live-preview .external-form-row button{padding-inline:12px}
.customer-live-preview .app-section-head{margin-top:28px}
.customer-live-preview .home-campaign-card{border-radius:20px!important}
.customer-live-preview .home-campaign-copy h3{font-size:14px}
.customer-live-preview .home-campaign-copy p{font-size:11px}
.customer-live-preview a,.customer-live-preview button,.customer-live-preview input,.customer-live-preview select,.customer-live-preview textarea,.customer-live-preview .customer-preview-action,.customer-live-preview .customer-preview-chevron{pointer-events:none!important;cursor:default!important}
.customer-live-preview .tenant-bottom-fixed{position:sticky!important;left:auto;bottom:0;transform:none;width:100%;z-index:20;padding-bottom:8px!important}
.customer-live-preview .customer-preview-tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;height:76px;padding:7px 9px;background:rgba(250,249,246,.98);border-top:1px solid #e4e0d8;box-shadow:0 -10px 28px rgba(22,22,28,.08)}
.customer-live-preview .customer-preview-tabbar>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8c8e96;font-size:8px;font-weight:700;min-width:0}
.customer-live-preview .customer-preview-tabbar>span>i{font-size:18px}
.customer-live-preview .customer-preview-tabbar>span.active{color:var(--tenant-primary)}
.customer-live-preview .customer-preview-tabbar .qr-main{margin-top:-26px;color:#4d4666}
.customer-live-preview .customer-preview-tabbar .qr-main>span{width:58px;height:58px;display:grid;place-items:center;border-radius:50%!important;border:6px solid #f6f4ef;background:radial-gradient(circle at 30% 30%,#2d3042,#17181f 70%);box-shadow:0 12px 26px rgba(32,33,40,.22)}
.customer-live-preview .customer-preview-tabbar .qr-main>span i{font-size:22px;color:#fff}
.customer-live-preview .customer-preview-tabbar b{font:inherit}.customer-live-preview .customer-preview-tabbar em{display:none}

@media(max-width:767.98px){.customer-preview-phone{height:680px;width:min(100%,340px);border-radius:34px!important}.customer-preview-scroll{border-radius:25px!important}}
.site-body .integration-logo-track{animation:marquee 28s linear infinite!important}
.site-body .integration-logo-viewport:hover .integration-logo-track{animation-play-state:paused!important}


/* ===== Kümülatif patch v1.2 — image-only slider, gerçek loop ve kurumsal tipografi ===== */

/* Ticimax kurumsal Manrope yaklaşımına yakın, IdeaSoft ölçeğinde daha kontrollü public tipografi. */
.site-body,
.site-body button,
.site-body input,
.site-body select,
.site-body textarea,
.auth-body,
.auth-body button,
.auth-body input,
.auth-body select,
.auth-body textarea{
  font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-optical-sizing:auto;
}
.site-body{
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body h5,
.site-body h6{
  font-family:'Manrope',system-ui,sans-serif!important;
  color:var(--ink);
  letter-spacing:-.028em!important;
  line-height:1.15;
}
.site-body h1{font-weight:800!important}
.site-body h2{font-weight:750!important}
.site-body h3,.site-body h4{font-weight:700!important}
.site-body p{font-weight:400}
.site-body .lead{font-weight:400}
.site-body .section-heading h2{
  font-size:clamp(2rem,3vw,2.75rem)!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
  font-weight:750!important;
}
.site-body .section-heading p{
  max-width:720px;
  font-size:1rem!important;
  line-height:1.72!important;
}
.site-body .page-hero h1{
  max-width:920px;
  font-size:clamp(2.35rem,4.2vw,3.65rem)!important;
  line-height:1.08!important;
  letter-spacing:-.042em!important;
  font-weight:800!important;
}
.site-body .page-hero p{
  max-width:760px;
  font-size:1.02rem!important;
  line-height:1.72!important;
}
.site-body .eyebrow{
  font-size:.72rem!important;
  font-weight:800!important;
  letter-spacing:.115em!important;
}
.site-header .navbar{
  min-height:72px;
}
.site-header .nav-link{
  font-family:'Manrope',system-ui,sans-serif!important;
  font-size:.875rem!important;
  font-weight:650!important;
  letter-spacing:-.008em!important;
  padding:.72rem .72rem!important;
}
.site-header .nav-link i{
  font-size:.8rem;
}
.site-body .btn,
.auth-body .btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Manrope',system-ui,sans-serif!important;
  font-size:.875rem!important;
  font-weight:700!important;
  letter-spacing:-.006em!important;
  line-height:1.1;
  padding:.76rem 1.15rem!important;
  border-radius:11px!important;
}
.site-body .btn-lg,
.auth-body .btn-lg{
  min-height:50px;
  font-size:.94rem!important;
  padding:.9rem 1.35rem!important;
}
.site-top-strip{
  font-family:'Manrope',system-ui,sans-serif!important;
  font-size:.74rem!important;
}
.site-top-slogan{font-weight:700!important}
.site-body .home-platform-card h3,
.site-body .demo-showcase-card h3,
.site-body .external-feature-card h3,
.site-body .detail-feature-grid h3{
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
.site-body .home-platform-price strong,
.site-body .platform-price strong{
  font-weight:800!important;
}

/* Ana slider: yalnızca 600px görsel, metin/buton/oval alan yok. */
.site-body .hero-slider-shell{
  padding:20px clamp(16px,3.5vw,56px) 0!important;
  background:#fff;
}
.site-body .hero-carousel-full,
.site-body .hero-carousel-full .carousel-inner,
.site-body .hero-carousel-full .carousel-item{
  width:100%;
  height:600px!important;
  min-height:600px!important;
}
.site-body .hero-carousel-full{
  overflow:hidden;
  border-radius:28px!important;
  background:#f4f4f6;
}
.site-body .hero-image-only-link{
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  text-decoration:none;
  background:#f4f4f6;
}
.site-body .hero-image-only{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:0!important;
  transition:transform .45s ease;
}
.site-body a.hero-image-only-link:hover .hero-image-only{
  transform:scale(1.008);
}
/* Eski hero öğeleri payload geçmişinden kalsa bile görünmesin. */
.site-body .hero-slider-copy,
.site-body .hero-slider-visual,
.site-body .hero-carousel-indicators,
.site-body .hero-carousel-control{
  display:none!important;
}

/* Dış sipariş logoları: iki eş grup arasında sıfır atlamalı gerçek sonsuz marquee. */
.site-body .integration-logo-viewport{
  width:100%;
  overflow:hidden!important;
  padding:14px 0;
}
.site-body .integration-logo-track.integration-marquee-track{
  display:flex;
  width:max-content;
  gap:0!important;
  animation:siparsisIntegrationLoop 30s linear infinite!important;
  transform:none;
  transition:none!important;
  will-change:transform;
}
.site-body .integration-logo-group{
  display:flex;
  align-items:center;
  flex:none;
  gap:34px;
  padding-right:34px;
}
.site-body .integration-logo-viewport:hover .integration-marquee-track{
  animation-play-state:paused!important;
}
@keyframes siparsisIntegrationLoop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Canlı demolar: scrollbar yok, iki eş grup ile kesintisiz loop. */
.site-body .demo-card-slider{
  width:100%;
  overflow:hidden!important;
  padding:8px 0 20px!important;
  scrollbar-width:none!important;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  mask-image:linear-gradient(to right,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
}
.site-body .demo-card-slider::-webkit-scrollbar{display:none!important}
.site-body .demo-card-track{
  display:flex;
  width:max-content;
  gap:0;
  animation:siparsisDemoLoop 42s linear infinite;
  will-change:transform;
}
.site-body .demo-card-group{
  display:flex;
  flex:none;
  gap:18px;
  padding-right:18px;
}
.site-body .demo-showcase-card{
  width:clamp(310px,29vw,390px);
  min-height:330px;
  flex:0 0 auto;
  scroll-snap-align:none!important;
}
.site-body .demo-card-slider:hover .demo-card-track{
  animation-play-state:paused;
}
@keyframes siparsisDemoLoop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Nasıl çalışır: üst bölümle aynı zemin, arada beyaz kırık yok; kartlar modern ve dengeli. */
.site-body .how-page-hero{
  background:#f7f7f9!important;
  padding-bottom:34px!important;
}
.site-body .how-steps-section{
  margin:0!important;
  padding:0 0 78px!important;
  background:#f7f7f9!important;
}
.site-body .journey-list-modern{
  max-width:1040px;
  margin:0 auto!important;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.site-body .journey-list-modern .journey-card{
  position:relative;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) 44px!important;
  gap:18px!important;
  align-items:start;
  min-height:190px;
  margin:0!important;
  padding:26px!important;
  border:1px solid #e7e7ec!important;
  border-radius:22px!important;
  background:#fff;
  box-shadow:0 12px 36px rgba(19,13,48,.055);
  overflow:hidden;
}
.site-body .journey-list-modern .journey-card:before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--primary),#130d30);
}
.site-body .journey-number{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px!important;
  background:#f3eef1;
  color:var(--primary)!important;
  font-size:.88rem!important;
  font-weight:800!important;
  letter-spacing:.04em;
}
.site-body .journey-copy small{
  display:block;
  color:var(--primary)!important;
  font-size:.69rem!important;
  font-weight:800!important;
  letter-spacing:.1em!important;
  margin:2px 0 7px;
}
.site-body .journey-copy h3{
  margin:0 0 9px!important;
  font-size:1.23rem!important;
  line-height:1.28!important;
  font-weight:750!important;
}
.site-body .journey-copy p{
  margin:0;
  color:#706d79;
  font-size:.93rem;
  line-height:1.65;
}
.site-body .journey-icon-wrap{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px!important;
  background:#130d30;
  color:#fff;
  font-size:.95rem;
}
.site-body .how-features-section{
  border-top:1px solid #ececf0;
}
.site-body .detail-feature-grid article{
  border-radius:20px!important;
  border-color:#e7e7ec!important;
  box-shadow:0 10px 30px rgba(19,13,48,.04);
}
.site-body .process-grid>div{
  border-radius:20px!important;
}

/* Auth ekranlarında da aynı public tipografi ritmi. */
.auth-body{
  font-family:'Manrope',system-ui,sans-serif!important;
  font-size:15px;
}
.auth-body h1,.auth-body h2,.auth-body h3{
  font-family:'Manrope',system-ui,sans-serif!important;
  font-weight:750!important;
  letter-spacing:-.03em!important;
}
.auth-body .form-label{font-size:.84rem;font-weight:650}
.auth-body .form-control{font-family:'Manrope',system-ui,sans-serif!important}

@media(max-width:991.98px){
  .site-body .hero-slider-shell{padding:14px 14px 0!important}
  .site-body .hero-carousel-full,
  .site-body .hero-carousel-full .carousel-inner,
  .site-body .hero-carousel-full .carousel-item{
    height:clamp(360px,62vw,520px)!important;
    min-height:0!important;
  }
  .site-body .journey-list-modern{grid-template-columns:1fr}
  .site-body .demo-showcase-card{width:min(380px,76vw)}
}
@media(max-width:767.98px){
  .site-header .nav-link{font-size:.9rem!important;padding:.7rem .55rem!important}
  .site-body .section-heading h2{font-size:clamp(1.8rem,8vw,2.25rem)!important}
  .site-body .page-hero h1{font-size:clamp(2rem,9.5vw,2.75rem)!important}
  .site-body .integration-logo-group{gap:20px;padding-right:20px}
  .site-body .demo-card-group{gap:13px;padding-right:13px}
  .site-body .demo-showcase-card{width:82vw;min-height:310px}
  .site-body .journey-list-modern .journey-card{
    grid-template-columns:52px minmax(0,1fr) 38px!important;
    gap:13px!important;
    min-height:0;
    padding:20px!important;
  }
  .site-body .journey-number{width:46px;height:46px;border-radius:14px!important}
  .site-body .journey-icon-wrap{width:36px;height:36px;border-radius:11px!important}
}
@media(max-width:575.98px){
  .site-body .hero-slider-shell{padding-inline:10px!important}
  .site-body .hero-carousel-full{border-radius:20px!important}
  .site-body .hero-carousel-full,
  .site-body .hero-carousel-full .carousel-inner,
  .site-body .hero-carousel-full .carousel-item{
    height:clamp(300px,72vw,410px)!important;
  }
  .site-body .journey-list-modern .journey-card{
    grid-template-columns:44px minmax(0,1fr)!important;
  }
  .site-body .journey-icon-wrap{display:none!important}
  .site-body .journey-number{width:40px;height:40px;font-size:.75rem!important}
}
@media(prefers-reduced-motion:reduce){
  .site-body .integration-marquee-track,
  .site-body .demo-card-track{animation-play-state:paused!important}
  .site-body .hero-image-only{transition:none}
}

/* v1.3 · Bilgi talep alanı */
.site-body .home-info-request-section{position:relative;overflow:hidden;background:#fff}
.site-body .home-info-request-section:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(111,76,255,.10),transparent 68%);left:-260px;top:8%;pointer-events:none}
.site-body .home-info-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:48px;align-items:stretch;padding:12px 0}
.site-body .home-info-benefits{padding:28px 0}
.site-body .home-info-benefits .section-heading{max-width:720px;margin-bottom:28px}
.site-body .info-benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.site-body .info-benefit-grid article{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid #ececf1;border-radius:20px;background:rgba(255,255,255,.86);box-shadow:0 8px 28px rgba(19,13,48,.035);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.site-body .info-benefit-grid article:hover{transform:translateY(-4px);border-color:rgba(111,76,255,.28);box-shadow:0 18px 38px rgba(19,13,48,.08)}
.site-body .info-benefit-grid article>span{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:14px;background:#f3efff;color:var(--primary);font-size:1rem}
.site-body .info-benefit-grid strong{display:block;font-size:.98rem;font-weight:750;letter-spacing:-.02em;color:#181525;margin-bottom:4px}
.site-body .info-benefit-grid small{display:block;font-size:.82rem;line-height:1.55;color:#777381}
.site-body .home-info-form-card{position:relative;overflow:hidden;padding:34px;border-radius:30px;background:#f5f2ff;border:1px solid #e8e0ff;box-shadow:0 24px 60px rgba(51,31,103,.12)}
.site-body .home-info-form-card h3{font-size:clamp(1.6rem,2vw,2rem);margin:8px 0 8px}
.site-body .home-info-form-card>div>p{color:#726d7e;margin-bottom:24px}
.site-body .home-info-form-card .form-control,.site-body .home-info-form-card .form-select{background:rgba(255,255,255,.86);border-color:#ddd6ef;min-height:48px}
.site-body .home-info-form-card textarea.form-control{min-height:126px}
.site-body .info-form-orb{position:absolute;border-radius:50%;filter:blur(4px);pointer-events:none;opacity:.55}
.site-body .info-form-orb-one{width:190px;height:190px;background:rgba(111,76,255,.14);right:-70px;top:-60px}
.site-body .info-form-orb-two{width:130px;height:130px;background:rgba(255,83,117,.11);left:-54px;bottom:-45px}

/* v1.3 · Awwwards esintili iş ortağı yorum sahnesi */
.site-body .partner-voices-section{--pointer-x:50%;--pointer-y:50%;position:relative;overflow:hidden;padding:104px 0 96px;background:#130d30;color:#fff;isolation:isolate}
.site-body .partner-voices-section:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 38%,rgba(111,76,255,.08));z-index:-2}
.site-body .partner-voices-glow{position:absolute;width:560px;height:560px;left:calc(var(--pointer-x) - 280px);top:calc(var(--pointer-y) - 280px);background:radial-gradient(circle,rgba(151,118,255,.23),rgba(151,118,255,.05) 38%,transparent 70%);filter:blur(10px);transition:left .18s linear,top .18s linear;pointer-events:none;z-index:-1}
.site-body .partner-voices-head{position:relative;z-index:2;margin-bottom:50px}
.site-body .partner-voices-head .eyebrow{color:#bcaaff}
.site-body .partner-voices-title-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:46px;align-items:end}
.site-body .partner-voices-title-row h2{font-size:clamp(2.2rem,4.2vw,4.6rem);line-height:.98;letter-spacing:-.055em;font-weight:720;max-width:880px;margin:12px 0 0;color:#fff}
.site-body .partner-voices-title-row p{color:rgba(255,255,255,.62);font-size:1rem;line-height:1.72;margin:0 0 5px}
.site-body .testimonial-motion-stage{display:grid;gap:18px;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.site-body .testimonial-motion-row{display:flex;width:max-content;animation:siparsisTestimonialLane 58s linear infinite;will-change:transform}
.site-body .testimonial-motion-row.reverse{animation-direction:reverse;animation-duration:66s;margin-left:-210px}
.site-body .testimonial-motion-group{display:flex;gap:18px;padding-right:18px;flex:none}
.site-body .partner-voice-card{--tilt-x:0deg;--tilt-y:0deg;width:clamp(320px,31vw,470px);min-height:280px;display:flex;flex-direction:column;justify-content:space-between;padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045));backdrop-filter:blur(14px);box-shadow:0 24px 55px rgba(0,0,0,.16);opacity:.45;transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(.985);transition:transform .18s ease,opacity .55s ease,border-color .25s ease,background .25s ease}
.site-body .partner-voice-card.is-visible{opacity:1}
.site-body .partner-voice-card:hover{border-color:rgba(193,172,255,.5);background:linear-gradient(145deg,rgba(255,255,255,.145),rgba(111,76,255,.11))}
.site-body .testimonial-motion-stage:hover .testimonial-motion-row{animation-play-state:paused}
.site-body .partner-voice-top{display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.48)}
.site-body .partner-voice-top i{font-size:1.35rem;color:#a98eff}
.site-body .partner-voice-index{font-size:.72rem;letter-spacing:.18em;font-weight:800}
.site-body .partner-voice-card blockquote{margin:24px 0 30px;font-size:clamp(1.08rem,1.6vw,1.34rem);line-height:1.55;letter-spacing:-.025em;font-weight:560;color:#fff}
.site-body .partner-voice-card footer{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.site-body .partner-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#130d30;font-weight:800}
.site-body .partner-voice-card footer strong{display:block;font-size:.9rem;color:#fff}
.site-body .partner-voice-card footer small{display:block;margin-top:2px;color:rgba(255,255,255,.52);font-size:.76rem}
.site-body .partner-voices-caption{display:flex;align-items:center;justify-content:center;gap:16px;max-width:760px;margin:38px auto 0;padding:0 20px;color:rgba(255,255,255,.43);text-align:center}
.site-body .partner-voices-caption span{height:1px;flex:1;background:rgba(255,255,255,.12)}
.site-body .partner-voices-caption small{font-size:.72rem;letter-spacing:.03em}
@keyframes siparsisTestimonialLane{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* v1.3 · Ana sayfada demo/external feature yer değişimi */
.site-body .integration-demo-showcase .demo-showcase-block{padding-top:6px}
.site-body .integration-demo-showcase .section-heading{margin-bottom:24px}
.site-body .home-external-feature-grid{margin-top:46px!important}

/* v1.3 · Admin sürükle-sırala ve özel paketler */
.testimonial-admin-list{display:grid;gap:14px}
.testimonial-admin-item{display:flex;gap:14px;align-items:stretch;padding:16px;border:1px solid #e9e7ef;border-radius:20px;background:#fff;transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease}
.testimonial-admin-item.is-dragging{opacity:.5;transform:scale(.99);box-shadow:0 18px 45px rgba(31,20,63,.12)}
.testimonial-drag-handle{width:48px;flex:0 0 48px;border:0;border-radius:14px;background:#f4f1fa;color:#4f4762;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:grab}
.testimonial-drag-handle:active{cursor:grabbing}
.testimonial-drag-handle span{font-size:.68rem;font-weight:800;letter-spacing:.08em}
.manual-plan-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.manual-plan-card-head h3{margin:10px 0 0}
.manual-duration{padding:9px 12px;border-radius:12px;background:#f3efff;color:#5c3ec8;font-weight:800;font-size:.8rem;white-space:nowrap}
.demo-setting-switch{display:flex;gap:10px;align-items:flex-start;margin-bottom:0;padding-top:6px}
.demo-setting-switch .form-check-input{margin-top:4px}
.demo-setting-switch span{display:flex;flex-direction:column}
.demo-setting-switch small{color:#7d7885;margin-top:2px}

/* v1.3 · Aboneliksiz panel keşif modu */
.panel-readonly-banner{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:20px;border:1px solid #e6defa;border-radius:17px;background:#f6f2ff;color:#332651}
.panel-readonly-banner>i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#6f4cff;box-shadow:0 5px 16px rgba(67,43,133,.08)}
.panel-readonly-banner>div{display:flex;flex-direction:column;flex:1}
.panel-readonly-banner strong{font-size:.9rem}
.panel-readonly-banner span{font-size:.77rem;color:#756c87;margin-top:2px}

/* v1.3 · Kayıt demosu mesajı */
.auth-demo-note{display:flex;align-items:center;gap:12px;margin:16px 0 20px;padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09)}
.auth-form-card .auth-demo-note{border-color:#e6defc;background:#f6f2ff;color:#2e2446}
.auth-demo-note>span{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#6f4cff}
.auth-demo-note div{display:flex;flex-direction:column}
.auth-demo-note strong{font-size:.84rem}
.auth-demo-note small{font-size:.72rem;line-height:1.45;opacity:.72;margin-top:2px}
.auth-demo-note.compact{margin-top:12px}

@media(max-width:991.98px){
  .site-body .home-info-shell{grid-template-columns:1fr;gap:24px}
  .site-body .home-info-benefits{padding-bottom:0}
  .site-body .partner-voices-section{padding:78px 0}
  .site-body .partner-voices-title-row{grid-template-columns:1fr;gap:18px}
  .site-body .partner-voices-title-row p{max-width:620px}
}
@media(max-width:767.98px){
  .site-body .info-benefit-grid{grid-template-columns:1fr}
  .site-body .home-info-form-card{padding:24px;border-radius:24px}
  .site-body .partner-voices-section{padding:64px 0}
  .site-body .partner-voices-head{margin-bottom:34px}
  .site-body .testimonial-motion-stage{mask-image:none;-webkit-mask-image:none}
  .site-body .partner-voice-card{width:82vw;min-height:250px;padding:22px;border-radius:23px}
  .site-body .testimonial-motion-row.reverse{margin-left:-90px}
  .testimonial-admin-item{flex-direction:column}
  .testimonial-drag-handle{width:100%;height:38px;flex-direction:row}
  .panel-readonly-banner{align-items:flex-start;flex-wrap:wrap}
  .panel-readonly-banner .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .site-body .testimonial-motion-row{animation-play-state:paused!important}
  .site-body .partner-voice-card{transform:none!important;transition:none!important;opacity:1!important}
  .site-body .partner-voices-glow{display:none}
}
.site-body .home-demo-cta-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;color:#716c7a;font-size:.78rem}
.site-body .home-demo-cta-note i{color:var(--primary)}

/* v1.4 · Entegrasyon + demo görsel kartları */
.site-body .integration-showcase .integration-showcase-head .eyebrow{font-size:.78rem;letter-spacing:.12em}
.site-body .integration-demo-showcase{margin-top:42px!important}
.site-body .integration-demo-showcase .demo-showcase-block{margin-top:0}
.site-body .demo-image-card{
  position:relative;isolation:isolate;overflow:hidden;padding:0!important;min-height:360px!important;
  background-image:var(--demo-bg);background-size:cover;background-position:center;
  border:0!important;box-shadow:0 26px 64px rgba(16,12,36,.24)!important;color:#fff;
}
.site-body .demo-image-card:before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--demo-bg);background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform:scale(1.015)}
.site-body .demo-image-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,8,18,.13) 0%,rgba(9,8,18,.48) 46%,rgba(9,8,18,.92) 100%),linear-gradient(135deg,color-mix(in srgb,var(--demo-accent) 34%,transparent),transparent 55%)}
.site-body .demo-image-card:hover:before{transform:scale(1.075)}
.site-body .demo-card-content{min-height:360px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:28px;position:relative}
.site-body .demo-image-card h3{color:#fff!important;font-size:1.45rem!important;margin:12px 0 8px!important;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.site-body .demo-image-card p{color:rgba(255,255,255,.82)!important;margin:0 0 20px!important;line-height:1.62;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.site-body .demo-image-card .demo-live-pill{color:#fff!important;background:rgba(14,12,24,.38);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);padding:7px 10px;border-radius:999px!important}
.site-body .demo-image-card .demo-live-pill i{background:#52e386;box-shadow:0 0 0 5px rgba(82,227,134,.14)}
.site-body .demo-image-card .btn{margin-top:auto;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.92);color:#171326;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.demo-card-static-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.demo-card-static-grid .demo-showcase-card{width:auto!important;min-height:330px!important}
.demo-card-static-grid .demo-card-content{min-height:330px}
@media(max-width:991.98px){.demo-card-static-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.demo-card-static-grid{grid-template-columns:1fr}.site-body .demo-card-content{min-height:330px;padding:22px}}

/* v1.4 · CTA kontrastı */
.site-body .cta-panel,.site-body .cta-panel h1,.site-body .cta-panel h2,.site-body .cta-panel h3,.site-body .cta-panel p,.site-body .cta-panel .eyebrow{color:#fff!important}
.site-body .cta-panel p{color:rgba(255,255,255,.82)!important}

/* v1.4 · Auth görsel arka plan / beyaz tipografi */
.auth-panel{position:relative;isolation:isolate;background:#151223 url('/assets/img/home/hero-slide-1.jpg') center/cover no-repeat!important;color:#fff!important;overflow:hidden}
.auth-panel:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(12,9,28,.9),rgba(31,17,62,.72) 55%,rgba(65,17,56,.62))}
.auth-panel .brand,.auth-panel .eyebrow,.auth-panel h1,.auth-panel h2,.auth-panel h3,.auth-panel p,.auth-panel li,.auth-panel span,.auth-panel strong,.auth-panel small{color:#fff!important}
.auth-panel .auth-copy p{color:rgba(255,255,255,.78)!important}
.auth-panel .auth-visual{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.auth-panel .auth-benefits i{color:#fff!important}
.auth-demo-note>span img{width:25px;height:25px;object-fit:contain;display:block}
.auth-form-card .auth-demo-note>span{background:#17132c!important}
.auth-form-card .auth-demo-note>span img{filter:none}

/* Mobile push management */
.mobile-mini-stat {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8f9fc;
}
.mobile-mini-stat small {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 650;
}
.mobile-mini-stat strong {
  font-size: 1.45rem;
  line-height: 1;
}

/* ===== v1.6.5 — ana slider navigasyonu + site içerikleri alt sayfaları ===== */
.site-body .hero-carousel-full{position:relative}
.site-body .hero-carousel-dots{
  position:absolute!important;
  right:auto!important;
  bottom:18px!important;
  left:50%!important;
  z-index:7!important;
  display:flex!important;
  width:auto!important;
  margin:0!important;
  padding:7px 9px!important;
  gap:7px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(13,16,24,.34);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.site-body .hero-carousel-dots [data-bs-target]{
  box-sizing:border-box!important;
  width:8px!important;
  height:8px!important;
  flex:0 0 8px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#fff!important;
  opacity:.48!important;
  transition:width .25s ease,opacity .25s ease,transform .25s ease!important;
}
.site-body .hero-carousel-dots [data-bs-target].active{
  width:25px!important;
  flex-basis:25px!important;
  border-radius:999px!important;
  opacity:1!important;
}
.site-body .hero-carousel-arrow{
  top:50%!important;
  bottom:auto!important;
  z-index:7!important;
  width:54px!important;
  height:54px!important;
  margin-top:-27px;
  opacity:.9!important;
  transform:translateX(0);
  transition:opacity .25s ease,transform .25s ease!important;
}
.site-body .hero-carousel-arrow-prev{left:18px!important}
.site-body .hero-carousel-arrow-next{right:18px!important}
.site-body .hero-carousel-full:hover .hero-carousel-arrow,
.site-body .hero-carousel-arrow:focus-visible{opacity:1!important}
.site-body .hero-carousel-arrow-icon{
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  color:#fff;
  background:rgba(13,16,24,.42);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .2s ease,transform .2s ease;
}
.site-body .hero-carousel-arrow:hover .hero-carousel-arrow-icon{background:rgba(13,16,24,.68);transform:scale(1.04)}

.site-content-subnav{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  margin-bottom:22px;
  padding:7px;
  border:1px solid #e9e9ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 40px rgba(25,24,38,.05);
  scrollbar-width:none;
}
.site-content-subnav::-webkit-scrollbar{display:none}
.site-content-subnav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  gap:8px;
  min-height:42px;
  padding:9px 14px;
  border-radius:12px;
  color:#6d6a7a;
  font-size:.83rem;
  font-weight:800;
  text-decoration:none;
  transition:.2s ease;
}
.site-content-subnav a:hover{color:#17151e;background:#f6f4fb}
.site-content-subnav a.active{color:#fff;background:#17151e;box-shadow:0 8px 22px rgba(23,21,30,.16)}
.site-content-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.site-content-dashboard-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:168px;
  padding:24px;
  border:1px solid #ebeaf0;
  border-radius:24px;
  color:#181620;
  text-decoration:none;
  background:linear-gradient(145deg,#fff 0%,#fbfaff 100%);
  box-shadow:0 15px 48px rgba(28,24,44,.055);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.site-content-dashboard-card:hover{color:#181620;transform:translateY(-3px);border-color:#d8c7ff;box-shadow:0 22px 54px rgba(83,43,158,.10)}
.site-content-dashboard-icon{display:grid;width:58px;height:58px;place-items:center;border-radius:18px;color:#7541de;background:#f1eaff;font-size:1.2rem}
.site-content-dashboard-card h3{margin:.2rem 0 .45rem;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.site-content-dashboard-card p{margin:0;color:#777381;font-size:.88rem;line-height:1.6}
.site-content-dashboard-card>.fa-arrow-right{color:#a6a1af}
.content-image-preview,.content-image-mini{overflow:hidden;border:1px solid #e9e7ee;border-radius:16px;background:#f6f5f8}
.content-image-preview{height:220px}.content-image-mini{width:128px;height:76px}
.content-image-preview img,.content-image-mini img{width:100%;height:100%;object-fit:cover}
.loyalty-home-admin-card{border-color:#e4dafa!important;background:linear-gradient(145deg,#fff,#fbf8ff)!important}
.admin-feature-icon{width:42px!important;height:42px!important;font-size:.95rem!important}

@media (max-width:991.98px){
  .site-body .hero-carousel-arrow{opacity:1!important;width:44px!important;height:44px!important;margin-top:-22px}
  .site-body .hero-carousel-arrow-prev{left:10px!important}.site-body .hero-carousel-arrow-next{right:10px!important}
  .site-body .hero-carousel-arrow-icon{width:40px;height:40px;font-size:.82rem}
  .site-content-dashboard-grid{grid-template-columns:1fr}
}
@media (max-width:575.98px){
  .site-body .hero-carousel-dots{bottom:10px!important;padding:6px 8px!important}
  .site-body .hero-carousel-arrow{width:38px!important;height:38px!important;margin-top:-19px}
  .site-body .hero-carousel-arrow-icon{width:36px;height:36px}
  .site-content-dashboard-card{grid-template-columns:auto minmax(0,1fr);padding:19px;min-height:0;border-radius:20px}
  .site-content-dashboard-card>.fa-arrow-right{display:none}
  .site-content-dashboard-icon{width:50px;height:50px;border-radius:15px}
}

/* ===== v1.6.6 — cache-busting, slider mouse drag, admin site content polish, demo visuals ===== */
.site-body .hero-carousel-full{cursor:grab;user-select:none;-webkit-user-select:none}
.site-body .hero-carousel-full.is-mouse-dragging{cursor:grabbing}
.site-body .hero-carousel-full .hero-image-only{-webkit-user-drag:none;user-select:none;pointer-events:none}
.site-body .hero-carousel-full .hero-image-only-link{cursor:inherit}

/* Demo kartında varsayılan olarak görseli solduran overlay/shadow yoktur. */
.site-body .demo-image-card{box-shadow:none!important}
.site-body .demo-image-card:after{background:none!important}
.site-body .demo-image-card.demo-has-shadow{box-shadow:0 26px 64px rgba(16,12,36,.24)!important}
.site-body .demo-image-card.demo-has-shadow:after{
  background:linear-gradient(180deg,rgba(9,8,18,.13) 0%,rgba(9,8,18,.48) 46%,rgba(9,8,18,.92) 100%),linear-gradient(135deg,color-mix(in srgb,var(--demo-accent) 34%,transparent),transparent 55%)!important;
}

/* Site içerikleri admin ekranlarını dashboard gridine daha doğal oturt. */
.dashboard-content>.site-content-subnav{width:100%;max-width:100%}
.site-content-subnav{flex-wrap:wrap;overflow:visible;padding:8px;margin-bottom:24px;border-radius:20px}
.site-content-subnav a{min-height:44px;padding:10px 15px;border:1px solid transparent}
.site-content-subnav a.active{border-color:#17151e}
.site-content-dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.site-content-dashboard-card{min-height:184px;padding:25px;border-radius:26px}
.site-content-dashboard-card>div{min-width:0}
.site-content-dashboard-card .eyebrow{display:block;margin-bottom:3px}
.site-content-editor-card{padding:28px!important;border-radius:26px!important}
.site-content-editor-heading{margin-bottom:22px!important;padding-bottom:18px;border-bottom:1px solid #eeecf2}
.site-content-editor-heading h3{margin-bottom:6px}
.site-band-admin-card,.site-content-editor-card .surface-subcard{border:1px solid #ebe9f0;background:#fbfafc;border-radius:20px;padding:20px}
.site-content-editor-card .form-label{font-size:.79rem;font-weight:800;color:#393642;margin-bottom:7px}
.site-content-editor-card .form-text{display:block;margin-top:6px;color:#8b8794;font-size:.75rem}

.demo-visual-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.demo-visual-admin-card{overflow:hidden;border:1px solid #e8e5ed;border-radius:24px;background:#fff;box-shadow:0 14px 42px rgba(30,25,48,.055)}
.demo-visual-admin-preview{position:relative;display:flex;align-items:flex-end;min-height:220px;padding:22px;background-position:center;background-size:cover;isolation:isolate}
.demo-visual-admin-preview:after{content:"";position:absolute;inset:0;z-index:-1;background:transparent;transition:.2s ease}
.demo-visual-admin-preview.has-shadow:after{background:linear-gradient(180deg,rgba(10,9,18,.06),rgba(10,9,18,.82))}
.demo-visual-admin-preview span{display:inline-flex;padding:8px 11px;border-radius:999px;background:rgba(18,16,27,.68);backdrop-filter:blur(10px);color:#fff;font-size:.77rem;font-weight:800}
.demo-visual-admin-body{display:grid;gap:16px;padding:20px}
.demo-visual-admin-body h4{margin:2px 0 0;font-size:1.05rem;font-weight:800}
.demo-shadow-switch{display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px 15px 14px 48px!important;border:1px solid #ebe7f1;border-radius:16px;background:#faf8fd}
.demo-shadow-switch .form-check-input{margin-left:-32px;margin-top:3px}
.demo-shadow-switch .form-check-label{display:grid;gap:2px}
.demo-shadow-switch .form-check-label strong{font-size:.84rem}.demo-shadow-switch .form-check-label small{color:#86818f;font-size:.73rem;line-height:1.45}
.site-content-savebar{position:sticky;bottom:14px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding:13px 14px 13px 17px;border:1px solid #e5e0ee;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 18px 50px rgba(23,20,37,.13);backdrop-filter:blur(14px)}
.site-content-savebar>div{display:flex;align-items:center;gap:9px;color:#77717f;font-size:.8rem}.site-content-savebar>div i{color:#7142d7}

@media(max-width:1199.98px){
  .site-content-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:991.98px){
  .site-content-subnav{flex-wrap:nowrap;overflow-x:auto;padding:7px}
  .demo-visual-admin-grid{grid-template-columns:1fr}
  .site-content-editor-card{padding:22px!important}
}
@media(max-width:575.98px){
  .site-content-dashboard-grid{grid-template-columns:1fr}
  .site-content-subnav{margin-left:-4px;margin-right:-4px;border-radius:16px}
  .site-content-subnav a{min-height:40px;padding:8px 12px;font-size:.78rem}
  .site-content-editor-card{padding:17px!important;border-radius:20px!important}
  .site-band-admin-card,.site-content-editor-card .surface-subcard{padding:16px;border-radius:17px}
  .demo-visual-admin-preview{min-height:190px;padding:18px}
  .demo-visual-admin-body{padding:17px}
  .site-content-savebar{position:static;flex-direction:column;align-items:stretch}.site-content-savebar .btn{width:100%}
}

/* Firma panelindeki ortak demo kartı da aynı yönetilebilir görsel ayarını kullanır. */
.dashboard-body .demo-image-card{position:relative;isolation:isolate;overflow:hidden;padding:0!important;min-height:330px!important;background-image:var(--demo-bg);background-size:cover;background-position:center;border:0!important;box-shadow:none!important;color:#fff}
.dashboard-body .demo-image-card:before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--demo-bg);background-size:cover;background-position:center;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform:scale(1.015)}
.dashboard-body .demo-image-card:after{content:"";position:absolute;inset:0;z-index:-1;background:none}
.dashboard-body .demo-image-card.demo-has-shadow{box-shadow:0 22px 54px rgba(16,12,36,.19)!important}
.dashboard-body .demo-image-card.demo-has-shadow:after{background:linear-gradient(180deg,rgba(9,8,18,.12),rgba(9,8,18,.88))}
.dashboard-body .demo-image-card:hover:before{transform:scale(1.06)}
.dashboard-body .demo-image-card .demo-card-content{min-height:330px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:24px;position:relative}
.dashboard-body .demo-image-card h3{color:#fff!important;margin:10px 0 7px!important;text-shadow:0 2px 15px rgba(0,0,0,.26)}
.dashboard-body .demo-image-card p{color:rgba(255,255,255,.88)!important;line-height:1.58;margin-bottom:18px}
.dashboard-body .demo-image-card .demo-live-pill{color:#fff!important;background:rgba(14,12,24,.42);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);padding:7px 10px;border-radius:999px!important}
.dashboard-body .demo-image-card .btn{margin-top:auto;background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.32);color:#171326}


/* v1.6.9 - Admin firma detay yerlesimi ve erisim karti */
.admin-company-detail {
  align-items: flex-start;
}

.admin-company-detail > [class*="col-"] {
  min-width: 0;
}

.company-detail-side-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.company-detail-side-stack > .surface-card {
  position: static !important;
  top: auto !important;
  width: 100%;
  min-width: 0;
  margin-top: 0 !important;
}

.company-access-card {
  overflow: hidden;
}

.company-access-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(91, 70, 255, .1);
  color: var(--primary);
  flex: 0 0 auto;
}

.company-owner-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid rgba(18, 24, 40, .08);
  background: rgba(248, 249, 252, .85);
  border-radius: 16px;
}

.company-owner-summary .avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: #fff;
  font-weight: 800;
}

.company-owner-summary > div {
  min-width: 0;
}

.company-owner-summary small,
.company-owner-summary span:not(.status-pill) {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

.company-owner-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-access-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin-top: 1rem;
}

.company-password-modal {
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .24);
}

.company-password-modal .modal-header,
.company-password-modal .modal-footer {
  border-color: rgba(18, 24, 40, .07);
}

.password-reset-company-info {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  background: rgba(91, 70, 255, .07);
}

.password-reset-company-info i {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--primary);
}

.password-reset-company-info strong,
.password-reset-company-info span {
  display: block;
}

.password-reset-company-info span {
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 575.98px) {
  .admin-company-detail .card-heading {
    flex-direction: column;
  }
  .admin-company-detail .card-heading > .d-flex {
    width: 100%;
  }
  .admin-company-detail .card-heading > .d-flex .btn {
    flex: 1 1 100%;
  }
  .company-owner-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .company-owner-summary .status-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ===== v1.6.10 — public mobile UX, hero fit ve draggable canlı demolar ===== */

/* Canlı Demolar: ok/dot yok; masaüstü ve mobilde tutup sürüklenebilir sonsuz akış. */
.site-body .demo-card-slider.is-drag-marquee-ready{
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.site-body .demo-card-slider.is-drag-marquee-ready.is-demo-dragging{cursor:grabbing}
.site-body .demo-card-slider.is-drag-marquee-ready .demo-card-track{
  animation:none!important;
  transition:none!important;
  will-change:transform;
}
.site-body .demo-card-slider.is-drag-marquee-ready .demo-showcase-card,
.site-body .demo-card-slider.is-drag-marquee-ready .demo-showcase-card *{-webkit-user-drag:none}

/* Responsive native-benzeri web menüsü: mobilde soldan Bootstrap offcanvas. */
.site-header-inner{display:flex;align-items:center;width:100%}
.site-nav-drawer{flex:1 1 auto}
.site-mobile-header-actions{align-items:center;gap:7px}
.site-mobile-icon-button,
.site-mobile-menu-button{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:inline-grid;
  place-items:center;
  padding:0!important;
  border:1px solid #e7e4eb!important;
  border-radius:12px!important;
  color:#211d2b;
  background:#fff;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(22,17,42,.045);
}
.site-mobile-icon-button.primary{border-color:#171329!important;background:#171329;color:#fff}
.site-mobile-menu-button{font-size:.96rem}
.site-nav-drawer-head{padding:18px 20px;border-bottom:1px solid #ece9f0}
.site-nav-drawer-head .brand img{max-width:145px;max-height:44px;object-fit:contain}

@media(min-width:992px){
  .site-nav-drawer{position:static!important;visibility:visible!important;transform:none!important;width:auto!important;height:auto!important;border:0!important;background:transparent!important}
  .site-nav-drawer-body{display:flex!important;align-items:center;width:100%;padding:0!important;overflow:visible!important}
  .site-drawer-actions{flex:0 0 auto}
}

@media(max-width:991.98px){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  body.site-body{width:100%;max-width:100%;overflow-x:clip}
  .site-body main,.site-body section,.site-body footer,.site-body header{max-width:100%}
  .site-body img,.site-body video,.site-body svg,.site-body canvas{max-width:100%}
  .site-header .navbar>.container,.site-header .navbar>.container-fluid{flex-wrap:nowrap}
  .site-nav-drawer{
    --bs-offcanvas-width:min(86vw,360px);
    border-right:1px solid #e9e5ee!important;
    background:#fff;
    box-shadow:26px 0 70px rgba(23,18,42,.18);
  }
  .site-nav-drawer-body{display:flex;min-height:calc(100dvh - 82px);flex-direction:column;padding:10px 18px 24px!important;overflow-y:auto}
  .site-nav-drawer .navbar-nav{width:100%;gap:0!important;margin:0!important}
  .site-nav-drawer .nav-link{display:flex;align-items:center;width:100%;min-height:52px;padding:12px 11px!important;border-bottom:1px solid #f0edf3;font-size:.91rem!important;font-weight:750}
  .site-nav-drawer .nav-link:last-child{border-bottom:0}
  .site-nav-drawer .nav-link i{width:22px;text-align:center;color:#756d80}
  .site-nav-drawer .nav-link.active i{color:inherit}
  .site-drawer-actions{width:100%;margin-top:auto;padding-top:22px;flex-direction:column!important;align-items:stretch!important}
  .site-drawer-actions>a,.site-drawer-actions>form,.site-drawer-actions>form button{width:100%}
}

@media(max-width:767.98px){
  /* Mobil slider: görsel kırpılmaz; tamamı yatay genişliğe sığar. */
  .site-body .hero-slider-shell{padding:10px 10px 0!important}
  .site-body .hero-carousel-full,
  .site-body .hero-carousel-full .carousel-inner,
  .site-body .hero-carousel-full .carousel-item,
  .site-body .hero-image-only-link{
    height:auto!important;
    min-height:0!important;
  }
  .site-body .hero-carousel-full{border-radius:20px!important;background:#f5f4f7}
  .site-body .hero-image-only{
    display:block;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .site-body .hero-carousel-dots{bottom:8px!important}
}

@media(max-width:420px){
  .header-brand-logo img{max-width:118px!important}
  .site-mobile-header-actions{gap:5px}
  .site-mobile-icon-button,.site-mobile-menu-button{width:38px;height:38px;flex-basis:38px;border-radius:11px!important}
}

/* ===== v1.6.11 — mobil offcanvas sabitleme ve auth dikey boşluk düzeltmesi ===== */
@media(max-width:991.98px){
  /* Bootstrap offcanvas header içindeyken header stacking-context'i fixed paneli/backdrop'i bozmasın. */
  .site-body .site-header{
    z-index:auto!important;
    background:#fff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .site-body .site-nav-drawer{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    background:#fff!important;
    background-color:#fff!important;
    opacity:1!important;
    overflow:hidden!important;
  }
  .site-body .site-nav-drawer-head,
  .site-body .site-nav-drawer-body{
    background:#fff!important;
    background-color:#fff!important;
  }
  .site-body .site-nav-drawer-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overscroll-behavior:contain;
  }

  /* Mobil auth ekranlarında formu dikey ortalamak yerine üstten kompakt başlat. */
  .auth-body .auth-section{
    min-height:100dvh;
  }
  .auth-body .auth-form-wrap{
    place-items:start center;
    align-content:start;
    padding:18px 14px 24px;
  }
}

@media(max-width:575.98px){
  .auth-body .auth-form-wrap{padding-top:12px}
  .auth-body .auth-form-card{padding:1.15rem}
  .auth-body .auth-form-card h2{margin-top:.75rem}
}

/* ===== v1.6.12 — mobil offcanvas katman/stacking düzeltmesi ===== */
@media(max-width:991.98px){
  /* Sticky header kendi stacking-context'ini oluşturduğu için offcanvas, slider/kartlar gibi
     sonraki katmanların altında kalabiliyordu. Mobilde header'i normal akışa alıp offcanvas'i
     doğrudan viewport stacking düzenine çıkarıyoruz. */
  .site-body .site-header{
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
  }

  /* Menü ve backdrop, floating sosyal bar ve tüm sayfa içeriklerinin kesin olarak üstünde. */
  .site-body .site-nav-drawer{
    z-index:1060!important;
  }
  .site-body > .offcanvas-backdrop{
    z-index:1055!important;
  }
}

/* ===== v1.6.13 — demo link click + Sektörler içerik yönetimi ===== */
.sector-content-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sector-content-admin-card{overflow:hidden;border:1px solid #e8e5ed;border-radius:24px;background:#fff;box-shadow:0 14px 42px rgba(30,25,48,.055)}
.sector-content-admin-head{display:flex;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid #efedf3;background:#fbfafc}
.sector-content-admin-head h4{margin:2px 0 3px;font-size:1.05rem;font-weight:900}.sector-content-admin-head small{display:block;color:#8a8591;font-size:.76rem}
.sector-content-logo-preview{width:78px;height:58px;flex:0 0 78px;display:grid;place-items:center;padding:8px;border:1px solid #e8e5ed;border-radius:16px;background:#fff}
.sector-content-logo-preview img{width:100%;height:100%;object-fit:contain}
.sector-content-admin-body{padding:20px}.sector-enabled-switch{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid #e9e5ee;border-radius:15px;background:#fbfafc}
.sector-enabled-switch .form-check-input{margin-left:0;flex:0 0 auto}.sector-enabled-switch .form-check-label{display:grid;gap:2px}.sector-enabled-switch small{color:#8b8794;font-size:.75rem;line-height:1.4}
@media(max-width:1199.98px){.sector-content-admin-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){.sector-content-admin-head{align-items:flex-start;padding:16px}.sector-content-logo-preview{width:66px;height:52px;flex-basis:66px}.sector-content-admin-body{padding:16px}}

/* v1.6.14 — iOS native safe-area */
.tenant-v3.native-ios,
html.siparsis-native-ios body.tenant-v3{
  --siparsis-safe-top:var(--siparsis-native-safe-top, env(safe-area-inset-top,0px));
  --siparsis-safe-bottom:var(--siparsis-native-safe-bottom, env(safe-area-inset-bottom,0px));
  --siparsis-safe-left:var(--siparsis-native-safe-left, env(safe-area-inset-left,0px));
  --siparsis-safe-right:var(--siparsis-native-safe-right, env(safe-area-inset-right,0px));
}
.tenant-v3.native-ios .tenant-header-fixed,
html.siparsis-native-ios body.tenant-v3 .tenant-header-fixed{
  top:0!important;
  height:calc(78px + var(--siparsis-safe-top));
  padding:calc(16px + var(--siparsis-safe-top)) calc(18px + var(--siparsis-safe-right)) 16px calc(18px + var(--siparsis-safe-left))!important;
}
.tenant-v3.native-ios .tenant-content,
html.siparsis-native-ios body.tenant-v3 .tenant-content{
  padding-top:calc(88px + var(--siparsis-safe-top))!important;
  padding-right:calc(18px + var(--siparsis-safe-right))!important;
  padding-bottom:calc(112px + var(--siparsis-safe-bottom))!important;
  padding-left:calc(18px + var(--siparsis-safe-left))!important;
}
.tenant-v3.native-ios .tenant-home-content,
html.siparsis-native-ios body.tenant-v3 .tenant-home-content{
  padding-top:calc(82px + var(--siparsis-safe-top))!important;
}
.tenant-v3.native-ios .app-tabbar,
html.siparsis-native-ios body.tenant-v3 .app-tabbar{
  height:calc(84px + var(--siparsis-safe-bottom));
  padding:8px calc(14px + var(--siparsis-safe-right)) calc(8px + var(--siparsis-safe-bottom)) calc(14px + var(--siparsis-safe-left));
}
.tenant-v3.native-ios .tenant-app,
html.siparsis-native-ios body.tenant-v3 .tenant-app{
  min-height:100dvh;
}