/* 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} }

/* Modal açıkken arka plan kaymasın */
body.modal-open { overflow:hidden; }

/* Alt ürün modalı: head sabit + orta gövde kayar + footer (İptal/Tamam) alta yapışık */
.modal-card.sub-modal { display:flex; flex-direction:column; padding:0; overflow:hidden; max-height:90vh; }
.sub-modal-head { flex:0 0 auto; padding:1.25rem 1.5rem .75rem; }
.sub-modal-body { flex:1 1 auto; overflow-y:auto; padding:0 1.5rem 1rem; }
.sub-modal-foot {
  flex:0 0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem;
  padding:1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top:1px solid #E5E7EB; background:#fff;
  box-shadow:0 -4px 16px rgba(17,24,39,.06);
}

/* 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%;
}

/* Wizard action bar (Geri + Devam/Siparişi Ver) */
.wizard-actions { display:flex; align-items:center; gap:.75rem; margin:1.5rem auto 0; max-width:42rem; }
.wizard-actions #btn-back { flex:0 0 auto; }
.wizard-actions #btn-next { flex:1 1 auto; }
/* 1. adımda geri gizliyken Devam butonu tüm genişliği alır */
.wizard-actions #btn-back.hidden { display:none; }

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

  /* Yatay slide yerine sadece aktif adımı göster → yükseklik içeriğe göre dinamik,
     kısa adımlarda dev boşluk oluşmaz. translateX inline style'ı !important ile ezilir. */
  .wizard-track { width:100% !important; transform:none !important; transition:none; display:block; }
  .wizard-step { width:100% !important; padding:.5rem 0; display:none; }
  .wizard-step.is-active { display:block; animation: stepFade .25s ease; }
  @keyframes stepFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

  /* İç scroll kapalı: gridler tam açılsın, sayfanın kendisi kaysın (Tailwind max-h/overflow ezilir) */
  #urun-grid, #tasarim-grid, #photo-grid {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  /* Aksiyon barını ekranın altına sabitle; içerik altta kalmasın diye karta boşluk bırak */
  #wizard-root { padding-bottom: 5.5rem; }
  .wizard-actions {
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    margin:0; max-width:none;
    background:#fff;
    border-top:1px solid #E5E7EB;
    box-shadow:0 -4px 16px rgba(17,24,39,.08);
    padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  }
  .wizard-actions .btn { padding-top:.85rem; padding-bottom:.85rem; }
}