:root { 
  --efes-blue:#0047ab; 
  --efes-blue-glow:rgba(0,71,171,0.6); 
  --bg-black:#0a0a0a; 
  --card-bg:#161616; 
  --success-green:#28a745; 
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  /* PC için senin Photoshop ile açtığın geniş görsel */
  background: 
    linear-gradient(rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.8)),
    url('/assets/neon.png') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

/* Header Stilleri */
.reserva-header {
  text-align: center;
  padding: 20px 0 40px;
  width: 100%;
}

.reserva-logo {
  width: 70px;
  height: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 10px var(--efes-blue-glow));
}

.logo-text {
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 15px var(--efes-blue-glow);
}

.subtitle {
  font-size: 0.85em;
  color: #888;
  margin-top: 5px;
  letter-spacing: 3px;
}

/* Form Konteynırı */
.container {
  width: 100%;
  max-width: 600px;
  background: var(--card-bg);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid #222;
  position: relative;
  margin-top: -24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* Progress Bar */
.progress-bar { display:flex; justify-content:space-between; margin-bottom:40px; position:relative; }
.progress-bar::before { content:''; position:absolute; top:15px; left:0; right:0; height:2px; background:#333; z-index:0; }
.progress-step { width:35px; height:35px; border-radius:50%; background:#333; color:#666; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:0.9em; z-index:1; position:relative; transition:0.3s; }
.progress-step.active { background:var(--efes-blue); color:white; box-shadow:0 0 15px var(--efes-blue-glow); }
.progress-step.completed { background:var(--success-green); color:white; }

/* İçerik Akışı */
.step-content { display:none; animation:fadeIn .4s ease; }
.step-content.active { display:block; }
@keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

h2 { color:#fff; margin-bottom:10px; font-size:1.5em; border-left:4px solid var(--efes-blue); padding-left:15px; }
.step-desc { color:#888; margin-bottom:30px; font-size:.9em; padding-left:19px; }

/* Takvim Stilleri */
.calendar-wrapper { background:#1a1a1a; border-radius:12px; padding:20px; border:1px solid #333; }
.calendar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.calendar-header h3 { font-size:1.2em; color:#fff; }
.calendar-nav { background:none; border:none; color:var(--efes-blue); font-size:1.5em; cursor:pointer; padding:5px 10px; transition:.3s; }
.calendar-nav:hover { color:#fff; }
.calendar-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:10px; }
.calendar-weekday { text-align:center; color:#666; font-size:.85em; font-weight:600; padding:8px 0; }
.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.calendar-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:#222; border:2px solid #333; border-radius:8px; cursor:pointer; transition:.3s; font-weight:600; }
.calendar-day:hover:not(.disabled):not(.empty) { border-color:var(--efes-blue); }
.calendar-day.selected { background:var(--efes-blue); border-color:var(--efes-blue); box-shadow:0 0 15px var(--efes-blue-glow); color:white; }
.calendar-day.disabled { background:#1a1a1a; color:#444; cursor:not-allowed; border-color:#222; }
.calendar-day.empty { background:transparent; border:none; cursor:default; }
.calendar-day.today { border-color:var(--efes-blue); }

/* Saat Seçimi */
.time-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; max-height:400px; overflow-y:auto; padding:5px; }
.time-grid::-webkit-scrollbar { width:6px; }
.time-grid::-webkit-scrollbar-track { background:#1a1a1a; border-radius:10px; }
.time-grid::-webkit-scrollbar-thumb { background:#333; border-radius:10px; }
.time-btn { padding:15px; background:#1a1a1a; border:2px solid #333; border-radius:10px; color:#fff; font-weight:600; cursor:pointer; transition:.3s; text-align:center; font-size:.95em; }
.time-btn:hover { border-color:var(--efes-blue); }
.time-btn.selected { background:var(--efes-blue); border-color:var(--efes-blue); box-shadow:0 0 15px var(--efes-blue-glow); }
.time-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; border-color: #222; color: #666; background: #151515; }

/* Alan Seçimi */
.area-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:15px; margin-bottom:20px; }
.area-btn { padding:30px 20px; background:#1a1a1a; border:2px solid #333; border-radius:10px; color:#fff; font-weight:700; font-size:.95em; cursor:pointer; transition:.3s; text-align:center; text-transform:uppercase; }
.area-btn:hover { border-color:var(--efes-blue); }
.area-btn.selected { background:var(--efes-blue); border-color:var(--efes-blue); box-shadow:0 0 15px var(--efes-blue-glow); }
.area-icon { font-size:2em; margin-bottom:10px; }

/* Form Elemanları */
.form-group { margin-bottom:20px; }
label { display:block; margin-bottom:8px; color:#aaa; font-size:.9em; font-weight:600; }
input[type="text"], input[type="tel"], select, textarea { width:100%; padding:15px; background:#1a1a1a; border:2px solid #333; border-radius:10px; color:#fff; font-size:1em; transition:.3s; font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--efes-blue); box-shadow:0 0 10px var(--efes-blue-glow); }
textarea { resize:vertical; min-height:80px; }
.phone-group { display:grid; grid-template-columns:140px 1fr; gap:10px; }
.char-counter { text-align:right; font-size:.8em; color:#666; margin-top:5px; }

/* Özet Kartı */
.summary-card { background:#1a1a1a; padding:20px; border-radius:10px; margin-bottom:20px; border:1px solid #333; }
.summary-item { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #2a2a2a; }
.summary-item:last-child { border-bottom:none; }
.summary-label { color:#888; }
.summary-value { color:#fff; font-weight:700; }

/* Butonlar */
.btn-group { display:flex; gap:10px; margin-top:30px; }
.btn { flex:1; padding:15px; border:none; border-radius:10px; font-weight:700; font-size:1em; cursor:pointer; text-transform:uppercase; transition:.3s; }
.btn-back { background:#333; color:#fff; }
.btn-back:hover { background:#444; }
.btn-next { background:var(--efes-blue); color:#fff; box-shadow:0 0 15px var(--efes-blue-glow); }
.btn-next:hover:not(:disabled) { background:#0056d6; }
.btn-next:disabled { background:#333; color:#666; cursor:not-allowed; box-shadow:none; }

.back-link { text-align:center; margin-top:20px; }
.back-link a { color:#666; text-decoration:none; font-size:.9em; transition:.3s; }
.back-link a:hover { color:var(--efes-blue); }

.error-msg { background:rgba(220,53,69,0.2); border:1px solid #dc3545; color:#ff6b6b; padding:12px; border-radius:8px; margin-bottom:20px; font-size:.9em; display:none; }
.error-msg.show { display:block; animation:shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ------------------ RESPONSIVE TWEAKS ------------------ */

/* Büyük Ekranlar */
@media (min-width: 900px) {
  .container { padding: 20px; margin-top: 0; }
  .form-container-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
  .full-width { grid-column: span 2; }
  textarea { min-height: 60px; }
}

/* Tablet ve Telefon Genel */
@media (max-width: 700px) {
  .reserva-logo { width:64px; }
  .container { margin-top:-12px; padding:18px; }
  .logo-text { font-size:1.5rem; letter-spacing:2px; }
  h2 { font-size:1.1rem; }
  .time-grid { grid-template-columns:repeat(2,1fr); }
  .phone-group { grid-template-columns:120px 1fr; }
}

/* Telefon Özel - İSTEDİĞİN KRİTİK AYAR BURASI */
@media (max-width: 480px) {
  body {
    /* Mobilde o daralan görsel yerine orijinal, ortası kapalı görseli koyduk */
    background: 
      linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.85)),
      url('/assets/neon1.png') no-repeat center center fixed;
    background-size: cover;
  }
  .logo-text { font-size: 1.3rem; }
  .container { padding: 15px; }
  .area-grid { grid-template-columns: 1fr; } /* Mobilde alan butonları alt alta daha şık durur */
}