/* MUHAN — custom styles on top of Tailwind CDN */
:root { --primary:#9B1C2E; --primary-600:#871827; --accent:#F4D35E; }

/* Stepper connector */
.step-dot { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:9999px; font-weight:700; font-size:.875rem; transition:all .2s; }
.step-dot.active { background:var(--primary); color:#fff; }
.step-dot.done { background:var(--primary); color:#fff; }
.step-dot.idle { background:#E5E7EB; color:#6B7280; }
.step-label { font-size:.85rem; color:#6B7280; }
.step-label.active { color:var(--primary); font-weight:600; }
.step-connector { flex:1; height:2px; background:#E5E7EB; min-width:20px; }
.step-connector.done { background:var(--primary); }

/* Wizard slide viewport */
.wizard-viewport { overflow:hidden; }
.wizard-track { display:flex; width:500%; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.wizard-step { width:20%; flex-shrink:0; padding: 1rem .25rem; }

/* Product / design cards */
.pick-card { border:2px solid transparent; transition:all .2s; }
.pick-card:hover { transform:translateY(-2px); }
.pick-card.selected { border-color:#059669; box-shadow:0 0 0 4px rgba(5,150,105,.18), 0 6px 20px rgba(5,150,105,.15); }

/* Photo card */
.photo-card { position:relative; background:#fff; border:2px solid #E5E7EB; border-radius:12px; overflow:hidden; transition:border-color .2s, background-color .2s; }
.photo-card .thumb { aspect-ratio: 1/1; background:#F3F4F6; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.photo-card .thumb img { width:100%; height:100%; object-fit:cover; }
.photo-card .remove { position:absolute; top:8px; left:8px; width:28px; height:28px; border-radius:9999px; background:#DC2626; color:#fff; display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.photo-card.gender-k { border-color:#EC4899; background:#FDF2F8; }
.photo-card.gender-e { border-color:#3B82F6; background:#EFF6FF; }

.gender-pill { padding:.5rem .75rem; border:1px solid #E5E7EB; border-radius:8px; cursor:pointer; font-size:.875rem; flex:1; text-align:center; transition:all .15s; background:#fff; }
.gender-pill:hover { border-color:#CBD5E1; }
.gender-pill[data-g="K"].selected { border-color:#EC4899; background:#FCE7F3; color:#BE185D; font-weight:600; }
.gender-pill[data-g="E"].selected { border-color:#3B82F6; background:#DBEAFE; color:#1D4ED8; font-weight:600; }

/* Drop zone */
.dropzone { border:2px dashed #CBD5E1; border-radius:16px; padding:2rem 1rem; transition:all .15s; background:#F8FAFC; }
.dropzone.dragging { border-color:var(--primary); background:#FCEEF1; }

/* Modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(17,24,39,.55); backdrop-filter:blur(4px); z-index:90; display:flex; align-items:center; justify-content:center; padding:1rem; animation:fadeIn .2s; }
.modal-card { background:#fff; border-radius:16px; width:100%; max-width:560px; padding:1.5rem; max-height:90vh; overflow-y:auto; box-shadow:0 10px 40px rgba(0,0,0,.18); animation:slideUp .25s; }
.modal-card.lg { max-width:820px; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(10px); opacity:0} to{transform:translateY(0); opacity:1} }

/* Progress */
.progress { width:100%; height:10px; background:#E5E7EB; border-radius:9999px; overflow:hidden; }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-600)); transition:width .2s; border-radius:9999px; }

/* Status badges */
.badge { display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .75rem; border-radius:9999px; font-size:.8125rem; font-weight:600; }
.badge-warning { background:#FEF3C7; color:#B45309; }
.badge-info    { background:#DBEAFE; color:#1E40AF; }
.badge-success { background:#D1FAE5; color:#065F46; }
.badge-primary { background:#EDE9FE; color:#6D28D9; }
.badge-neutral { background:#F3F4F6; color:#374151; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.25rem; border-radius:10px; font-weight:600; transition:all .15s; cursor:pointer; border:1px solid transparent; font-size:.925rem; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--primary-600); }
.btn-primary:disabled { background:#D1D5DB; color:#9CA3AF; cursor:not-allowed; }
.btn-outline { background:#fff; border-color:#E5E7EB; color:#111827; }
.btn-outline:hover { background:#F9FAFB; }
.btn-ghost { background:transparent; color:#475569; }
.btn-ghost:hover { background:#F1F5F9; }
.btn-success { background:#059669; color:#fff; }
.btn-success:hover:not(:disabled) { background:#047857; }
.btn-secondary { background:#E5E7EB; color:#111827; border-color:#D1D5DB; }
.btn-secondary:hover:not(:disabled) { background:#D1D5DB; }

/* Inputs */
.input, .textarea { width:100%; padding:.7rem .9rem; border:1px solid #E5E7EB; border-radius:10px; font-size:.95rem; background:#fff; transition:border-color .15s, box-shadow .15s; }
.input:focus, .textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(155,28,46,.12); }
.input:disabled, .textarea:disabled { background:#F3F4F6; color:#9CA3AF; cursor:not-allowed; }
.label { display:block; font-size:.8125rem; font-weight:600; color:#374151; margin-bottom:.375rem; }
.label .req { color:var(--primary); }
.help { font-size:.75rem; color:#6B7280; margin-top:.25rem; }
.checkbox-row { display:inline-flex; align-items:center; gap:.5rem; margin-top:.5rem; font-size:.8125rem; color:#475569; cursor:pointer; user-select:none; }
.checkbox-row input { width:16px; height:16px; accent-color:var(--primary); }

/* Toast */
.toast { min-width:260px; padding:.875rem 1rem; border-radius:10px; color:#fff; font-size:.875rem; box-shadow:0 6px 20px rgba(0,0,0,.12); animation:slideIn .25s; }
.toast.success { background:#059669; }
.toast.error   { background:#DC2626; }
.toast.info    { background:#2563EB; }
@keyframes slideIn { from{transform:translateX(20px); opacity:0} to{transform:translateX(0); opacity:1} }

/* Utilities */
.scrollbar-thin::-webkit-scrollbar { width:8px; height:8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:4px; }

/* ---------- MUHAN LOADER (logolu bekleme animasyonu) ---------- */
.muhan-loader-wrap { display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:1rem 0 .25rem; }
.muhan-loader { position:relative; width:150px; height:150px; }
.muhan-loader-svg,
.muhan-loader-shimmer { position:absolute; inset:0; width:100%; height:100%; }
.muhan-loader-svg { transform: rotate(-90deg); }
.muhan-loader-svg .ml-bg { fill:none; stroke:#F7D0D8; stroke-width:5; }
.muhan-loader-svg .ml-fg {
  fill:none; stroke:var(--primary); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:282.74;        /* 2*π*45 */
  stroke-dashoffset:282.74;
  transition: stroke-dashoffset .35s cubic-bezier(.22,1,.36,1);
}
.muhan-loader-shimmer { animation: muhan-spin 1.6s linear infinite; }
.muhan-loader-shimmer .ml-sh {
  fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round;
  stroke-dasharray: 24 260;
  filter: drop-shadow(0 0 4px rgba(244,211,94,.55));
}
@keyframes muhan-spin { to { transform: rotate(360deg); } }

.muhan-loader-logo {
  position:absolute; inset:18px;
  border-radius:50%; overflow:hidden;
  background:var(--primary);
  box-shadow: 0 8px 24px rgba(155,28,46,.28), inset 0 0 0 2px rgba(255,255,255,.35);
  animation: muhan-breathe 2.4s ease-in-out infinite;
}
.muhan-loader-logo img { width:100%; height:100%; object-fit:cover; display:block; }
@keyframes muhan-breathe {
  0%,100% { transform:scale(1); box-shadow:0 6px 20px rgba(155,28,46,.25), inset 0 0 0 2px rgba(255,255,255,.3); }
  50%     { transform:scale(1.05); box-shadow:0 10px 30px rgba(155,28,46,.42), inset 0 0 0 2px rgba(255,255,255,.45); }
}

.muhan-loader-pct {
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
  padding-bottom: 6px;
}
.muhan-loader-pct span {
  background:#fff; color:var(--primary);
  border:2px solid var(--primary);
  border-radius:9999px; font-weight:800; font-size:.8125rem;
  padding:.125rem .55rem;
  box-shadow: 0 2px 6px rgba(155,28,46,.2);
  min-width: 48px; text-align:center;
}

.muhan-loader-title { font-weight:700; color:#111827; font-size:1.0625rem; text-align:center; margin-top:.25rem; }
.muhan-loader-sub   { color:#6B7280; font-size:.875rem; text-align:center; }
.muhan-loader-sub b { color:var(--primary); font-weight:700; }
.muhan-dots { display:inline-block; margin-left:2px; }
.muhan-dots i { font-style:normal; opacity:.3; animation: muhan-blink 1.4s infinite; display:inline-block; }
.muhan-dots i:nth-child(2) { animation-delay:.2s; }
.muhan-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes muhan-blink { 0%,80%,100% { opacity:.3; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } }

.muhan-loader-tip {
  margin-top:.25rem; font-size:.75rem; color:#94A3B8; text-align:center;
  padding:.375rem .625rem; background:#F8FAFC; border-radius:8px;
  border:1px solid #E2E8F0; max-width:100%;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .step-label { display:none; }
  .wizard-step { padding:.5rem 0; }
  .muhan-loader { width:130px; height:130px; }
}