/* =========================================================
   Neİstersen — Resmi Tanıtım Platformu
   Sadece Marka Renkleri: Canlı Kırmızı (#DE2828), Fıstık Yeşili (#63D667) ve Saf Beyaz (#FFFFFF)
   ========================================================= */

:root {
  --brand-red: #DE2828;
  --brand-red-dark: #B81B1B;
  --brand-red-soft: #FEE2E2;
  --brand-red-border: #FECACA;

  --brand-green: #63D667;
  --brand-green-light: #7EE682;
  --brand-green-dark: #15803D;
  --brand-green-soft: #DCFCE7;
  --brand-green-border: #86EFAC;

  --brand-green-gradient: linear-gradient(135deg, #7EE682 0%, #63D667 50%, #45B849 100%);
  --brand-green-gradient-hover: linear-gradient(135deg, #8DF091 0%, #6EE072 50%, #3CA840 100%);
  --brand-red-gradient: linear-gradient(135deg, #F03232 0%, #DE2828 55%, #B81B1B 100%);

  --text-dark: #111827;
  --text-body: #374151;
  --text-muted: #6B7280;
  --white: #FFFFFF;

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-elevated: 0 20px 44px rgba(184, 27, 27, 0.22), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 12px 28px rgba(184, 27, 27, 0.14);
  --spring-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--brand-red);
  color: var(--text-dark);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.mono {
  font-family: 'JetBrains Mono', monospace !important;
}

button,
.btn-top-white-outline,
.btn-top-white,
.btn-top-green,
.btn-main-red,
.btn-main-green,
.btn-scan-trigger,
.btn-generate-qr,
.btn-staff-approve,
.btn-staff-cancel,
.aud-tab,
.rc-tab,
.p-nav-btn,
.preset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ÜST OKUMA İLERLEME ÇUBUĞU */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--brand-green-gradient);
  z-index: 999;
  will-change: transform;
}

/* =========================================================
   HAREKETLİ DALGA ARKA PLANI (ÜSTTE YEŞİL, ALTTA KIRMIZI)
   ========================================================= */
.animated-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, #63D667 0%, #52C456 38%, #DE2828 64%, #B81B1B 100%);
  transform: translate3d(0, 0, 0);
}

.wave-layer {
  position: absolute;
  width: 136vw;
  left: -18vw;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.wave-green-layer {
  top: -12vh;
  height: 85vh;
  animation: waveGreenMotion 11s ease-in-out infinite alternate;
}

.wave-red-layer {
  bottom: -14vh;
  height: 85vh;
  animation: waveRedMotion 9.5s ease-in-out infinite alternate;
}

@keyframes waveGreenMotion {
  0%   { transform: translate3d(-18px, -10px, 0) scale(1); }
  100% { transform: translate3d(20px, 14px, 0) scale(1.03); }
}

@keyframes waveRedMotion {
  0%   { transform: translate3d(18px, 12px, 0) scale(1.02); }
  100% { transform: translate3d(-20px, -12px, 0) scale(0.99); }
}

.site-header,
.main-wrapper,
.site-footer,
.modal-backdrop {
  position: relative;
  z-index: 2;
}

/* SPOTLIGHT KART IŞIK EFEKTİ */
.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    380px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
    rgba(99, 214, 103, 0.16),
    transparent 65%
  );
  z-index: 1;
}

.spotlight-card > * {
  position: relative;
  z-index: 2;
}

/* TATLI SEKME GEÇİŞ EFEKTİ */
.smooth-pane {
  display: none;
  opacity: 0;
  transform: translateY(10px) scale(0.99);
}

.smooth-pane.active {
  display: block;
  animation: sweetPaneEnter 0.4s var(--spring-ease) forwards;
}

@keyframes sweetPaneEnter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   HEADER (KOYU GRİ YOK, DOĞAL LOGO, FERAH DÜZEN)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(184, 27, 27, 0.96);
  border-bottom: 3px solid var(--brand-green);
  box-shadow: 0 8px 24px rgba(142, 14, 14, 0.25);
}

.header-inner {
  max-width: 1420px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

/* 3. MADDE: LOGONUN ETRAFINDAKİ ÇERÇEVE VE KUTU TAMAMEN KALDIRILDI */
.brand-logo-clean {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.brand-titles {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1.05;
}

.brand-tagline {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-green-light);
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.header-nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 5px 8px;
  border-radius: 14px;
}

.nav-item {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 10px;
  transition: background 0.2s var(--spring-ease), color 0.2s var(--spring-ease), transform 0.2s var(--spring-ease);
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--brand-red);
  background: #FFFFFF;
  transform: translateY(-1px);
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-top-white-outline,
.btn-top-white,
.btn-top-green {
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--spring-ease), background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-top-white-outline {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.btn-top-white-outline:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-top-white {
  background: #FFFFFF;
  color: var(--brand-red);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-top-white:hover {
  background: var(--brand-red-soft);
  transform: translateY(-1px);
}

.btn-top-green {
  background: var(--brand-green-gradient);
  color: var(--text-dark);
  border: none;
  box-shadow: 0 6px 18px rgba(99, 214, 103, 0.35);
}

.btn-top-green:hover {
  background: var(--brand-green-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(99, 214, 103, 0.5);
}

/* MOBİL MENÜ */
.mobile-menu-btn {
  display: none;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.mobile-menu-btn span {
  width: 20px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
}

.mobile-drawer {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px 20px;
  background: var(--brand-red-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-drawer.open {
  display: flex;
}

.drawer-link {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 10px;
}

.drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.w-full {
  width: 100%;
}

/* =========================================================
   HERO ALANI (SAF BEYAZ KARTLAR, KIRMIZI VE YEŞİL VURGULAR)
   ========================================================= */
.main-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 90px;
}

.hero-stage {
  padding: 16px 0 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: stretch;
}

.hero-left {
  background: var(--white);
  border: 3px solid var(--white);
  border-radius: var(--radius-xl);
  padding: 42px 38px;
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-headline {
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.highlight-red-box {
  color: var(--brand-red);
}

.hero-lead {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 24px;
}

.audience-switcher {
  background: #FFFDFD;
  border: 1.5px solid var(--brand-red-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 26px;
}

.aud-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.aud-tab {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--brand-red-border);
  background: var(--white);
  color: var(--text-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.22s var(--spring-ease);
}

.aud-tab.active {
  background: var(--brand-red);
  color: var(--white);
  border-color: var(--brand-red);
  box-shadow: 0 4px 12px rgba(222, 40, 40, 0.25);
}

.aud-body p {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.55;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-main-red,
.btn-main-green {
  height: 50px;
  padding: 0 26px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--spring-ease), box-shadow 0.25s ease;
}

.btn-main-red {
  background: var(--brand-red-gradient);
  color: var(--white);
  border: none;
  box-shadow: 0 10px 24px rgba(222, 40, 40, 0.3);
}

.btn-main-red:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(222, 40, 40, 0.42);
}

.btn-main-green {
  background: var(--brand-green-gradient);
  color: var(--text-dark);
  border: none;
  box-shadow: 0 10px 24px rgba(99, 214, 103, 0.32);
}

.btn-main-green:hover {
  background: var(--brand-green-gradient-hover);
  transform: translateY(-3px);
}

/* SAĞ VİTRİN KARTI (4. MADDE: KOYU GRİ KALDIRILDI, SAF BEYAZ YAPILDI) */
.interactive-showcase-card {
  background: var(--white);
  border: 3px solid var(--brand-green);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  color: var(--text-dark);
  box-shadow: var(--shadow-elevated);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.showcase-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--brand-red-soft);
}

.sc-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-red);
}

.sc-step-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}

.sc-flow-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FFFDFD;
  border: 1.5px solid var(--brand-red-border);
  border-radius: 14px;
  padding: 14px;
  transition: transform 0.25s var(--spring-ease), border-color 0.2s ease;
}

.sc-flow-item:hover {
  border-color: var(--brand-green);
  background: #F4FBF5;
  transform: translateX(5px);
}

.sc-num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-red);
  color: var(--white);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-info strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.sc-info span {
  font-size: 12.5px;
  color: var(--text-body);
  line-height: 1.45;
}

.sc-bottom-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 14px;
  border-top: 2px solid var(--brand-red-soft);
}

.sc-mini-stat {
  background: var(--brand-green-soft);
  border: 1px solid var(--brand-green-border);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.sc-stat-val {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-green-dark);
}

.sc-stat-lbl {
  font-size: 11px;
  color: var(--text-dark);
  font-weight: 700;
}

/* =========================================================
   BÖLÜM BAŞLIKLARI & ORTAK KART STİLİ (BEYAZ ZEMİN)
   ========================================================= */
.section-block {
  margin-top: 80px;
}

.section-heading {
  background: var(--white);
  border: 3px solid var(--brand-green);
  border-radius: var(--radius-xl);
  padding: 30px 36px;
  margin-bottom: 26px;
  color: var(--text-dark);
  box-shadow: var(--shadow-card);
}

.section-heading h2 {
  font-size: clamp(25px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--brand-red);
  margin-bottom: 8px;
}

.section-heading p {
  font-size: 15.5px;
  color: var(--text-body);
  max-width: 860px;
}

.glass-card {
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.32s var(--spring-ease), box-shadow 0.32s var(--spring-ease);
}

/* 4 ADIM IZGARASI */
.four-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.step-box {
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--brand-red);
}

.step-box:nth-child(even) {
  border-top-color: var(--brand-green);
}

.step-num-circle {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.step-num-circle.green {
  background: var(--brand-green-soft);
  color: var(--brand-green-dark);
}

.step-box h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.step-box p {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
}

/* =========================================================
   ESKİ USUL VS NEİSTERSEN KARŞILAŞTIRMA SAHNESİ (BEYAZ TEMA)
   ========================================================= */
.comparison-Interactive-card {
  padding: 36px;
  border: 3px solid var(--brand-green);
}

.comp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.comp-header h3 {
  font-size: 26px;
  font-weight: 800;
  color: var(--brand-red);
}

.comp-sub {
  font-size: 14.5px;
  color: var(--text-body);
  margin-top: 4px;
}

.comp-toggle-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.comp-mode-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1.5px solid var(--brand-red-border);
  background: var(--white);
  color: var(--text-body);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comp-mode-btn.active {
  background: var(--brand-red);
  color: var(--white);
  border-color: var(--brand-red);
}

.comp-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.comp-side-box {
  border-radius: 20px;
  padding: 26px;
  border: 2px solid var(--brand-red-border);
  background: #FFFBFB;
  transition: all 0.3s var(--spring-ease);
}

.comp-side-box.old-way.active-focus {
  border-color: var(--brand-red);
  background: var(--brand-red-soft);
  transform: scale(1.015);
}

.comp-side-box.new-way {
  background: #F4FBF5;
  color: var(--text-dark);
  border-color: var(--brand-green-border);
}

.comp-side-box.new-way.active-focus {
  border-color: var(--brand-green);
  background: var(--brand-green-soft);
  transform: scale(1.015);
  box-shadow: 0 14px 30px rgba(99, 214, 103, 0.22);
}

.comp-side-box h4 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text-dark);
}

.comp-points-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.comp-side-box.old-way .comp-points-list li {
  color: var(--text-body);
  padding-left: 14px;
  border-left: 4px solid var(--brand-red);
}

.comp-side-box.new-way .comp-points-list li {
  color: var(--text-dark);
  padding-left: 14px;
  border-left: 4px solid var(--brand-green-dark);
}

/* =========================================================
   CANLI YAPAY ZEKA FİŞ TARAMA TESTİ (BEYAZ TEMA)
   ========================================================= */
.ai-lab-container {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  background: var(--white);
  border: 3px solid var(--brand-green);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-elevated);
  color: var(--text-dark);
}

.receipt-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.receipt-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.rc-tab {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--brand-red-border);
  background: #FFFDFD;
  color: var(--text-body);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.22s var(--spring-ease);
}

.rc-tab.active {
  background: var(--brand-red);
  color: var(--white);
  border-color: var(--brand-red);
}

.thermal-receipt-wrapper {
  background: #FFFDF9;
  color: var(--text-dark);
  border-radius: 14px;
  padding: 46px 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--brand-red-border);
  cursor: crosshair;
}

.ai-vision-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--brand-green-soft);
  color: var(--brand-green-dark);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--brand-green);
  z-index: 6;
}

.ai-zone {
  position: relative;
  border: 1.5px dashed transparent;
  border-radius: 8px;
  padding: 4px 6px;
  transition: all 0.2s var(--spring-ease);
}

.ai-zone:hover,
.ai-zone.ai-locked {
  border-color: var(--brand-green-dark);
  background: var(--brand-green-soft);
  transform: scale(1.015);
}

.zone-chip {
  display: none;
  font-size: 9.5px;
  font-weight: 800;
  background: var(--brand-green-dark);
  color: var(--white);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.ai-zone:hover .zone-chip,
.ai-zone.ai-locked .zone-chip {
  display: inline-block;
}

.laser-scanner-line {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 4px;
  background: var(--brand-green);
  box-shadow: 0 0 16px 3px var(--brand-green);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.thermal-receipt-wrapper.scanning .laser-scanner-line {
  opacity: 1;
  animation: laserSweep 2.1s ease-in-out forwards;
}

@keyframes laserSweep {
  0%   { top: 10%; }
  50%  { top: 95%; }
  100% { top: 10%; }
}

.receipt-inner {
  font-size: 12.5px;
  line-height: 1.55;
}

.rc-center {
  text-align: center;
}

.rc-divider {
  text-align: center;
  color: #9CA3AF;
  margin: 6px 0;
  overflow: hidden;
  white-space: nowrap;
}

.rc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.rc-total {
  font-size: 14px;
  margin-top: 4px;
}

.rc-highlight-line.scanned-ok {
  background: var(--brand-green-soft);
  color: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  font-weight: 800;
}

.rc-highlight-line.scanned-err {
  background: var(--brand-red-soft);
  color: var(--brand-red);
  border-color: var(--brand-red);
  font-weight: 800;
}

.rc-footer-code {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

.btn-scan-trigger {
  height: 50px;
  border-radius: 14px;
  border: none;
  background: var(--brand-red-gradient);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(222, 40, 40, 0.35);
  transition: transform 0.25s var(--spring-ease);
}

.btn-scan-trigger:hover {
  transform: translateY(-2px);
}

/* SAĞ KONSOL (BEYAZ TEMA) */
.ai-console-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--brand-red-soft);
}

.console-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-red);
}

.console-status {
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
}

.console-status.ok {
  background: var(--brand-green-soft);
  color: var(--brand-green-dark);
}

.console-status.err {
  background: var(--brand-red);
  color: var(--white);
}

.check-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFDFD;
  border: 1.5px solid var(--brand-red-border);
  border-radius: 14px;
  padding: 12px 14px;
  transition: all 0.28s var(--spring-ease);
}

.check-item.pass {
  border-color: var(--brand-green);
  background: var(--brand-green-soft);
  transform: translateX(4px);
}

.check-item.fail {
  border-color: var(--brand-red);
  background: var(--brand-red-soft);
}

.chk-indicator {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--brand-red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.check-item.pass .chk-indicator {
  background: var(--brand-green-dark);
}

.chk-content {
  flex: 1;
}

.chk-content strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-dark);
}

.chk-content span {
  font-size: 12px;
  color: var(--text-body);
}

.chk-state {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--brand-red-border);
  color: var(--text-body);
  flex-shrink: 0;
}

.check-item.pass .chk-state {
  background: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  color: var(--white);
}

.check-item.fail .chk-state {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--white);
}

.scan-output-box {
  background: #FFF9F9;
  border: 2px solid var(--brand-red-border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.out-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.out-row span {
  color: var(--text-body);
  font-weight: 600;
}

.out-points {
  font-size: 17px;
  color: var(--brand-green-dark);
}

/* =========================================================
   CANLI 30 SANİYE QR & KASİYER TESLİMAT TESTİ (BEYAZ TEMA)
   ========================================================= */
.qr-simulator-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.qr-sim-card {
  background: var(--white);
  border: 3px solid var(--white);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qr-sim-card.cashier-card {
  border-color: var(--brand-green);
}

.qr-sim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-red-soft);
}

.qr-card-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-red);
}

.qr-wallet-pill {
  font-size: 13.5px;
  font-weight: 800;
  background: var(--brand-green-soft);
  color: var(--brand-green-dark);
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid var(--brand-green-border);
}

.qr-staff-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-body);
}

.qr-sim-card h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
}

.qr-reward-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qr-rew-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--brand-red-border);
  background: #FFFDFD;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s var(--spring-ease);
}

.qr-rew-btn .r-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-dark);
}

.qr-rew-btn .r-pts {
  font-size: 13px;
  font-weight: 800;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  padding: 4px 10px;
  border-radius: 8px;
}

.qr-rew-btn.active {
  border-color: var(--brand-red);
  background: var(--brand-red-soft);
}

.btn-generate-qr {
  height: 48px;
  border-radius: 14px;
  border: none;
  background: var(--brand-red-gradient);
  color: var(--white);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(222, 40, 40, 0.3);
  transition: transform 0.22s var(--spring-ease);
}

.btn-generate-qr:hover {
  transform: translateY(-2px);
}

.qr-live-stage {
  background: #F4FBF5;
  border: 1.5px solid var(--brand-green-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.qr-matrix-box {
  width: 96px;
  height: 96px;
  background: var(--white);
  border: 2px solid var(--brand-green-dark);
  border-radius: 12px;
  padding: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-grid-pattern {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

.qr-cell {
  background: var(--brand-red-soft);
  border-radius: 1px;
}

.qr-cell.dark {
  background: var(--brand-red);
}

.qr-timer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qr-token-code {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark);
}

.qr-countdown-bar {
  height: 10px;
  background: var(--white);
  border: 1px solid var(--brand-green-border);
  border-radius: 100px;
  overflow: hidden;
}

.qr-countdown-fill {
  height: 100%;
  width: 0%;
  background: var(--brand-green-gradient);
  transition: width 0.25s linear;
}

.qr-sec-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-body);
}

.terminal-desc {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.55;
}

.terminal-screen-box {
  background: #F4FBF5;
  border: 2px solid var(--brand-green-border);
  border-radius: 16px;
  padding: 20px;
  margin: auto 0;
}

.term-status-line {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-green-dark);
  margin-bottom: 6px;
}

.term-detail-line {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 600;
}

.terminal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-staff-approve {
  height: 48px;
  border-radius: 12px;
  border: none;
  background: var(--brand-green-gradient);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.btn-staff-approve:disabled,
.btn-staff-cancel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-staff-cancel {
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--brand-red-border);
  background: var(--brand-red-soft);
  color: var(--brand-red);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* =========================================================
   GÜVENLİK BENTO KARTLARI (ETİKETSİZ, SAF BEYAZ)
   ========================================================= */
.security-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sec-bento-card {
  border-left: 7px solid var(--brand-red);
}

.sec-bento-card:nth-child(even) {
  border-left-color: var(--brand-green);
}

.sec-bento-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--brand-red);
  margin-bottom: 8px;
}

.sec-bento-card:nth-child(even) h3 {
  color: var(--brand-green-dark);
}

.sec-bento-card p {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
}

/* =========================================================
   CANLI PUAN HESAPLAYICI (BEYAZ TEMA)
   ========================================================= */
.calculator-shell {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
  padding: 38px;
  border: 3px solid var(--brand-green);
}

.calc-left h3 {
  font-size: 26px;
  font-weight: 800;
  color: var(--brand-red);
  margin-bottom: 10px;
  line-height: 1.2;
}

.calc-left p {
  font-size: 15px;
  color: var(--text-body);
  margin-bottom: 24px;
}

.calc-slider-group {
  background: #FFFDFD;
  border: 1.5px solid var(--brand-red-border);
  border-radius: 16px;
  padding: 20px;
}

.slider-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.slider-top-row label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-dark);
}

.slider-val-badge {
  background: var(--brand-red);
  color: var(--white);
  font-size: 16px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 10px;
}

#spend-slider {
  width: 100%;
  height: 8px;
  accent-color: var(--brand-red);
  cursor: pointer;
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 8px;
}

.calc-result-card {
  background: #F4FBF5;
  color: var(--text-dark);
  border-radius: 22px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 2.5px solid var(--brand-green);
}

.res-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.res-label {
  font-size: 12.5px;
  color: var(--text-body);
  font-weight: 700;
}

.res-big {
  font-size: 28px;
  font-weight: 800;
}

.text-green { color: var(--brand-green-dark) !important; }
.text-red   { color: var(--brand-red) !important; }

.res-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.res-divider {
  height: 1.5px;
  background: var(--brand-green-border);
}

/* =========================================================
   MÜDÜR PORTALI İNTERAKTİF ÖNİZLEME PENCERESİ (BEYAZ TEMA)
   ========================================================= */
.portal-preview-window {
  background: var(--white);
  border: 3px solid var(--brand-green);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}

.browser-chrome {
  background: var(--brand-red);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 3px solid var(--brand-green);
}

.chrome-dots {
  display: flex;
  gap: 7px;
}

.chrome-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.chrome-address {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 8px;
}

.chrome-go-btn {
  background: var(--brand-green-gradient);
  color: var(--text-dark);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 8px;
}

.portal-nav-bar {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  background: #FFF9F9;
  border-bottom: 1.5px solid var(--brand-red-border);
  flex-wrap: wrap;
}

.p-nav-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid var(--brand-red-border);
  background: var(--white);
  color: var(--text-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.22s var(--spring-ease);
}

.p-nav-btn.active {
  background: var(--brand-red);
  color: var(--white);
  border-color: var(--brand-red);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(222, 40, 40, 0.25);
}

.portal-tab-pane {
  padding: 32px;
}

.p-pane-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: center;
}

.p-pane-info h3 {
  font-size: 23px;
  font-weight: 800;
  color: var(--brand-red);
  margin-bottom: 12px;
}

.p-pane-info p {
  font-size: 15px;
  color: var(--text-body);
  margin-bottom: 18px;
}

.p-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-feature-list li {
  font-size: 14px;
  color: var(--text-body);
  padding-left: 16px;
  border-left: 4px solid var(--brand-green);
}

.mock-card {
  background: #FFFDFD;
  border: 1.5px solid var(--brand-red-border);
  border-radius: 18px;
  padding: 22px;
}

.mock-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.mock-legend {
  display: flex;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
}

.dot-blue, .dot-orange {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}

.dot-blue   { background: #2563EB; }
.dot-orange { background: #F97316; }

.mock-dual-chart {
  height: 130px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--brand-red-border);
  margin-bottom: 16px;
}

.m-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.m-col .bars {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.b-blue {
  width: 12px;
  background: #2563EB;
  border-radius: 4px 4px 0 0;
}

.b-orange {
  width: 12px;
  background: #F97316;
  border-radius: 4px 4px 0 0;
}

.mock-bars-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mb-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.mb-track {
  height: 10px;
  border-radius: 100px;
  overflow: hidden;
}

.mb-track.purple { background: #EDE9FE; }
.mb-fill.purple  { height: 100%; background: #8B5CF6; border-radius: 100px; }

.mb-track.yellow { background: #FEF9C3; }
.mb-fill.yellow  { height: 100%; background: #EAB308; border-radius: 100px; }

.preset-price-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.preset-btn {
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--brand-red-border);
  background: var(--white);
  color: var(--text-body);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.preset-btn:hover {
  border-color: var(--brand-red);
  color: var(--brand-red);
}

.mock-form-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mf-field label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-body);
  margin-bottom: 5px;
}

.mf-field input[type="text"],
.mf-field input[type="number"] {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid var(--brand-red-border);
  background: var(--white);
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 800;
  outline: none;
}

.locked-red-point-box {
  background: var(--brand-red-soft);
  border: 2px solid var(--brand-red);
  color: var(--brand-red);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 19px;
  font-weight: 800;
}

.mock-counters-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.mc-pill {
  padding: 12px 10px;
  border-radius: 12px;
  text-align: center;
}

.mc-pill small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 4px;
}

.mc-pill strong {
  font-size: 17px;
  font-weight: 800;
}

.mc-pill.green { background: var(--brand-green-soft); color: var(--brand-green-dark); border: 1px solid var(--brand-green-border); }
.mc-pill.red   { background: var(--brand-red-soft); color: var(--brand-red); border: 1px solid var(--brand-red-border); }
.mc-pill.slate { background: var(--white); color: var(--text-dark); border: 1px solid var(--brand-red-border); }

.mock-table-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--brand-red-border);
  font-size: 12.5px;
}

.mt-row strong {
  display: block;
  color: var(--text-dark);
}

.reward-tag-purple {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  background: #EDE9FE;
  color: #6D28D9;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 3px;
}

.reward-tag-green {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  background: var(--brand-green-soft);
  color: var(--brand-green-dark);
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 3px;
}

.mt-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.staff-chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.mock-staff-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--brand-red-border);
  padding: 12px;
  border-radius: 12px;
}

.ms-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-meta {
  flex: 1;
}

.ms-meta strong {
  display: block;
  font-size: 13.5px;
}

.ms-meta span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.ms-actions {
  display: flex;
  gap: 6px;
}

.ms-btn-edit, .ms-btn-del {
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 8px;
}

.ms-btn-edit { background: var(--brand-green-soft); color: var(--brand-green-dark); }
.ms-btn-del  { background: var(--brand-red-soft); color: var(--brand-red); }

.mock-branch-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--brand-red-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.mbs-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}

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

.mtc-box {
  background: var(--white);
  border: 1px solid var(--brand-red-border);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.mtc-box strong {
  display: block;
  font-size: 12px;
  color: var(--brand-red);
}

.mtc-box span {
  font-size: 11px;
  color: var(--text-muted);
}

/* =========================================================
   AYNI GÜN KURULUM YOL HARİTASI (BEYAZ TEMA)
   ========================================================= */
.onboarding-timeline-card {
  padding: 38px;
  border: 3px solid var(--brand-green);
}

.ot-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}

.ot-head h3 {
  font-size: 27px;
  font-weight: 800;
  color: var(--brand-red);
  margin-bottom: 8px;
}

.ot-head p {
  font-size: 15px;
  color: var(--text-body);
}

.ot-steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 26px;
}

.ot-step-box {
  background: #FFFDFD;
  border: 1.5px solid var(--brand-red-border);
  border-radius: 18px;
  padding: 24px;
  border-top: 5px solid var(--brand-red);
}

.ot-step-box:nth-child(2) {
  border-top-color: var(--brand-green);
}

.ot-step-box h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.ot-step-box p {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
}

.ot-bottom-action {
  text-align: center;
}

/* =========================================================
   SIKÇA SORULAN SORULAR (AKORDEON)
   ========================================================= */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: 2px solid var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  cursor: pointer;
}

.faq-toggle-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--brand-red-soft);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
  transition: transform 0.25s var(--spring-ease), background 0.2s ease;
}

.faq-item.open .faq-toggle-icon {
  background: var(--brand-red);
  color: var(--white);
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 0 24px 20px;
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.65;
}

.faq-item.open .faq-answer {
  display: block;
  animation: sweetPaneEnter 0.32s var(--spring-ease) forwards;
}

/* =========================================================
   SON ÇAĞRI KARTI (CTA) & FOOTER (BEYAZ VE KIRMIZI/YEŞİL)
   ========================================================= */
.final-cta-card {
  background: var(--white);
  border: 3px solid var(--brand-green);
  border-radius: var(--radius-xl);
  padding: 52px 40px;
  text-align: center;
  color: var(--text-dark);
  box-shadow: var(--shadow-elevated);
}

.final-cta-content h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  color: var(--brand-red);
  margin-bottom: 12px;
}

.final-cta-content p {
  font-size: 16px;
  color: var(--text-body);
  max-width: 680px;
  margin: 0 auto 28px;
}

.final-cta-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-large {
  height: 52px;
  padding: 0 28px;
  font-size: 15.5px;
}

.site-footer {
  background: var(--white);
  border-top: 4px solid var(--brand-green);
  color: var(--text-dark);
  padding: 56px 24px 32px;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1.5px solid var(--brand-red-soft);
}

.footer-brand-name {
  color: var(--brand-red) !important;
}

.footer-brand-sub {
  color: var(--brand-green-dark) !important;
}

.footer-summary {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-body);
  max-width: 420px;
}

.footer-nav-col h4 {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand-red);
  margin-bottom: 14px;
}

.footer-nav-col a,
.footer-link-btn {
  display: block;
  color: var(--text-body);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.footer-nav-col a:hover,
.footer-link-btn:hover {
  color: var(--brand-red);
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   1., 2. VE 3. MADDE: SAF BEYAZ, ETİKETSİZ, DOĞAL LOGOLU MODALLAR
   ========================================================= */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(142, 14, 14, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
  animation: sweetPaneEnter 0.3s var(--spring-ease) forwards;
}

.modal-window {
  background: var(--white);
  border: 3px solid var(--brand-green);
  border-radius: 28px;
  width: 100%;
  max-width: 500px;
  padding: 36px 32px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(142, 14, 14, 0.32);
  color: var(--text-dark);
  max-height: 92vh;
  overflow-y: auto;
}

.modal-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: var(--brand-green-gradient);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-red-border);
  background: var(--brand-red-soft);
  color: var(--brand-red);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: var(--brand-red);
  color: var(--white);
}

.modal-header-lockup {
  text-align: center;
  margin-bottom: 22px;
}

/* 3. MADDE: MODAL LOGOSUNDA HİÇBİR ÇERÇEVE VEYA ARKA KUTU YOK */
.modal-logo-clean {
  width: 76px;
  height: 76px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 6px 14px rgba(222, 40, 40, 0.22));
}

.modal-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-red);
  margin-bottom: 6px;
}

.modal-subtitle {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.55;
}

.contact-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.contact-card-item {
  display: block;
  text-decoration: none;
  background: #FFFDFD;
  border: 2px solid var(--brand-red-border);
  border-radius: 18px;
  padding: 18px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.contact-card-item:hover {
  border-color: var(--brand-green);
  background: #F4FBF5;
  transform: translateY(-2px);
}

.cc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cc-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.cc-copy-btn {
  background: var(--brand-green-soft);
  color: var(--brand-green-dark);
  border: 1px solid var(--brand-green-border);
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.cc-copy-btn:hover {
  background: var(--brand-green);
  color: var(--text-dark);
}

.cc-val {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--brand-red);
  text-decoration: none;
  margin-bottom: 4px;
}

.cc-hint {
  display: block;
  font-size: 12.5px;
  color: var(--text-body);
}

.modal-footer-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
}

.btn-modal-secondary {
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--brand-red-border);
  background: var(--brand-red-soft);
  color: var(--brand-red);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.btn-modal-secondary:hover {
  background: var(--brand-red);
  color: var(--white);
}

/* BEYAZ MODAL FORM ELEMANLARI */
.f-group {
  margin-bottom: 14px;
}

.f-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-title {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-body);
  margin-bottom: 6px;
  letter-spacing: 0.4px;
}

.f-group input[type="text"],
.f-group input[type="tel"] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--brand-red-border);
  background: #FFFDFD;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.f-group input::placeholder {
  color: #9CA3AF;
}

.f-group input:focus {
  border-color: var(--brand-red);
  background: var(--white);
}

.category-pills-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cat-check-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px;
  padding: 0 14px;
  border: 2px solid var(--brand-red-border);
  border-radius: 12px;
  background: #FFFDFD;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}

.cat-check-pill input[type="checkbox"] {
  display: none;
}

.cat-pill-text {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-body);
  text-align: center;
  line-height: 1;
}

.cat-check-pill:has(input:checked) {
  background: var(--brand-green-soft);
  border-color: var(--brand-green);
}

.cat-check-pill:has(input:checked) .cat-pill-text {
  color: var(--brand-green-dark);
}

.btn-submit-form {
  height: 50px;
  font-size: 15px;
  margin-top: 8px;
}

.form-error-box {
  background: var(--brand-red-soft);
  border: 1.5px solid var(--brand-red);
  color: var(--brand-red);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 14px;
}

.apply-success-view {
  text-align: center;
  padding: 16px 0 6px;
}

.apply-success-view h4 {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-green-dark);
  margin-bottom: 8px;
}

.apply-success-view p {
  font-size: 14px;
  color: var(--text-body);
  margin-bottom: 18px;
}

.legal-scroll-area {
  max-height: 260px;
  overflow-y: auto;
  background: #FFFDFD;
  border: 1.5px solid var(--brand-red-border);
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0 18px;
  font-size: 13px;
  color: var(--text-body);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* YAYLANAN TATLI SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.6s var(--spring-ease), transform 0.6s var(--spring-ease);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* RESPONSIVE */
@media (max-width: 1180px) {
  .header-nav-pill,
  .header-buttons {
    display: none;
  }
  .mobile-menu-btn {
    display: inline-flex;
  }
  .hero-grid,
  .comp-stage-grid,
  .ai-lab-container,
  .qr-simulator-shell,
  .calculator-shell,
  .p-pane-grid,
  .ot-steps-row {
    grid-template-columns: 1fr;
  }
  .four-steps-grid,
  .security-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .four-steps-grid,
  .security-bento-grid,
  .footer-top,
  .f-row-2,
  .receipt-selector,
  .preset-price-pills,
  .mock-three-cards,
  .modal-footer-split {
    grid-template-columns: 1fr;
  }
  .hero-left,
  .comparison-Interactive-card,
  .onboarding-timeline-card {
    padding: 26px 20px;
  }
  .brand-name {
    font-size: 21px;
  }
  .brand-logo-clean {
    width: 46px;
    height: 46px;
  }
  .qr-live-stage {
    flex-direction: column;
    text-align: center;
  }
}
/* PENCERELERİN ARKASINDAKİ BOĞUCU KIRMIZILIĞI KALDIRAN TEMİZ ZEMİN */
.modal-backdrop,
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.68) !important; /* Kırmızı leke kaldırıldı, net cam efekti */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-backdrop.open,
.modal-overlay.open {
  display: flex !important;
}

/* SÖZLEŞME OKUMA MODALLARININ BAŞVURU FORMUNUN ÜSTÜNE ÇIKMASI İÇİN */
#landing-terms-modal,
#landing-kvkk-modal {
  z-index: 5000 !important;
}

/* FOOTER VE MODAL BUTONLARININ KUSURSUZ HİZALANMASI */
.footer-legal-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: 'PlusJakartaSans', sans-serif;
  font-size: 12.5px;
  color: #64748B;
  cursor: pointer;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}

.footer-link-btn:hover {
  color: #DE2828;
}

.btn-top-green,
.btn-main-red,
.btn-main-green,
.btn-modal-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
}
/* FOOTER SAĞ KOLONDAKİ YAZILARIN ALT ALTA VE DÜZGÜN HİZALANMASI */
.footer-nav-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.footer-nav-col a,
.footer-nav-col button,
.footer-nav-col .footer-link-btn {
  display: block !important;
  width: auto !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  color: #475569 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
}

.footer-nav-col a:hover,
.footer-nav-col button:hover,
.footer-nav-col .footer-link-btn:hover {
  color: #DE2828 !important;
}

/* EN ALTTAKİ TELİF VE YASAL METİNLERİN TEMİZLENMESİ */
.footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid #FEE2E2 !important;
  padding-top: 18px !important;
  margin-top: 32px !important;
}

.footer-legal-links {
  border: none !important;
}

.footer-legal-links .footer-link-btn {
  border: none !important;
  text-decoration: underline !important;
  color: #64748B !important;
}
/* MODERN KVKK & KULLANIM KOŞULLARI HAP BUTONU */
.footer-legal-links {
  display: inline-flex;
  align-items: center;
}

.legal-badge-btn {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #475569;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.legal-badge-btn:hover {
  background: #FEE2E2;
  border-color: #FECACA;
  color: #DE2828;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(222, 40, 40, 0.12);
}

.legal-badge-btn:active {
  transform: translateY(0);
}