/* ═══════════════════════════════════════════════════════════════
   KIOSK.CSS — StyleFit Dokunmatik Kiosk Ekranı
   1080 × 1920 PORTRE — tüm boyutlar portre için optimize
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Fedra Serif A Pro Font Definition ─────────────────── */
@font-face {
  font-family: 'Fedra Serif A Pro';
  src: local('Fedra Serif A Pro Book'),
       local('Fedra Serif A Pro'),
       local('FedraSerifAPro-Book'),
       local('FedraSerifAPro-Regular'),
       local('FedraSerifAPro'),
       url('fonts/FedraSerifAPro-Book.woff2') format('woff2'),
       url('fonts/FedraSerifAPro-Book.woff') format('woff'),
       url('fonts/FedraSerifAPro-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Fedra Serif A Pro';
  src: local('Fedra Serif A Pro Book Italic'),
       local('Fedra Serif A Pro Italic'),
       local('FedraSerifAPro-BookItalic'),
       local('FedraSerifAPro-Italic'),
       url('fonts/FedraSerifAPro-BookItalic.woff2') format('woff2'),
       url('fonts/FedraSerifAPro-BookItalic.woff') format('woff'),
       url('fonts/FedraSerifAPro-BookItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Fedra Serif A Pro';
  src: local('Fedra Serif A Pro Medium'),
       local('FedraSerifAPro-Medium'),
       url('fonts/FedraSerifAPro-Medium.woff2') format('woff2'),
       url('fonts/FedraSerifAPro-Medium.woff') format('woff'),
       url('fonts/FedraSerifAPro-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Fedra Serif A Pro';
  src: local('Fedra Serif A Pro Bold'),
       local('FedraSerifAPro-Bold'),
       url('fonts/FedraSerifAPro-Bold.woff2') format('woff2'),
       url('fonts/FedraSerifAPro-Bold.woff') format('woff'),
       url('fonts/FedraSerifAPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Fedra Serif A Pro';
  src: local('Fedra Serif A Pro Bold Italic'),
       local('FedraSerifAPro-BoldItalic'),
       url('fonts/FedraSerifAPro-BoldItalic.woff2') format('woff2'),
       url('fonts/FedraSerifAPro-BoldItalic.woff') format('woff'),
       url('fonts/FedraSerifAPro-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:       #efebe0;
  --gold-light: #ffffff;
  --gold-dark:  #d4cca4;
  --bg:         #6c7859;
  --bg2:        #6c7859;
  --text:       #ffffff;
  --muted:      #d4cca4;
  --card-bg:    #333c2a;
  --card-border:rgba(212, 204, 164, 0.3);
  --green:      #22c55e;
  --red:        #ef4444;
  --r:          20px;
  --r-lg:       12px; /* For theme cards */
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* portre kilitlemek için tam ekran blok */
  position: fixed;
  inset: 0;
}

/* ── Ekran Container ───────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* geçiş */
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.4,0,.2,1);
}
.screen.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Arka plan orb'ları ────────────────────────────────────── */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.bg-orb-gold {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(201,169,110,.18) 0%, transparent 70%);
}
.bg-orb-purple {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(201,169,110,.08) 0%, transparent 70%);
}

/* ── Grid overlay ──────────────────────────────────────────── */
.grid-overlay {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(201,169,110,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.035) 1px, transparent 1px);
  background-size: 90px 90px;
}

/* ── Köşe Motifleri ────────────────────────────────────────── */
.corner-motif {
  position: absolute;
  width: clamp(140px, 25vw, 350px);
  height: clamp(140px, 25vw, 350px);
  background-image: url('../resimler/motifson.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  transform: none; /* Dönme açısını sıfırlıyoruz, motif düz duracak */
}

/* --- EKRAN 1 (WELCOME SCREEN) MOTİFLERİ --- */
#screen-1 .motif-tl {
  display: none;
}
#screen-1 .motif-tr {
  top: -30px;
  right: -30px;
  width: 320px;
  height: 320px;
}
#screen-1 .motif-bl {
  bottom: 240px;
  left: -180px;
  width: 280px;
  height: 280px;
}
#screen-1 .motif-br {
  bottom: -40px;
  right: -210px;
  width: 380px;
  height: 380px;
}

/* --- EKRAN 2 (THEME SELECTION) MOTİFLERİ --- */
#screen-2 .motif-tl {
  top: 100px;
  left: -220px;
  width: 320px;
  height: 320px;
}
#screen-2 .motif-tr {
  top: -30px;
  right: -30px;
  width: 320px;
  height: 320px;
}
#screen-2 .motif-bl {
  display: none;
}
#screen-2 .motif-br {
  bottom: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
}

/* --- CİNSİYET SEÇİMİ OVERLAY MOTİFLERİ --- */
.gender-overlay .motif-tl {
  display: none;
}
.gender-overlay .motif-tr {
  top: -30px;
  right: -30px;
  width: 320px;
  height: 320px;
}
.gender-overlay .motif-bl {
  bottom: 240px;
  left: -200px;
  width: 320px;
  height: 320px;
}
.gender-overlay .motif-br {
  bottom: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
}

/* --- EKRAN 4 (RESULT SCREEN) MOTİFLERİ --- */
#screen-4 .motif-tl {
  display: none;
}
#screen-4 .motif-tr {
  top: -30px;
  right: -30px;
  width: 320px;
  height: 320px;
}
#screen-4 .motif-bl {
  bottom: 120px;
  left: -180px;
  width: 320px;
  height: 320px;
}
#screen-4 .motif-br {
  bottom: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
}

/* ═══════════════════════════════════════════════════════════
   EKRAN 1 — KARŞILAMA  (1080 × 1920)
   Ortada logo + marka + slogan + dokunma uyarısı
═══════════════════════════════════════════════════════════ */
#screen-1 {
  background: var(--bg);
  cursor: pointer;
  justify-content: center;
}

.s1-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vh, 56px);
  text-align: center;
  padding: 0 clamp(40px, 8vw, 80px);
  width: 100%;
}

/* Logo kare (Eski tarz, kaldırıldı - yerine ağaç SVG eklendi) */
.s1-logo-container {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.kiosk-logo-dikey {
  width: clamp(380px, 55vw, 600px);
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 12px;
}

/* Ayırıcı */
.s1-divider {
  display: flex; align-items: center; gap: 24px;
}
.s1-line {
  height: 1px; width: clamp(60px, 10vw, 120px);
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
}
.s1-diamond {
  width: 10px; height: 10px;
  background: var(--gold); transform: rotate(45deg);
}

/* Slogan blok */
.s1-slogans {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.kiosk-tagline {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 52px); font-weight: 600; font-style: italic;
  color: var(--gold); letter-spacing: -.02em;
}
.s1-sub-text {
  font-size: clamp(14px, 2.4vw, 26px); color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase;
}

/* Dokunma uyarısı */
.touch-prompt {
  margin-top: 60px;
}
.start-btn {
  background: transparent;
  border: none;
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(20px, 3.5vw, 36px);
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  letter-spacing: .05em;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
}

/* Versiyon alt metni */
.s1-version {
  position: absolute; bottom: 80px;
  font-size: 20px; color: rgba(107,107,128,.5);
  letter-spacing: .08em; text-transform: uppercase;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   EKRAN 2 — 8 BUTONLU TEMA SEÇİMİ  (1080 × 1920)
   Üstte başlık (yaklaşık 280px), altında 4×2 grid
═══════════════════════════════════════════════════════════ */
#screen-2 {
  background: var(--bg2);
  justify-content: flex-start;
}

/* Başlık */
.s2-header {
  position: relative; z-index: 1;
  text-align: center;
  padding: clamp(40px, 6vh, 110px) 80px clamp(20px, 3vh, 60px);
  flex-shrink: 0;
  width: 100%;
}
.s2-step-label {
  font-size: clamp(14px, 2vw, 22px); font-weight: 600;
  color: var(--gold);
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 16px;
}
.s2-title {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(36px, 6vw, 72px); font-weight: 700;
  color: var(--text); line-height: 1.05;
}
.s2-subtitle {
  font-size: clamp(14px, 2.2vw, 28px); color: var(--muted);
  margin-top: 12px; line-height: 1.4;
}

/* 3 sütun × 2 satır grid (toplam 6 buton) */
.theme-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  align-content: start; /* Yukarı doğru yanaştırmak için */
  gap: clamp(10px, 1.5vh, 20px);
  padding: 0 clamp(16px, 3vw, 40px) clamp(20px, 3vh, 40px);
  width: 100%;
  max-width: 1020px; /* 3 butona uygun genişlik */
  margin: 0 auto;
}

.theme-btn {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(12px, 2vh, 24px) clamp(8px, 1.5vw, 16px);
  cursor: pointer;
  position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .2s;
  aspect-ratio: 1 / 1.08; /* Kareye yakın şık oran */
  width: 100%;
}
.theme-btn:active              { transform: scale(.98); }
.theme-btn.selected {
  box-shadow: 0 0 30px rgba(212, 204, 164, 0.25);
  border-color: var(--gold-dark);
}

.theme-btn-icon {
  width: clamp(60px, 10vw, 100px);
  height: clamp(60px, 10vw, 100px);
  margin-bottom: clamp(6px, 1vh, 12px);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
  border-radius: 8px; /* Karemsi, hafif yuvarlatılmış */
  border: 1px solid rgba(212, 204, 164, 0.4); /* Gold/krem ince çerçeve */
  padding: 4px; /* İkonun içeride düzgün durması için */
  background: rgba(0, 0, 0, 0.15);
}
.theme-btn-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.theme-btn.selected .theme-btn-icon { transform: scale(1.05); }

.theme-btn-name {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(16px, 2.5vw, 26px); font-style: italic; font-weight: 700;
  color: var(--gold-light); text-align: center;
  line-height: 1.2;
}

.theme-btn-num {
  position: absolute; top: clamp(8px, 1vh, 12px); right: clamp(8px, 1.2vw, 14px);
  font-size: clamp(10px, 1.4vw, 14px); font-family: 'Inter', sans-serif; font-weight: 600;
  color: rgba(212, 204, 164, 0.6);
}

/* Dönem etiketi */
.theme-btn-era {
  font-family: 'Inter', sans-serif;
  font-size: clamp(10px, 1.4vw, 13px); font-weight: 500;
  color: var(--muted);
  margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* İç divider */
.theme-btn-divider {
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 204, 164, 0.4), transparent);
  margin: clamp(8px, 1.5vh, 12px) 0;
  position: relative;
}
.theme-btn-divider::after {
  content: '';
  position: absolute;
  top: -1.5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; background: rgba(212, 204, 164, 0.6);
  border-radius: 50%;
}

/* Menü yazıları */
.theme-btn-menu-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 1.8vw, 16px); font-weight: 700; color: var(--gold-light);
  margin-bottom: 2px; text-align: center;
}
.theme-btn-menu-desc {
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 1.3vw, 12px); font-weight: 400; color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* Yakında — placeholder butonlar */
.theme-btn--placeholder {
  opacity: .45;
  filter: grayscale(.6);
}
.theme-btn--placeholder .theme-btn-name { font-size: 20px; }

/* Flash ring */
@keyframes flashRing {
  0%   { transform: scale(0); opacity: .6; }
  100% { transform: scale(4); opacity: 0; }
}
.theme-btn .flash-ring {
  position: absolute;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,.35) 0%, transparent 70%);
  pointer-events: none; opacity: 0;
}
.theme-btn.flash .flash-ring { animation: flashRing .55s ease-out forwards; }

/* ═══════════════════════════════════════════════════════════
   EKRAN 3 — KAMERA + GERİ SAYIM  (1080 × 1920)
   Tam ekran kamera görüntüsü + üstünde overlay
═══════════════════════════════════════════════════════════ */
#screen-3 { background: #000; justify-content: center; }

.camera-preview {
  position: absolute; inset: 0; overflow: hidden;
}
#kiosk-video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}

/* Köşe çerceveleri */
.cam-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.cam-corner {
  position: absolute;
  width: 100px; height: 100px;
  border-color: rgba(201,169,110,.7);
  border-style: solid; border-width: 0;
}
.cam-corner-tl { top: 120px;  left: 60px;  border-top-width: 4px; border-left-width: 4px;  border-radius: 6px 0 0 0; }
.cam-corner-tr { top: 120px;  right: 60px; border-top-width: 4px; border-right-width: 4px; border-radius: 0 6px 0 0; }
.cam-corner-bl { bottom: 300px; left: 60px;  border-bottom-width: 4px; border-left-width: 4px;  border-radius: 0 0 0 6px; }
.cam-corner-br { bottom: 300px; right: 60px; border-bottom-width: 4px; border-right-width: 4px; border-radius: 0 0 6px 0; }

/* Scan çizgisi */
.cam-scanline {
  position: absolute; left: 60px; right: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.7), transparent);
  animation: scanMove 2.8s linear infinite;
  z-index: 3; pointer-events: none;
}
@keyframes scanMove {
  0%   { top: 120px;  opacity: 1; }
  88%  { opacity: 1; }
  94%  { opacity: 0;  top: calc(100% - 300px); }
  95%  { top: 120px;  opacity: 0; }
  100% { top: 120px;  opacity: 1; }
}

/* Hizalama Silüeti */
.cam-silhouette {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(900px, 90vw, 1100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(201, 169, 110, 0.45);
  z-index: 4;
  pointer-events: none;
  animation: silhouettePulse 2.5s ease-in-out infinite;
}
.cam-silhouette svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 15px rgba(201, 169, 110, 0.25));
}
.cam-silhouette-text {
  margin-top: clamp(16px, 2vh, 32px);
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 600;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(45, 54, 36, 0.7);
  padding: clamp(8px, 1.2vh, 14px) clamp(20px, 3vw, 36px);
  border-radius: 100px;
  border: 1px solid rgba(201, 169, 110, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes silhouettePulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

/* Geri sayım overlay */
.countdown-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  pointer-events: none;
}
.countdown-number {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: 380px; font-weight: 700;
  color: var(--gold); line-height: .85;
  text-shadow: 0 0 100px rgba(201,169,110,.7);
  animation: numPop .35s cubic-bezier(.22,1,.36,1);
}
@keyframes numPop {
  from { transform: scale(1.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.countdown-label {
  font-size: 36px; color: rgba(240,236,229,.6);
  letter-spacing: .14em; text-transform: uppercase;
  margin-top: 32px;
}

/* Flaş beyaz */
.capture-flash {
  position: absolute; inset: 0; z-index: 20;
  background: #fff; opacity: 0; pointer-events: none;
  transition: opacity .08s ease;
}
.capture-flash.go { opacity: 1; }

/* İşlem loading */
.processing-overlay {
  position: absolute; inset: 0; z-index: 15;
  background: rgba(7,7,15,.94);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 48px;
  display: none;
}
.proc-spinner {
  width: 120px; height: 120px;
  border: 4px solid rgba(201,169,110,.12);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.proc-title {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: 52px; font-weight: 600;
  color: var(--text); text-align: center;
}
.proc-sub  { font-size: 30px; color: var(--muted); text-align: center; }
.proc-hint { font-size: 22px; color: rgba(107,107,128,.55); text-align: center; }

/* Alt bilgi çubuğu */
.cam-info-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 8;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 100%);
  padding: 80px 80px 100px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.cam-theme-chip {
  background: rgba(201,169,110,.18);
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 100px;
  padding: 18px 40px;
  font-size: 26px; font-weight: 600; color: var(--gold);
}
.cam-instruction {
  font-size: 24px; color: rgba(240,236,229,.45);
  text-align: right; line-height: 1.4; max-width: 380px;
}

/* Kamera hatası */
.cam-error {
  position: absolute; inset: 0; z-index: 20;
  background: var(--bg);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 32px; text-align: center;
  padding: 100px 100px;
  display: none;
}
.cam-error-icon  { font-size: 100px; }
.cam-error-title { font-size: 48px; font-weight: 700; color: var(--red); }
.cam-error-msg   { font-size: 28px; color: var(--muted); max-width: 700px; line-height: 1.5; }
.cam-retry-btn {
  padding: 32px 80px;
  background: var(--gold);
  border: none; border-radius: var(--r);
  font-size: 30px; font-weight: 700; color: #000;
  cursor: pointer; transition: transform .12s, box-shadow .2s;
}
.cam-retry-btn:active { transform: scale(.96); }
.cam-back-btn {
  padding: 28px 80px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  font-size: 26px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: background .2s;
}

/* ═══════════════════════════════════════════════════════════
   EKRAN 4 — SONUÇ + QR  (1080 × 1920)
   YALNIZCA DİKEY DÜZEN:
   - Üst ~55% → sonuç görseli
   - Alt ~45% → QR + geri sayım
═══════════════════════════════════════════════════════════ */
#screen-4 {
  background: var(--bg);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
}


/* Dikey scroll sarmalayıcı */
.s4-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 32px);
  padding: clamp(24px, 4vh, 56px) clamp(32px, 5vw, 80px) clamp(24px, 4vh, 56px);
  width: 100%;
  min-height: 100%;
  position: relative; z-index: 1;
  box-sizing: border-box;
}

/* Başarı rozeti */
.s4-badge {
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 100px;
  padding: clamp(8px, 1.2vh, 14px) clamp(20px, 3vw, 40px);
  font-size: clamp(13px, 1.8vw, 22px); font-weight: 700; color: var(--green);
  letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.s4-badge-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.2;} }

/* Tema etiketi */
.s4-theme-label {
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 2vw, 20px); font-weight: 500;
  color: rgba(240,236,229,.8);
  text-align: center;
  letter-spacing: .02em;
}

/* ── ALTIN ÇERÇEVELİ GÖRSEL KARTI ── */
.s4-image-card {
  position: relative;
  width: min(100%, 480px);        /* kart genişliği — ortalı */
  aspect-ratio: 3 / 4;            /* portre oran: 3:4 */
  border-radius: clamp(16px, 3vw, 32px);
  overflow: hidden;
  border: 2px solid rgba(201,169,110,.5);
  box-shadow:
    0 0  60px rgba(201,169,110,.25),
    0 0 120px rgba(201,169,110,.10),
    0 20px  60px rgba(0,0,0,.5);
  flex-shrink: 0;
}
#result-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Görsel üzerine binen etiket/hashtag çubuğu */
.s4-overlay-badge-row {
  position: absolute;
  bottom: clamp(14px, 2.2vh, 26px);
  left: clamp(14px, 2.2vw, 26px);
  right: clamp(14px, 2.2vw, 26px);
  z-index: 20; /* Resmin üzerine binmesi için z-index yükseltildi */
  display: flex;
  border: 2px solid #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.s4-overlay-badge-theme {
  background-color: #5C2317; /* Resimdeki kahverengi tonu */
  flex: 4;
  text-align: center;
  color: #F0ECE5;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 2vw, 20px);
  padding: clamp(10px, 1.5vh, 18px) 8px;
  border-right: 2.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s4-overlay-badge-hashtag {
  background-color: #5C2317; /* Resimdeki kahverengi tonu */
  flex: 6;
  text-align: center;
  color: #F0ECE5;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 24px);
  padding: clamp(10px, 1.5vh, 18px) 8px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Altın arka plan glow */
.s4-card-glow {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(201,169,110,.08) 0%, transparent 50%);
  pointer-events: none; z-index: 1;
}

/* Köşe dekorasyonları */
.s4-card-corner {
  position: absolute;
  width: clamp(20px, 4vw, 40px);
  height: clamp(20px, 4vw, 40px);
  border-color: var(--gold);
  border-style: solid;
  z-index: 2;
}
.s4-card-corner-tl { top: 10px; left: 10px;  border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.s4-card-corner-tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.s4-card-corner-bl { bottom: 10px; left: 10px;  border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.s4-card-corner-br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

/* ── #tasteofanatolia Hashtag Bandı ── */
.s4-hashtag-band {
  width: min(100%, 480px);
  background: var(--card-bg);
  border-radius: clamp(8px, 1.5vw, 14px);
  padding: clamp(10px, 1.5vh, 18px) clamp(16px, 3vw, 32px);
  text-align: center;
  margin-top: -8px;
}
.s4-hashtag {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(24px, 5vw, 44px);
  font-weight: 700;
  font-style: italic;
  color: var(--text);
  letter-spacing: -.01em;
}

/* ── QR + Yemek Bilgisi yan yana satır ── */
.s4-info-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 2.5vw, 24px);
  width: 100%;
  background: var(--card-bg);
  border-radius: clamp(12px, 2vw, 20px);
  padding: clamp(12px, 2vh, 24px);
}
.qr-wrapper {
  background: #fff;
  border-radius: clamp(8px, 1.2vw, 14px);
  padding: clamp(6px, 1vw, 12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  flex-shrink: 0;
}
#kiosk-qr canvas,
#kiosk-qr img {
  display: block;
  border-radius: 4px;
  width:  clamp(80px, 14vw, 140px) !important;
  height: clamp(80px, 14vw, 140px) !important;
}

/* Orta metin */
.s4-info-text {
  display: flex; flex-direction: column; gap: clamp(4px, 0.8vh, 8px);
  flex: 1; text-align: left;
}
.s4-info-intro {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(12px, 1.8vw, 18px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.s4-info-food {
  font-size: clamp(11px, 1.5vw, 16px);
  color: var(--muted);
  line-height: 1.4;
}
.s4-info-food strong {
  color: var(--text);
  font-weight: 700;
}
.s4-info-actions {
  font-size: clamp(10px, 1.3vw, 14px);
  color: rgba(255,255,255,.5);
  line-height: 1.4;
  margin-top: 2px;
}
.s4-info-actions strong {
  color: var(--gold);
}

/* Yemek görseli */
.s4-food-img-wrap {
  flex-shrink: 0;
  width: clamp(60px, 12vw, 100px);
  height: clamp(60px, 12vw, 100px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.2);
}
.s4-food-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Geri sayım bar */
.s4-countdown-wrap {
  width: 100%; flex-shrink: 0;
  display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px);
}
.s4-cd-row {
  display: flex; align-items: center;
  justify-content: space-between;
  font-size: clamp(13px, 1.8vw, 20px); color: var(--muted);
}
.s4-countdown-num {
  font-size: clamp(14px, 2vw, 24px); font-weight: 700; color: var(--gold);
}
.s4-prog-track {
  width: 100%; height: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 3px; overflow: hidden;
}
.s4-prog-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 3px;
  transition: width 1s linear;
}

/* Ana sayfaya dön butonu */
.s4-restart-btn {
  width: 100%; flex-shrink: 0;
  padding: clamp(14px, 2.2vh, 32px);
  background: rgba(201,169,110,.1);
  border: 1.5px solid rgba(201,169,110,.3);
  border-radius: var(--r);
  font-size: clamp(14px, 2vw, 26px); font-weight: 600; color: var(--gold);
  cursor: pointer; text-align: center;
  transition: background .2s, border-color .2s, transform .12s;
}
.s4-restart-btn:active { transform: scale(.97); }

/* ── Gizli canvas ──────────────────────────────────────── */
#kiosk-canvas { display: none; }

/* ── Fade-up entry animasyonları ───────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-1 { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .1s  both; }
.anim-2 { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .25s both; }
.anim-3 { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .4s  both; }
.anim-4 { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .55s both; }
.anim-5 { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .7s  both; }
.anim-6 { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .85s both; }

/* ═══════════════════════════════════════════════════════════
   CİNSİYET SEÇİMİ OVERLAY
   Tema seçildikten sonra tüm ekranın üstüne açılır
═══════════════════════════════════════════════════════════ */
.gender-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .35s cubic-bezier(.4,0,.2,1);
}
.gender-overlay.active {
  display: flex;
  opacity: 1;
}

/* Arka plan orb'ları */
.gender-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.gender-bg-orb-1 {
  width: 700px; height: 700px;
  top: -200px; right: -150px;
  background: radial-gradient(circle, rgba(201,169,110,.16) 0%, transparent 70%);
}
.gender-bg-orb-2 {
  width: 600px; height: 600px;
  bottom: -150px; left: -100px;
  background: radial-gradient(circle, rgba(201,169,110,.1) 0%, transparent 70%);
}

/* İçerik wrapper */
.gender-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 48px);
  padding: 0 clamp(40px, 8vw, 120px);
  width: 100%; text-align: center;
}

/* Adım etiketi */
.gender-step {
  font-size: clamp(14px, 2vw, 22px); font-weight: 600;
  color: var(--gold); letter-spacing: .16em; text-transform: uppercase;
}

/* Seçilen tema adı */
.gender-theme-label {
  font-size: clamp(14px, 2.2vw, 26px);
  color: rgba(201,169,110,.65);
  letter-spacing: .06em;
}

/* Başlık */
.gender-title {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(42px, 7vw, 88px); font-weight: 700;
  color: var(--text); line-height: 1.05;
}

/* Alt açıklama */
.gender-sub {
  font-size: clamp(14px, 2vw, 26px);
  color: var(--muted); line-height: 1.4;
  max-width: 700px;
}

/* İki büyük kart - Dikey */
.gender-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 40px);
  width: 100%;
  max-width: 600px;
}

.gender-card {
  position: relative; overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vh, 40px) 40px;
  display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 48px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .25s;
}
.gender-card:active { transform: scale(.98); }

/* Seçildi durumu */
.gender-card.selected {
  box-shadow: 0 0 60px rgba(255,255,255,.2);
}

.gender-card-icon {
  width: clamp(60px, 12vw, 120px);
  height: clamp(60px, 12vw, 120px);
  color: #fff;
}

.gender-card-text {
  display: flex; flex-direction: column;
  align-items: flex-start; text-align: left;
}
.gender-card-name {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(36px, 6vw, 72px); font-style: italic; color: #fff;
}
.gender-card-hint {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(20px, 3.5vw, 36px); font-style: italic; color: #fff;
}

/* Geri butonu */
.gender-back-btn {
  margin-top: 24px;
  background: #5b6846;
  border: none;
  border-radius: 12px;
  padding: 16px 40px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 500;
  cursor: pointer;
}

/* Arka plan glow efekti */
.gender-card-glow {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,169,110,.12) 0%, transparent 60%);
  opacity: 0; transition: opacity .25s;
}
.gender-card.selected .gender-card-glow { opacity: 1; }

/* Cinsiyet sembolü */
.gender-card-icon {
  font-size: clamp(64px, 12vw, 140px);
  line-height: 1;
  color: rgba(240,236,229,.25);
  transition: color .25s, transform .3s cubic-bezier(.22,1,.36,1);
  font-family: 'Inter', sans-serif; font-weight: 300;
}
.gender-card.selected .gender-card-icon {
  color: var(--gold);
  transform: scale(1.1);
}

/* İsim */
.gender-card-name {
  font-family: 'Fedra Serif A Pro', 'FedraSerifAPro', 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 60px); font-weight: 700;
  color: var(--text); line-height: 1;
  transition: color .25s;
}
.gender-card.selected .gender-card-name { color: var(--gold); }

/* Alt İngilizce ipucu */
.gender-card-hint {
  font-size: clamp(11px, 1.6vw, 18px);
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
}

/* Onay işareti */
.gender-check {
  position: absolute; top: 20px; right: 24px;
  width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px);
  border-radius: 50%;
  background: var(--gold);
  color: #000; font-size: clamp(14px, 2vw, 22px); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s, transform .25s cubic-bezier(.22,1,.36,1);
}
.gender-card.selected .gender-check {
  opacity: 1; transform: scale(1);
}

/* Geri butonu */
.gender-back-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: clamp(16px, 2.5vh, 28px) clamp(40px, 6vw, 80px);
  font-size: clamp(16px, 2.2vw, 24px); font-weight: 500;
  color: var(--muted); cursor: pointer;
  transition: border-color .2s, color .2s, transform .12s;
}
.gender-back-btn:hover  { border-color: rgba(255,255,255,.2); color: var(--text); }
.gender-back-btn:active { transform: scale(.97); }

/* ═══════════════════════════════════════════════════════════
   DİL SEÇİCİ — Language Selector
   Tüm ekranlarda sağ üst köşede sabit
═══════════════════════════════════════════════════════════ */

.lang-selector {
  position: fixed;
  top: clamp(24px, 3vh, 60px);
  right: clamp(24px, 4vw, 60px);
  z-index: 100;
  font-family: 'Inter', sans-serif;
}

.lang-current {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(45, 54, 36, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  padding: clamp(16px, 2.2vh, 26px) clamp(24px, 3.5vw, 40px);
  color: var(--text);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .12s;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.lang-current:hover {
  background: rgba(45, 54, 36, 0.98);
  border-color: rgba(255, 255, 255, 0.6);
}
.lang-current:active {
  transform: scale(.96);
}

.lang-code {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: .06em;
}
.lang-arrow {
  font-size: clamp(16px, 2vw, 24px);
  opacity: .7;
  transition: transform .25s;
}

/* Dropdown açıkken ok yukarı döner */
.lang-dropdown.open + .lang-current .lang-arrow,
.lang-selector:has(.lang-dropdown.open) .lang-arrow {
  transform: rotate(180deg);
}

/* Dropdown */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 280px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(16px, 2vw, 24px);
  padding: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.96);
  transition: opacity .2s, visibility .2s, transform .2s cubic-bezier(.22,1,.36,1);
}
.lang-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: clamp(16px, 2.2vh, 26px) clamp(24px, 3vw, 36px);
  background: transparent;
  border: none;
  border-radius: clamp(10px, 1.5vw, 16px);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
}
.lang-option:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.lang-option.active {
  background: rgba(201, 169, 110, 0.25);
  color: var(--gold);
  font-weight: 700;
}

.lang-opt-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Slogan ve Başlangıç Butonu Dil Geçiş Animasyonları */
.kiosk-tagline, .start-btn {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
  opacity: 1;
}

.kiosk-tagline.text-fade-out, .start-btn.text-fade-out {
  opacity: 0;
  transform: translateY(-12px);
}

.kiosk-tagline.text-fade-in, .start-btn.text-fade-in {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: none !important;
}

/* ── START SCREEN LANGUAGE BUTTONS ───────────────────────── */
.s1-lang-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  margin-top: clamp(20px, 3vh, 48px);
  width: 100%;
}

.s1-lang-btn {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  background: rgba(45, 54, 36, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: clamp(12px, 1.8vh, 22px) clamp(24px, 3.5vw, 44px);
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}

.s1-lang-btn:hover {
  background: rgba(45, 54, 36, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
}

.s1-lang-btn:active {
  transform: scale(0.96);
}

/* Active language button in cycling */
.s1-lang-btn.active {
  background: rgba(201, 169, 110, 0.25);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 25px rgba(201, 169, 110, 0.35);
  animation: activeLangPulse 2.5s infinite ease-in-out;
}

.s1-lang-dot {
  width: clamp(10px, 1.4vw, 16px);
  height: clamp(10px, 1.4vw, 16px);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.s1-lang-btn.active .s1-lang-dot {
  transform: scale(1.2);
  box-shadow: 0 0 8px currentColor;
}

.s1-lang-text {
  letter-spacing: 0.02em;
}

@keyframes activeLangPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(201, 169, 110, 0.35);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 45px rgba(201, 169, 110, 0.7);
  }
}