/* Dropjet Destek portalı — dropJET kurumsal kimliği (lacivert #0E1A27, kırmızı #E30613 ~%3 vurgu, altın #B98A2E, kum #C9B79A / #EFE8DC, kırık beyaz #F9F8F7,
   metin #231F20, gri #6E6A64, turuncu #F68712 yalnız uyarı). Tipografi: Montserrat başlık, Inter gövde. Mobil öncelikli, açık tema. (v1.5.230) */
:root { color-scheme: light;
  --bg:#F9F8F7; --card:#FFFFFF; --fg:#231F20; --muted:#6E6A64; --muted2:#A8A39B; --line:#E5DED2; --soft:#EFE8DC; --soft2:#F6F2EA;
  --navy:#0E1A27; --navy-2:#1B2B3C; --red:#E30613; --gold:#B98A2E; --sand:#C9B79A; --orange:#F68712;
  --ok-bg:#EEF2F6; --ok-fg:#0E1A27; --warn-bg:#FFF3E6; --warn-fg:#8A4B00; --err-bg:#FDECEC; --err-fg:#B3050F;
  --head:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box }
html, body { height:100% }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.45; display:flex; flex-direction:column; min-height:100vh }
.top { background:var(--navy); color:#fff; padding:calc(12px + env(safe-area-inset-top, 0px)) 18px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:3px solid var(--red) }
.brand { display:flex; align-items:center; gap:12px; min-width:0 } .brand img { height:40px; width:auto; display:block } .brand span { display:block; min-width:0 }
.hero { display:flex; justify-content:center; padding:6px 0 2px } .hero img { height:64px; width:auto; max-width:100% }
.brand b { display:block; font-family:var(--head); font-weight:600; font-size:13px; letter-spacing:.06em } .brand small { display:block; font-size:11.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px }
@media (max-width:380px) { .brand span { display:none } }
.link { background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer }
.prog { display:flex; gap:4px; padding:10px 18px 0; max-width:520px; width:100%; margin:0 auto } .prog i { flex:1; height:4px; border-radius:2px; background:var(--line) } .prog i.on { background:var(--red) }
.app { flex:1; width:100%; max-width:520px; margin:0 auto; padding:16px 18px 24px }
.foot { padding:14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); font-size:11.5px; color:var(--muted); display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; border-top:1px solid var(--line); background:var(--soft2) }
.foot img { height:40px; width:auto }
.screen { display:flex; flex-direction:column; gap:14px }
h1 { font-family:var(--head); font-weight:700; font-size:22px; margin:6px 0 0; letter-spacing:-.01em; color:var(--navy) } p { margin:0 } .muted { color:var(--muted); font-size:14px }
.field label { font-size:12.5px; color:var(--muted); display:block; margin-bottom:5px }
.inp { width:100%; height:48px; border:1px solid var(--sand); border-radius:12px; padding:0 14px; font:inherit; font-size:17px; background:#fff; color:var(--fg) }
.inp:focus { outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy) }
.inp.big { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing:.12em; font-size:22px; text-align:center }
textarea.inp { height:130px; padding:12px 14px; resize:none; line-height:1.45 }
.btn { height:48px; border-radius:12px; border:0; background:var(--navy); color:#fff; font-family:var(--head); font-weight:600; font-size:15px; letter-spacing:.01em; cursor:pointer; width:100% }
.btn:hover { background:var(--navy-2) } .btn:disabled { opacity:.55; cursor:default }
.btn.ghost { background:#fff; color:var(--navy); border:1px solid var(--navy) }
.btn.gray { background:var(--soft); color:var(--navy) }
.btn.danger { background:#fff; color:var(--red); border:1px solid var(--red) }
.row2 { display:flex; gap:8px } .row2 .btn { flex:1 }
.note { background:var(--soft2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:13.5px; color:var(--muted) }
.note.ok { background:var(--ok-bg); border-color:#D5DCE4; color:var(--ok-fg) }
.note.warn { background:var(--warn-bg); border-color:#F5D3B0; color:var(--warn-fg) }
.note.err { background:var(--err-bg); border-color:#F5C2C2; color:var(--err-fg) }
.match { border:2px solid var(--gold); border-radius:14px; padding:14px; background:#FBF6EA }
.match small { display:block; font-size:12.5px; color:var(--muted) } .match b { display:block; font-family:var(--head); font-size:16px; margin:2px 0; color:var(--navy) }
.dev { border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; gap:12px; align-items:center; background:#fff; width:100%; text-align:left; font:inherit; color:var(--fg); cursor:pointer }
.dev[aria-pressed="true"] { border-color:var(--navy); background:var(--soft2); box-shadow:inset 4px 0 0 var(--red) }
.dev .ic { width:38px; height:38px; border-radius:10px; background:var(--soft); display:grid; place-items:center; font-size:18px; flex:none }
.dev b { display:block; font-size:15px; color:var(--navy) } .dev span { font-size:12.5px; color:var(--muted) }
.list { display:flex; flex-direction:column; gap:8px }
.chips { display:flex; flex-wrap:wrap; gap:7px } .chip { border:1px solid var(--sand); border-radius:999px; padding:8px 13px; font:inherit; font-size:14px; background:#fff; color:var(--fg); cursor:pointer } .chip[aria-pressed="true"] { background:var(--navy); color:#fff; border-color:var(--navy) }
.att { display:flex; gap:8px } .att label { flex:1; border:1px dashed var(--sand); border-radius:12px; padding:12px 6px; text-align:center; font-size:12.5px; color:var(--muted); cursor:pointer; background:#fff } .att label b { display:block; font-size:20px }
.files { display:flex; flex-direction:column; gap:4px; font-size:13px } .files div { display:flex; justify-content:space-between; gap:8px; background:var(--soft); border-radius:8px; padding:6px 10px } .files button { background:none; border:0; color:var(--red); font:inherit; cursor:pointer }
.track { text-align:center; padding:10px 0 } .track .no { font-family:var(--head); font-size:30px; font-weight:700; letter-spacing:.08em; color:var(--navy) } .track small { color:var(--muted) }
.li { border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; display:flex; justify-content:space-between; gap:10px; align-items:flex-start }
.li .t { font-size:14.5px } .li small { display:block; color:var(--muted); font-size:12px; margin-top:2px }
.st { font-size:11px; padding:3px 8px; border-radius:999px; font-weight:600; white-space:nowrap; font-family:var(--head) }
.st.YENI { background:#E8EDF3; color:var(--navy) } .st.INCELENIYOR { background:#F7EBD2; color:#7A5A14 } .st.COZULDU, .st.KAPANDI { background:var(--soft); color:var(--muted) } .st.DOGRULANMAMIS { background:var(--err-bg); color:var(--err-fg) }
.alt { font-size:13px; color:var(--muted); text-align:center } .alt a, .alt button { color:var(--navy); background:none; border:0; font:inherit; cursor:pointer; text-decoration:underline; text-decoration-color:var(--red) }
.spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:sp .8s linear infinite; vertical-align:-2px; margin-right:6px } @keyframes sp { to { transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .spin { animation:none } }