:root{
  --red:#b00000;
  --bg:#f5f6fa;
  --card:#ffffff;
  --text:#15181e;
  --muted:#6b7280;
  --border:rgba(0,0,0,.10);
  --shadow: 0 14px 45px rgba(0,0,0,.10);
  --shadow2: 0 8px 26px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(176,0,0,.08), transparent 55%),
    radial-gradient(1000px 600px at 100% 20%, rgba(176,0,0,.06), transparent 55%),
    var(--bg);
  color:var(--text);
}

/* --- Layout --- */
.wrap{
  max-width:620px;
  margin:auto;
  padding:22px 18px 40px;
}

/* --- Card --- */
.card{
  background:linear-gradient(180deg, rgba(176,0,0,.04), transparent 30%), var(--card);
  border:1px solid rgba(176,0,0,.10);
  padding:20px;
  border-radius:20px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.brandRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

h1{
  margin:0;
  font-size:28px;
  letter-spacing:-0.6px;
}

.sub{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
}

.badge{
  background:rgba(176,0,0,.10);
  color:var(--red);
  font-weight:900;
  font-size:12px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(176,0,0,.20);
  white-space:nowrap;
}

/* --- Form --- */
label{
  font-size:13px;
  color:#3f4652;
  display:block;
  margin:14px 0 6px;
  font-weight:700;
}

.miniTitle{
  margin:18px 0 10px;
  font-size:14px;
  color:#111827;
  font-weight:900;
  letter-spacing:-.2px;
}

/* Icon input group */
.inputWrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow: 0 0 0 0 rgba(176,0,0,0);
  transition:.18s ease;
}

.inputWrap:focus-within{
  border-color: rgba(176,0,0,.45);
  box-shadow: 0 0 0 4px rgba(176,0,0,.10);
}

.inputWrap .icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: rgba(176,0,0,.06);
  border:1px solid rgba(176,0,0,.12);
  font-size:16px;
  flex:0 0 auto;
}

/* Inputs inside */
.inputWrap input,
.inputWrap select,
.inputWrap textarea{
  width:100%;
  border:0;
  outline:none;
  font-size:14px;
  background:transparent;
  padding:2px 0;
  margin:0;
  color:var(--text);
}

.inputWrap textarea{
  min-height:90px;
  resize:vertical;
}

.textareaWrap{
  align-items:flex-start;
}

/* Base inputs used outside inputWrap (seatPick) */
input,textarea,select{
  font-family:inherit;
}

.hint{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

/* --- Seat pick --- */
.seatPick{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
}

.seatPick input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
  background:#fff;
}

.seatPick input:focus{
  border-color: rgba(176,0,0,.45);
  box-shadow: 0 0 0 4px rgba(176,0,0,.10);
}

.seatPick button{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(176,0,0,.30);
  background:#fff;
  color:var(--red);
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
  white-space:nowrap;
}
.seatPick button:hover{background:rgba(176,0,0,.06)}
.seatPick button:active{transform:scale(.98)}

/* --- Submit Button --- */
.btn{
  width:100%;
  margin-top:16px;
  padding:15px 14px;
  background: linear-gradient(135deg, #b00000, #d10000);
  color:#fff;
  border:0;
  border-radius:16px;
  font-weight:1000;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: 0 14px 30px rgba(176,0,0,.18);
  transition:.18s ease;
}
.btn:hover{filter:brightness(.98)}
.btn:active{transform:scale(.99)}
.btn:disabled{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}

/* Spinner */
.spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: spin 1s linear infinite;
}
@keyframes spin{
  to { transform: rotate(360deg); }
}

/* msg */
#msg{
  margin-top:12px;
  font-weight:800;
  font-size:13px;
  color:var(--muted);
}

/* --- Toast --- */
.toast{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:99999;
  padding:12px 14px;
  background:#111827;
  color:#fff;
  border-radius:14px;
  box-shadow: var(--shadow2);
  max-width:min(560px,calc(100% - 28px));
  font-size:14px;
  line-height:1.35;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* --- Radio (Premium Safari Safe) --- */
.radioRow{
  display:flex;
  gap:12px;
  margin-top:6px;
}
.radioItem{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 10px;
  border-radius:18px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer;
  user-select:none;
  min-height:72px;
  transition:.18s ease;
}
.radioItem input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.fakeRadio{
  width:22px;
  height:22px;
  border-radius:50%;
  border:3px solid #9aa1aa;
  display:inline-block;
}
.radioText{
  font-weight:1000;
  font-size:15px;
  line-height:1.1;
  text-align:center;
  color:#111827;
}

/* checked style */
.radioItem:has(input:checked){
  border-color: rgba(176,0,0,.26);
  background: rgba(176,0,0,.07);
  box-shadow: 0 0 0 4px rgba(176,0,0,.07);
}
.radioItem:has(input:checked) .fakeRadio{
  border-color: var(--red);
  box-shadow: inset 0 0 0 6px var(--red);
}

/* --- Modal / Seat Modal --- */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:9999;
}

.modalBox{
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  padding:16px;
  border-radius:20px;
  width:95%;
  max-width:520px;
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.08);
}

.modalHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.modalHead b{
  font-size:14px;
  font-weight:1000;
}

.modalHead button{
  border:0;
  background:#f2f2f2;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
}

.bus{
  margin-top:12px;
  background:rgba(0,0,0,.04);
  border-radius:18px;
  padding:14px;
  overflow:auto;
  border:1px solid rgba(0,0,0,.06);
}

.row{
  display:flex;
  gap:8px;
  margin-bottom:8px;
  align-items:center;
  flex-wrap:nowrap;
}
.row:last-child{margin-bottom:0}

.seat{
  width:42px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  flex:0 0 auto;
  transition:.15s ease;
}
.seat:hover{transform:translateY(-1px)}
.seat.selected{
  background: linear-gradient(135deg, #b00000, #d10000);
  color:#fff;
  border-color:rgba(176,0,0,.35);
}

.wheel{
  width:42px;
  height:38px;
  border-radius:12px;
  background:#e9e9e9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  border:1px solid rgba(0,0,0,.10);
  flex:0 0 auto;
}

/* Door box */
.door{
  width:42px;
  height:38px;
  border-radius:12px;
  border:2px dashed rgba(0,0,0,.35);
  background:rgba(255,255,255,.70);
  color:#4b5563;
  font-size:10px;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:not-allowed;
  flex:0 0 auto;
  user-select:none;
}

/* --- Popup --- */
.popupBg{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:99999;
}

.popupBox{
  width:min(520px,100%);
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-radius:22px;
  padding:18px;
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.08);
}

.popupHead{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  font-size:16px;
  font-weight:1000;
}

.popupBody{
  font-size:14px;
  color:#111827;
  line-height:1.45;
  margin-bottom:14px;
  text-align:center;
}

.popupOk{
  width:100%;
  padding:14px;
  border:0;
  background: linear-gradient(135deg, #b00000, #d10000);
  color:#fff;
  border-radius:16px;
  font-weight:1000;
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(176,0,0,.18);
}
.popupOk:hover{filter:brightness(.98)}
.popupOk:active{transform:scale(.99)}

/* --- Responsive --- */
@media(max-width:520px){
  .seat,.wheel,.door{width:40px;height:36px}
  h1{font-size:26px}
  .badge{padding:8px 10px}
}

/* --- WhatsApp Floating Button --- */
.waFloat{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:99999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
  transition:.18s ease;
  border:1px solid rgba(255,255,255,.25);
}

.waFloat:hover{
  transform:translateY(-2px);
  filter:brightness(1.02);
}

.waFloat:active{
  transform:translateY(0px) scale(.98);
}

.waIcon{
  width:34px;
  height:34px;
  border-radius:12px;
  background:rgba(255,255,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.waText{
  font-size:14px;
  letter-spacing:.2px;
}

@media(max-width:520px){
  .waText{display:none;} /* mobilde sadece ikon kalsın */
  .waFloat{padding:12px;}
}