/* Elçi Tur Rehber — tasarım belirteçleri ve ortak bileşenler */
:root{
  --bg:#F3F5FA; --navy:#233876; --orange:#F37021; --text:#17224D; --muted:#5A6485;
  --icon-box:#E8ECF7; --line:#E3E7F2; --border:#C9D0E6; --card:#FFFFFF; --accent-text:#B94A0A;
  --shadow:0 2px 8px rgba(35,56,118,.08); --shadow-lg:0 6px 18px rgba(35,56,118,.14);
  --r-card:18px; --r-lg:20px; --focus:#F37021;
  --font:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-ar:'Amiri','Traditional Arabic',serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.4}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.app{max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;background:var(--bg)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Üst çubuk */
.topbar{position:sticky;top:0;z-index:5;height:64px;background:var(--navy);display:flex;align-items:center;gap:10px;padding:0 12px}
.topbar h1{flex:1;margin:0;font-size:21px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{flex:none;width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
.badge-role{background:rgba(255,255,255,.2);color:#fff;font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:10px}
.topbar .toplink{color:#fff;font-size:15px;font-weight:800;min-height:44px;display:flex;align-items:center;padding:0 8px}
.page{padding:14px 16px 110px;display:flex;flex-direction:column;gap:12px}

/* Kartlar, rozetler */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px 16px}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.small{font-size:14.5px;font-weight:600}
.label{font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.pill-tag{flex:none;font-size:12.5px;font-weight:800;color:var(--navy);background:var(--icon-box);border-radius:10px;padding:3px 9px}
.iconbox{flex:none;width:44px;height:44px;border-radius:13px;background:var(--icon-box);display:flex;align-items:center;justify-content:center}
.avatar{flex:none;width:42px;height:42px;border-radius:21px;background:var(--icon-box);color:var(--navy);font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* Form */
.field{display:flex;flex-direction:column;gap:6px}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=url],.field input[type=search],.field input[type=date],.field select,.field textarea,.input{
  width:100%;min-height:56px;padding:0 16px;background:#fff;border:1.5px solid var(--border);border-radius:14px;font-size:18px;font-weight:600}
.field textarea{padding:12px 16px;min-height:120px;line-height:1.45}
.hint{font-size:14px;font-weight:600;color:var(--muted);line-height:1.4}
.error{background:#FDECEC;border:1.5px solid #E5A3A3;color:#8A1F1F;border-radius:14px;padding:12px 14px;font-size:15.5px;font-weight:700}
.notice{background:#EAF3EC;border:1.5px solid #A8CFB0;color:#1F5B2C;border-radius:14px;padding:12px 14px;font-size:15.5px;font-weight:700}

/* Düğmeler */
.btn{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;font-size:18px;font-weight:800;padding:0 20px;cursor:pointer;width:100%}
.btn-navy{background:var(--navy);color:#fff}
.btn-orange{background:var(--orange);color:var(--text);box-shadow:0 6px 16px rgba(35,56,118,.25)}
.btn-ghost{background:#fff;border:1.5px solid var(--border);color:var(--navy);min-height:48px;border-radius:24px;font-size:16px}
.btn-sm{min-height:44px;width:auto;font-size:15px;border-radius:12px;padding:0 14px}
.btn-danger{background:#fff;border:1.5px solid #E5A3A3;color:#8A1F1F}
.fab{position:fixed;left:16px;right:16px;bottom:16px;max-width:488px;margin:0 auto;z-index:6}
form.inline{display:inline}

/* Çipler */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.chip{flex:none;min-height:44px;padding:0 16px;display:flex;align-items:center;border-radius:22px;font-size:15.5px;font-weight:800;background:#fff;border:1.5px solid var(--border);color:var(--navy);cursor:pointer}
.chip[aria-current=true],.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.radio-chips{display:flex;flex-wrap:wrap;gap:8px}
.radio-chips input{position:absolute;opacity:0;width:1px;height:1px}
.radio-chips label{min-height:44px;padding:0 16px;display:flex;align-items:center;border-radius:22px;font-size:16px;font-weight:800;background:#fff;border:1.5px solid var(--border);color:var(--navy);cursor:pointer}
.radio-chips input:checked+label{background:var(--navy);color:#fff;border-color:var(--navy)}
.radio-chips input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}

/* Giriş */
.login-hero{background:var(--navy);height:250px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 24px 56px}
.login-hero img{width:170px;height:auto;margin:0 0 4px -12px}
.login-hero div{font-size:26px;font-weight:800;color:#fff}
.login-card{margin:-34px 16px 0;background:#fff;border-radius:22px;padding:20px 18px;box-shadow:0 8px 24px rgba(35,56,118,.16);display:flex;flex-direction:column;gap:12px;position:relative}

/* Alfabe listesi */
.alpha{position:fixed;right:max(3px,calc(50% - 258px));top:170px;display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:800;color:var(--muted);text-align:center;line-height:1}
.alpha a{display:block;padding:1px 4px}
.letter{font-size:14px;font-weight:800;color:var(--muted);padding:6px 4px 0;scroll-margin-top:72px}
.person{display:flex;align-items:center;gap:12px;min-height:64px;background:#fff;border-radius:16px;padding:8px 12px;box-shadow:var(--shadow)}
.person .name{font-size:17.5px;font-weight:800;line-height:1.2}
.list-pad{padding-right:22px}
