@keyframes segFill { to { left:0; } }
@keyframes pinPop { from{opacity:0;transform:translateX(-50%) scale(.5)} to{opacity:1;transform:translateX(-50%) scale(1)} }
@keyframes barW { to { width:100%; } }
@keyframes fadeU { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
#arac-kok{
* { margin:0; padding:0; box-sizing:border-box; }
& {
  --bg:#e8ecf0; --surface:#fff; --surface2:#f4f6f9;
  --border:#dde2ea; --blue:#2563eb; --blue-light:#eff4ff;
  --blue-mid:#bfcfff; --yellow:#f59e0b; --red:#ef4444;
  --green:#10b981; --text:#1e2640; --text2:#64748b; --text3:#94a3b8;
  --seller:#2563eb; --buyer:#ef4444; --radius:14px;
  --shadow:0 2px 12px rgba(0,0,0,.07);
}
& { font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; padding:28px 20px 56px; }
.stepper { display:flex; align-items:flex-start; justify-content:center; gap:0; margin-bottom:28px; max-width:860px; margin-left:auto; margin-right:auto; position:relative; }
.stepper::before { content:''; position:absolute; top:28px; left:22%; right:22%; height:1px; background:var(--border); z-index:0; }
.step { display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; position:relative; z-index:1; }
.step-icon { width:56px; height:56px; border-radius:16px; background:var(--surface); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.step.active .step-icon { background:var(--blue); border-color:var(--blue); box-shadow:0 4px 18px rgba(37,99,235,.28); }
.step-name { font-size:.76rem; font-weight:700; color:var(--text2); text-align:center; line-height:1.3; }
.step.active .step-name { color:var(--text); }
.step-sub { font-size:.62rem; color:var(--text3); text-align:center; margin-top:-3px; }
.step.active .step-sub { color:var(--blue); }
.step-line { position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:38px; height:3px; background:var(--yellow); border-radius:2px; opacity:0; transition:.2s; }
.step.active .step-line { opacity:1; }
.layout { display:grid; grid-template-columns:310px 1fr; gap:14px; max-width:1060px; margin:0 auto; }
.card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 16px; border:1px solid var(--border); }
.card-title { display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.8px; margin-bottom:14px; }
.card-num { width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cat-tabs { display:flex; gap:5px; margin-bottom:10px; }
.cat-tab { flex:1; padding:6px 4px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface2); font-size:.64rem; font-weight:700; color:var(--text2); cursor:pointer; text-align:center; transition:all .2s; }
.cat-tab.active { background:var(--blue-light); border-color:var(--blue); color:var(--blue); }
.terms-list { display:flex; flex-direction:column; gap:5px; }
.term-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; border:1.5px solid var(--border); cursor:pointer; transition:all .2s; background:var(--surface); }
.term-row:hover { border-color:var(--blue-mid); background:var(--blue-light); }
.term-row.active { border-color:var(--blue); background:var(--blue-light); box-shadow:0 2px 10px rgba(37,99,235,.1); }
.term-code-badge { font-size:.88rem; font-weight:800; color:var(--blue); min-width:38px; letter-spacing:.4px; }
.term-row-info { flex:1; min-width:0; }
.term-row-name { font-size:.73rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term-row-en { font-size:.62rem; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term-row-arrow { color:var(--text3); font-size:.8rem; flex-shrink:0; transition:transform .2s; }
.term-row.active .term-row-arrow { transform:translateX(2px); color:var(--blue); }
.transport-pill { font-size:.56rem; font-weight:700; padding:2px 6px; border-radius:20px; flex-shrink:0; letter-spacing:.2px; }
.tp-all { background:#e0f2fe; color:#0369a1; }
.tp-sea { background:#e0e7ff; color:#4338ca; }
.right-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.placeholder-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:440px; gap:12px; }
.ph-text { font-size:.85rem; font-weight:600; color:var(--text3); }
.ph-sub { font-size:.7rem; color:var(--text3); }
.right-header { padding:22px 26px 18px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:18px; }
.rcode-wrap { width:62px; height:62px; border-radius:16px; background:var(--blue); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(37,99,235,.24); flex-shrink:0; }
.rcode-text { font-size:1.25rem; font-weight:800; color:#fff; letter-spacing:1px; }
.rtitle { font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:2px; line-height:1.25; }
.ren { font-size:.73rem; color:var(--text2); font-style:italic; margin-bottom:8px; }
.rbadges { display:flex; gap:5px; flex-wrap:wrap; }
.rbadge { font-size:.6rem; font-weight:700; padding:3px 8px; border-radius:20px; }
.rbadge.all { background:#e0f2fe; color:#0369a1; }
.rbadge.sea { background:#e0e7ff; color:#4338ca; }
.rbadge.smax { background:#dcfce7; color:#166534; }
.rbadge.bmax { background:#fee2e2; color:#991b1b; }
.sec-label { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--text3); margin-bottom:14px; }
.route-section { padding:20px 26px 14px; border-bottom:1px solid var(--border); }
.route-wrap { display:flex; align-items:center; position:relative; padding-bottom:30px; }
.r-node { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; z-index:2; width:82px; }
.r-icon { width:46px; height:46px; border-radius:50%; background:var(--surface2); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; }
.r-icon.seller { background:#eff4ff; border-color:#93b4f8; }
.r-icon.buyer  { background:#fff1f1; border-color:#fca5a5; }
.r-lbl { font-size:.58rem; font-weight:600; color:var(--text2); text-align:center; line-height:1.3; max-width:78px; }
.r-lbl.seller { color:var(--seller); }
.r-lbl.buyer  { color:var(--buyer); }
.r-seg { flex:1; height:5px; background:var(--border); border-radius:3px; position:relative; overflow:hidden; min-width:8px; }
.r-seg-fill { position:absolute; top:0; left:-100%; width:100%; height:100%; border-radius:3px; animation:segFill .5s ease forwards; }
.r-seg-fill.seller { background:var(--seller); }
.r-seg-fill.buyer  { background:var(--buyer); }
.tpin { position:absolute; bottom:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:0; z-index:5; animation:pinPop .3s .4s both; }
.tpin-dot { width:10px; height:10px; border-radius:50%; background:var(--yellow); border:2px solid #fff; box-shadow:0 0 0 2px var(--yellow); }
.tpin-line { width:2px; height:14px; background:var(--yellow); }
.tpin-lbl { font-size:.52rem; font-weight:700; color:var(--yellow); white-space:nowrap; background:#fff; padding:2px 7px; border-radius:4px; border:1px solid #fbbf24; text-transform:uppercase; letter-spacing:.4px; }
.route-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.rl-item { display:flex; align-items:center; gap:5px; font-size:.62rem; color:var(--text2); }
.rl-dot { width:10px; height:5px; border-radius:3px; }
.resp-section { padding:18px 26px 16px; border-bottom:1px solid var(--border); }
.resp-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; }
.resp-item { display:flex; flex-direction:column; gap:4px; }
.resp-top { display:flex; justify-content:space-between; align-items:center; }
.resp-name { font-size:.67rem; font-weight:600; color:var(--text2); }
.resp-owner { font-size:.61rem; font-weight:700; }
.resp-owner.s { color:var(--seller); }
.resp-owner.b { color:var(--buyer); }
.resp-track { height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; }
.resp-bar { height:100%; border-radius:3px; width:0; animation:barW .65s ease forwards; }
.resp-bar.s { background:var(--seller); }
.resp-bar.b { background:var(--buyer); }
.desc-section { padding:18px 26px 22px; }
.desc-text { font-size:.82rem; line-height:1.78; color:var(--text2); border-left:3px solid var(--yellow); padding-left:13px; animation:fadeU .4s ease both; }
.panel-anim { animation:fadeU .28s ease both; }
@media(max-width:760px){
  .layout { grid-template-columns:1fr; }
  .resp-grid { grid-template-columns:1fr; }
  .stepper::before { display:none; }
}
}

/* Sunucu tarafı terim bölümleri: JS açıkken yalnız başlık satırı + seçili terimin ayrıntısı görünür */
#arac-kok .incoterm-bolum{display:block;padding:10px 14px}
#arac-kok .incoterm-bolum[hidden]{display:none}
#arac-kok .incoterm-bolum h2{margin:0;font-family:inherit;font-size:.9rem;font-weight:700;line-height:1.3;letter-spacing:0;color:var(--blue,#2563eb)}
#arac-kok .incoterm-bolum .incoterm-en{font-weight:500;color:var(--text3,#64748b)}
#arac-kok .incoterm-bolum p{margin:8px 0 0;font-size:.78rem;line-height:1.55;color:var(--text,#1e293b)}
#arac-kok .incoterm-bolum .risk{font-weight:600}
#arac-kok .incoterm-bolum table.sorumluluk{width:100%;margin-top:8px;border-collapse:collapse;font-size:.74rem}
#arac-kok .incoterm-bolum table.sorumluluk caption{text-align:left;font-weight:700;padding-bottom:4px}
#arac-kok .incoterm-bolum table.sorumluluk th,#arac-kok .incoterm-bolum table.sorumluluk td{border-top:1px solid var(--border,#e2e8f0);padding:3px 6px;text-align:left}
#arac-kok.js .incoterm-bolum:not(.active) p,#arac-kok.js .incoterm-bolum:not(.active) table{display:none}