@keyframes fi { from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);} }
#arac-kok{
* { margin: 0; padding: 0; box-sizing: border-box; }
& {
    --bg: #f0f1f5;
    --white: #ffffff;
    --blue: #2563eb;
    --blue-light: #eff4ff;
    --blue-mid: #dbeafe;
    --orange: #f97316;
    --text: #1e293b;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --green: #16a34a;
    --green-bg: #f0fdf4;
    --red: #dc2626;
    --red-bg: #fef2f2;
    --amber: #d97706;
    --amber-bg: #fffbeb;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  }
& { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:14px; min-height:100vh; }
.topnav { background:var(--white); border-bottom:1px solid var(--border); padding:0 32px; display:flex; align-items:center; justify-content:space-between; height:52px; }
.topnav-brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--text); }
.brand-icon { width:30px; height:30px; background:linear-gradient(135deg,#2563eb,#1d4ed8); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.topnav-links { display:flex; gap:6px; align-items:center; }
.topnav-link { font-size:12px; color:var(--text-muted); text-decoration:none; padding:4px 10px; border-radius:6px; transition:all .15s; }
.topnav-link:hover { background:var(--border-light); color:var(--text); }
.topnav-sep { color:var(--border); font-size:11px; }
.wizard-tabs { background:var(--white); border-bottom:1px solid var(--border); padding:0 32px; display:flex; }
.wizard-tab { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 36px 12px; cursor:pointer; position:relative; border-bottom:3px solid transparent; transition:all .2s; min-width:160px; }
.wizard-tab.active { border-bottom-color:var(--orange); }
.wizard-tab.locked { opacity:.4; cursor:not-allowed; pointer-events:none; }
.tab-icon-wrap { width:36px; height:36px; border-radius:10px; background:var(--border-light); display:flex; align-items:center; justify-content:center; font-size:17px; transition:all .2s; }
.wizard-tab.active .tab-icon-wrap { background:var(--blue); box-shadow:0 4px 12px rgba(37,99,235,.3); }
.wizard-tab.done .tab-icon-wrap { background:#dcfce7; }
.tab-label { font-size:12px; font-weight:600; color:var(--text-muted); }
.wizard-tab.active .tab-label { color:var(--blue); }
.wizard-tab.done .tab-label { color:var(--green); }
.tab-sub { font-size:10.5px; color:var(--text-light); }
.layout { display:grid; grid-template-columns:460px 1fr; gap:20px; padding:24px 32px; max-width:1200px; margin:0 auto; align-items:start; }
@media(max-width:900px){.layout{grid-template-columns:1fr;padding:16px;}}
.left-panel { background:var(--white); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.step-block { padding:20px 24px; border-bottom:1px solid var(--border-light); }
.step-block:last-child { border-bottom:none; }
.step-heading { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.step-num { width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.step-num.done { background:var(--green); }
.step-heading-text { font-size:14px; font-weight:600; color:var(--text); }
.search-wrap { position:relative; margin-bottom:12px; }
.search-input { width:100%; border:1px solid var(--border); border-radius:8px; padding:9px 36px 9px 12px; font-family:'Inter',sans-serif; font-size:13px; color:var(--text); outline:none; background:var(--border-light); transition:all .15s; }
.search-input:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.search-input::placeholder { color:var(--text-light); }
.search-icon { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:15px; pointer-events:none; }
.card-list { display:flex; flex-direction:column; gap:6px; }
.list-card { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all .15s; background:var(--white); }
.list-card:hover { border-color:var(--blue); background:var(--blue-light); }
.list-card.selected { border-color:var(--blue); background:var(--blue-light); }
.lc-icon { font-size:20px; flex-shrink:0; width:32px; text-align:center; }
.lc-body { flex:1; min-width:0; }
.lc-name { font-size:13px; font-weight:500; color:var(--text); }
.lc-sub { font-size:11.5px; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-code { font-size:10.5px; font-weight:600; color:var(--blue); background:var(--blue-mid); padding:2px 7px; border-radius:5px; flex-shrink:0; }
.lc-arrow { color:var(--text-light); font-size:15px; transition:transform .15s; flex-shrink:0; }
.list-card:hover .lc-arrow { transform:translateX(2px); color:var(--blue); }
.chips-row { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.chip { font-size:11px; font-weight:500; padding:2px 7px; border-radius:20px; }
.chip-green { background:var(--green-bg); color:var(--green); }
.chip-red { background:var(--red-bg); color:var(--red); }
.chip-amber { background:var(--amber-bg); color:var(--amber); }
.chip-blue { background:var(--blue-mid); color:var(--blue); }
.new-search-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:none; border:1px solid var(--border); color:var(--text-muted); font-family:'Inter',sans-serif; font-size:13px; font-weight:500; padding:10px; border-radius:8px; cursor:pointer; margin-top:4px; transition:all .15s; }
.new-search-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
.no-results { text-align:center; padding:24px; color:var(--text-muted); font-size:13px; }
.breadcrumb { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); padding:10px 24px; background:var(--border-light); border-bottom:1px solid var(--border); }
.bc-item { cursor:pointer; transition:color .15s; }
.bc-item:hover { color:var(--blue); }
.bc-active { color:var(--text); font-weight:500; cursor:default; }
.bc-sep { color:var(--border); }
.right-panel { background:var(--white); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; position:sticky; top:20px; }
.right-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:60px 32px; text-align:center; }
.re-icon { width:72px; height:72px; border-radius:20px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:34px; }
.re-title { font-size:15px; font-weight:600; color:var(--text); }
.re-sub { font-size:13px; color:var(--text-muted); line-height:1.6; max-width:280px; }
.re-sub strong { color:var(--text); }
.result-header { padding:20px 24px; border-bottom:1px solid var(--border-light); background:linear-gradient(135deg,var(--blue-light),#fff); }
.result-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:4px; }
.result-code { font-size:26px; font-weight:700; color:var(--blue); letter-spacing:.06em; }
.result-name { font-size:14px; color:var(--text); font-weight:500; margin-top:4px; }
.copy-btn { display:inline-flex; align-items:center; gap:6px; margin-top:12px; background:var(--blue); color:#fff; border:none; border-radius:7px; padding:7px 14px; font-family:'Inter',sans-serif; font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; }
.copy-btn:hover { background:#1d4ed8; }
.result-body { padding:20px 24px; }
.result-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; }
.result-row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-light); font-size:13px; }
.result-row:last-child { border-bottom:none; }
.result-row-label { color:var(--text-muted); }
.result-tag { font-size:12px; font-weight:600; padding:3px 10px; border-radius:6px; }
.result-links { display:flex; flex-direction:column; gap:6px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-light); }
.result-link { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:12.5px; color:var(--text); text-decoration:none; transition:all .15s; }
.result-link:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
.result-link-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); flex-shrink:0; }
.warn-box { margin-top:12px; padding:10px 14px; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; font-size:12px; color:#92400e; line-height:1.5; }
.fade-in { animation:fi .25s ease; }
}