/* track.html + admin.html — styles.css üzerine eklenir */
.app { max-width: 820px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) var(--gut) 80px; }
.app--wide { max-width: 1160px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 4vw, 32px); }
.card + .card { margin-top: 20px; }
.muted { color: var(--muted); }
.chip { display: inline-block; font: 12px/1 var(--px); letter-spacing: .06em; color: var(--accent); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }

/* ---------- lookup ---------- */
.lookup h1 { font-size: clamp(36px, 6vw, 56px); margin-bottom: 14px; }
.lookup form { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.lookup input {
  flex: 1 1 240px; padding: 15px 16px; font: 18px var(--px); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; outline: none;
}
.lookup input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244, 24, 44, .18); }
.lookup .err { color: #ff8a9a; margin: 14px 0 0; min-height: 1.5em; }

/* ---------- status hero ---------- */
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.order-head h1 { font-size: clamp(26px, 4vw, 36px); margin: 10px 0 4px; }
.status { margin-top: 28px; display: flex; gap: 22px; align-items: center; }
.status__icon { position: relative; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--plum); font: 20px var(--px); color: var(--cream); }
.status__icon::before, .status__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ripple 2.4s ease-out infinite; }
.status__icon::after { animation-delay: 1.2s; }
.status--done .status__icon { background: #2f6b45; }
.status--done .status__icon::before, .status--done .status__icon::after { display: none; }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.status__label { font-size: 14px; color: var(--muted); margin: 0; }
.status__title { font: 800 clamp(26px, 4.5vw, 38px)/1.1 var(--head); margin: 2px 0 6px; }
.status__desc { margin: 0; color: var(--muted); }

.meter { margin-top: 30px; }
.meter__bar { display: flex; gap: 6px; }
.meter__seg { flex: 1; height: 10px; border-radius: 99px; background: var(--surface2); overflow: hidden; position: relative; }
.meter__seg.done::after, .meter__seg.active::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left; animation: fill .7s ease-out both; animation-delay: calc(var(--i) * 90ms); }
.meter__seg.done::after { background: var(--accent); }
.meter__seg.active::after { background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, #ff6d8b 8px 16px); background-size: 22px 22px; animation: fill .7s ease-out both, stripes .8s linear infinite; animation-delay: calc(var(--i) * 90ms), 0s; }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes stripes { to { background-position: 22px 0; } }
.meter__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.meter__meta b { color: var(--ink); }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 30px 46px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.timeline li.done::before { background: var(--accent); }
.timeline li:last-child::before { display: none; }
.dot { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--bg); border: 2px solid var(--line); color: var(--muted); }
.done .dot { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.active .dot { border-color: var(--accent); }
.active .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.55); opacity: .5; } }
.timeline h3 { font-size: 19px; line-height: 1.3; }
.todo h3 { color: var(--muted); font-weight: 600; }
.timeline time { font-size: 13px; color: var(--muted); }
.timeline .stage-note { margin: 8px 0 0; padding: 12px 14px; background: var(--bg); border-left: 3px solid var(--plum); border-radius: 0 8px 8px 0; font-size: 15px; }
.thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.thumbs button { all: unset; cursor: zoom-in; width: 120px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface2); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.thumbs button:hover img { transform: scale(1.06); }
.thumbs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.delivered-banner { margin-top: 26px; padding: 18px 20px; border-radius: 12px; background: #1f3a2a; border: 1px solid #2f6b45; color: #bdf0cc; }
.demo-note { margin-top: 24px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- admin ---------- */
.admin-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.order-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.order-list button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.order-list button:hover, .order-list button[aria-current="true"] { border-color: var(--accent); }
.order-list b { display: block; font-size: 15px; }
.order-list span { font-size: 13px; color: var(--muted); }
.field { display: block; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.field input, .field select, .field textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: 15px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--surface2); box-shadow: none; transform: none; }
.btn--danger { background: transparent; color: #ff8a9a; border-color: #5a2a35; box-shadow: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stage-edit { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 10px; background: var(--bg); }
.stage-edit.active { border-color: var(--accent); }
.stage-edit.done { opacity: .85; }
.stage-edit header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.stage-edit h4 { margin: 0; font: 700 16px var(--head); }
.badge { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--surface2); color: var(--muted); }
.active .badge { background: var(--accent); color: var(--bg); }
.done .badge { background: #2f6b45; color: #d6f5df; }
.stage-edit textarea { margin-top: 10px; width: 100%; min-height: 60px; padding: 10px; font: 14px var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.stage-edit .thumbs button { width: 84px; position: relative; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--cream); color: #1c1014; padding: 12px 18px; border-radius: 10px; font-weight: 700; box-shadow: 4px 4px 0 var(--plum); z-index: 300; }

@media (max-width: 860px) { .admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .status { flex-direction: column; align-items: flex-start; }
  .thumbs button { width: calc(50% - 5px); }
}
.lookup__loading { padding: 120px 24px; text-align: center; color: var(--muted, #aaa); }
.track-foot { text-align: center; padding: 32px 16px 48px; font-size: 14px; color: var(--muted); }
.track-foot a { color: inherit; }

/* klavye kullanıcıları için "içeriğe atla" bağlantısı: yalnızca odaklanınca görünür */
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: #fff; color: #111; font-weight: 700; border-radius: 6px; }
.skip:focus { top: 12px; }

/* dar ekranda başlık taşmasın: buton gizlenir, linkler sıkışır */
@media (max-width: 480px) { header.nav .btn--sm { display: none; } header.nav .nav__links { gap: 16px; } }