/* Dr.Med — Sipariş Takip (design page styles, verbatim) */

.lookup{max-width:520px;margin:0 auto}
.lookup .card-bd{padding:26px}
.demo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:.5px solid var(--c-line);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-mute)}
.demo button{background:transparent;border:.5px solid var(--c-line);cursor:pointer;padding:0 12px;min-height:34px;
  font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.04em;color:var(--c-ink-2);transition:.26s}
.demo button:hover{border-color:var(--c-gold);color:var(--c-ink);background:var(--c-cream)}

.result{display:none}
.result.on{display:block;animation:rIn .42s cubic-bezier(.2,.8,.3,1)}
@keyframes rIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.ohead{display:grid;grid-template-columns:repeat(4,auto) 1fr;gap:26px;align-items:center;
  padding:20px 22px;background:var(--c-cream);border:.5px solid var(--c-line);border-bottom:0;flex-wrap:wrap}
.ohead div .l{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-mute);margin-bottom:6px}
.ohead div .v{font-family:var(--serif);font-size:16.5px;color:var(--c-ink);white-space:nowrap}
.ohead .mono{font-family:ui-monospace,monospace;font-size:14px}

.track{padding:26px 22px;border:.5px solid var(--c-line);border-bottom:0}
.tr{display:grid;grid-template-columns:30px 1fr;gap:18px;position:relative;padding-bottom:26px}
.tr:last-child{padding-bottom:0}
.tr::before{content:"";position:absolute;left:14.5px;top:30px;bottom:0;width:1px;background:var(--c-line)}
.tr.done::before{background:var(--c-gold)}
.tr:last-child::before{display:none}
.tr .b{width:30px;height:30px;border-radius:999px;border:.5px solid var(--c-line);background:var(--c-paper);
  display:grid;place-items:center;z-index:2;color:var(--c-mute)}
.tr .b svg{width:13px;height:13px}
.tr.done .b{background:var(--c-gold);border-color:var(--c-gold);color:var(--c-paper)}
.tr.now .b{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper)}
.tr.now .b::after{content:"";position:absolute;width:42px;height:42px;border-radius:999px;border:1px solid var(--c-gold);
  opacity:0;animation:pl 2.6s ease-out infinite}
@keyframes pl{0%{transform:scale(.7);opacity:.75}100%{transform:scale(1.5);opacity:0}}
.tr .tt{font-family:var(--serif);font-size:19px;color:var(--c-ink);line-height:1.25}
.tr:not(.done):not(.now) .tt{color:var(--c-mute)}
.tr .td{font-size:12.5px;line-height:1.6;color:var(--c-mute);margin-top:6px}
.tr .td b{color:var(--c-gold)}
.tr .loc{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-ink-2);border:.5px solid var(--c-line);padding:5px 10px}

.carrier{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 22px;background:var(--c-cream);border:.5px solid var(--c-line);border-bottom:0}
.carrier .l{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-mute);margin-bottom:5px}
.carrier .v{font-family:var(--serif);font-size:17px;color:var(--c-ink)}
.carrier .mono{font-family:ui-monospace,monospace;font-size:14px;color:var(--c-ink)}

.items{border:.5px solid var(--c-line);padding:6px 22px}
.it{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:.5px solid var(--c-line);align-items:center}
.it:last-child{border-bottom:0}
.it .shot{position:relative;aspect-ratio:3/4}
.it .shot .ph{position:absolute;inset:0}
.it .shot .q{position:absolute;top:-6px;right:-6px;z-index:4;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--c-ink);color:var(--c-paper);font-size:9.5px;display:grid;place-items:center}
.it .nm{font-family:var(--serif);font-size:16px;line-height:1.25;color:var(--c-ink)}
.it .vr{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-mute);margin-top:4px}
.it .pz{font-family:var(--serif);font-size:15px;color:var(--c-ink);white-space:nowrap}

.ofoot{display:flex;gap:9px;flex-wrap:wrap;padding:18px 22px;border:.5px solid var(--c-line);border-top:0}

.err{display:none;text-align:center;padding:44px 24px;border:.5px solid var(--c-line);margin-top:14px}
.err.on{display:block;animation:rIn .35s ease}
.err .ic{width:54px;height:54px;border-radius:999px;background:color-mix(in srgb,#b4503f 12%,transparent);
  color:#b4503f;display:grid;place-items:center;margin:0 auto 18px}
.err .ic svg{width:23px;height:23px}
.err h3{font-family:var(--serif);font-weight:300;font-size:26px;margin:0 0 10px}
.err p{font-size:13.5px;line-height:1.65;color:var(--c-mute);max-width:40ch;margin:0 auto 20px}

@media (max-width:720px){
  .ohead{grid-template-columns:1fr 1fr;gap:16px;padding:16px}
  .track,.items,.carrier,.ofoot{padding-left:16px;padding-right:16px}
  .tr .tt{font-size:17px}
}