/* Haydarpaşa — biçem. Kâğıt zemin, lacivert mürekkep, sinyal turuncusu; Portwise'ın kart dili. */
:root { --kart: rgba(255,253,248,.94); --murekkep: #12233F; --soluk: rgba(18,35,63,.74); --vurgu: #F2622E; --yesil: #2F8F6B; --amber: #E8A317; --mavi: #2F6DB5; --cam: #4FB3C8;
  --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Onest', system-ui, sans-serif; --golge: 0 1px 0 rgba(18,35,63,.05), 0 10px 30px rgba(18,35,63,.10); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #F3EFE6; color: var(--murekkep); font: 400 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
#sahne, #sahne canvas { position: fixed; inset: 0; display: block; }
button { font: 600 12px var(--sans); color: var(--murekkep); background: transparent; border: 0; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
button:hover { background: rgba(18,35,63,.06); }
button.secili, button.birincil { background: var(--murekkep); color: #fff; }
button.birincil:hover { background: #1d3459; }
button:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.gizli { display: none !important; }
.kart { background: var(--kart); border-radius: 14px; box-shadow: var(--golge); }
.et { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.et.soluk { opacity: .8; }

/* üst çubuk */
.ust { position: fixed; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: stretch; pointer-events: none; z-index: 5; }
.ust .kart { pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 6px; }
.logo { padding: 8px 14px !important; flex-direction: column; align-items: flex-start !important; justify-content: center; }
.logo b { font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1.1; }
.logo span { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--soluk); }
.kasa { padding: 6px 14px !important; flex-direction: column; align-items: flex-start !important; justify-content: center; min-width: 140px; }
.kasa b { font: 700 16px var(--mono); }
.kasa b.eksi { color: #B5463A; }
.gorunumler { margin-left: auto; }

/* göstergeler */
.gostergeler { position: fixed; left: 12px; top: 84px; display: flex; flex-direction: column; gap: 8px; width: 200px; z-index: 4; }
.gosterge { padding: 12px 14px; display: grid; gap: 2px; }
.gosterge b { font: 700 24px var(--sans); letter-spacing: -.02em; }
.gosterge i { font-style: normal; font-size: 12px; color: var(--soluk); }

/* rıhtım planı */
.plan { position: fixed; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px 12px; z-index: 4; display: grid; gap: 8px; }
.plan-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-bas b { font-weight: 700; font-size: 15px; }
.zaman { position: relative; height: 74px; border-radius: 9px; background: rgba(18,35,63,.035); overflow: hidden; }
.zaman-eksen { position: absolute; inset: 0; display: flex; }
.zaman-eksen span { flex: 1; border-left: 1px solid rgba(18,35,63,.08); font: 500 10px var(--mono); color: var(--soluk); padding: 3px 4px; }
.zaman-satirlar { position: absolute; left: 0; right: 0; top: 18px; bottom: 4px; }
.cubuk { position: absolute; height: 12px; border-radius: 4px; font: 600 9.5px var(--mono); color: #fff; padding: 0 5px; line-height: 12px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.cubuk.bekliyor { background: #9AA3AB; } .cubuk.demirde { background: var(--amber); } .cubuk.yanasiyor, .cubuk.rihtimda { background: var(--mavi); } .cubuk.kalkiyor, .cubuk.gitti { background: var(--yesil); } .cubuk.gec { background: #B5463A; }
.cubuk .etd { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(18,35,63,.7); }
.simdi { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--vurgu); }
.serit-kap { position: relative; }
.serit { position: relative; height: 34px; border-radius: 9px; background: repeating-linear-gradient(90deg, #D4CDBE 0 1px, #E3DCCD 1px 10%); border: 1.5px dashed transparent; }
.serit.surukle { border-color: var(--vurgu); background-color: #FFF4EC; }
.serit-ad { position: absolute; right: 8px; top: 9px; font: 500 10px var(--mono); color: var(--soluk); }
.serit-gemi { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; background: var(--mavi); color: #fff; font: 600 10.5px var(--mono); padding: 0 6px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.serit-gemi.plan { background: repeating-linear-gradient(135deg, #9AA3AB 0 6px, #A9B1B8 6px 12px); }
.serit-gemi.hayal { background: rgba(242,98,46,.35); outline: 2px solid var(--vurgu); pointer-events: none; }
.serit-gemi.cakisma { background: rgba(181,70,58,.45); outline-color: #B5463A; }
.ipucu { background: #FFF4EC; border: 1.5px solid var(--vurgu); color: #7a2f10; border-radius: 10px; padding: 8px 12px; font-size: 13px; animation: nabiz 1.6s ease-in-out infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 4px rgba(242,98,46,.18); } }
.logo button { margin-top: 4px; padding: 4px 8px; font-size: 11px; border: 1px solid rgba(18,35,63,.15); }
.kuyruk { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; min-height: 58px; }
.kuyruk:empty::before { content: 'Kuyrukta gemi yok.'; font: 500 11px var(--mono); color: var(--soluk); align-self: center; }
.gemi-kart { flex: 0 0 auto; border: 1px solid rgba(18,35,63,.12); border-radius: 10px; padding: 7px 10px; background: #fff; cursor: grab; display: grid; gap: 1px; min-width: 170px; user-select: none; touch-action: none; }
.gemi-kart:active { cursor: grabbing; }
.gemi-kart b { font-size: 12.5px; }
.gemi-kart span { font: 500 10.5px var(--mono); color: var(--soluk); }
.gemi-kart.demirde { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }

/* seçim kartı */
.secim { position: fixed; right: 12px; top: 84px; width: 280px; padding: 14px; z-index: 6; display: grid; gap: 10px; }
.secim h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.secim .satir { display: flex; justify-content: space-between; font: 500 12px var(--mono); }
.secim .ilerleme { height: 8px; border-radius: 4px; background: rgba(18,35,63,.08); overflow: hidden; display: flex; }
.secim .ilerleme i { display: block; height: 100%; }
.secim .vincler { display: flex; align-items: center; gap: 6px; }
.secim .vincler b { font: 700 20px var(--mono); min-width: 28px; text-align: center; }
.secim .vincler button { width: 34px; height: 34px; font-size: 18px; border: 1px solid rgba(18,35,63,.15); }
.secim .uyari { font: 600 12px var(--sans); color: #B5463A; background: #FBEAE6; border-radius: 8px; padding: 6px 8px; }
.secim .turler { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.secim .turler button { border: 1px solid rgba(18,35,63,.15); text-align: left; display: flex; align-items: center; gap: 6px; }
.secim .turler button i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.kapat { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; font-size: 16px; }

/* olay kartı */
.olay { position: fixed; inset: 0; display: grid; place-items: start center; padding-top: 90px; z-index: 8; pointer-events: none; }
.olay-kart { pointer-events: auto; width: min(440px, 92vw); padding: 18px 18px 14px; display: grid; gap: 8px; border-top: 4px solid var(--vurgu); }
.olay-kart h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.olay-kart p { margin: 0; color: #2b3a55; }
.olay-sure { height: 4px; background: rgba(18,35,63,.08); border-radius: 2px; overflow: hidden; }
.olay-sure i { display: block; height: 100%; background: var(--vurgu); }
.olay-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.olay-dugmeler button { border: 1px solid rgba(18,35,63,.15); padding: 10px; text-align: left; line-height: 1.3; }

/* bildirimler ve etiketler */
.bildirimler { position: fixed; right: 12px; bottom: 210px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; z-index: 7; pointer-events: none; }
.bildirim { background: var(--murekkep); color: #fff; font: 500 12px var(--sans); padding: 8px 12px; border-radius: 10px; box-shadow: var(--golge); max-width: 340px; animation: gir .25s ease-out; }
.bildirim.iyi { background: var(--yesil); } .bildirim.kotu { background: #B5463A; }
@keyframes gir { from { opacity: 0; transform: translateY(6px); } }
#etiketler { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.etiket { position: absolute; transform: translate(-50%, -100%); background: var(--kart); border-radius: 999px; padding: 4px 9px 4px 7px; font: 500 10.5px var(--mono); white-space: nowrap; box-shadow: 0 4px 14px rgba(18,35,63,.16); display: flex; align-items: center; gap: 6px; pointer-events: auto; cursor: pointer; }
.etiket i { width: 7px; height: 7px; border-radius: 50%; background: var(--mavi); display: inline-block; }
.etiket.demirde i { background: var(--amber); } .etiket.durak i { background: #B5463A; } .etiket.kalkiyor i { background: var(--yesil); }
.etiket.secili { outline: 2px solid var(--vurgu); }

/* ekranlar */
.ekran { position: fixed; inset: 0; display: grid; place-items: center; z-index: 10; background: rgba(243,239,230,.45); }
.ekran .kart { background: rgba(255,253,248,.985); }
body[data-ekran="baslik"] #etiketler, body.karne-acik #etiketler { display: none; }
.baslik-kart, .karne-kart { width: min(560px, 92vw); padding: 28px 28px 22px; display: grid; gap: 14px; }
.baslik-kart h1 { margin: 0; font-size: clamp(44px, 7vw, 76px); font-weight: 800; letter-spacing: -.04em; line-height: .9; }
.baslik-kart p { margin: 0; font-size: 15.5px; color: #2b3a55; }
.nasil { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; color: #2b3a55; }
.dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.dugmeler button { padding: 11px 16px; font-size: 13px; border: 1px solid rgba(18,35,63,.15); }
.karne-kart h2 { margin: 0; font-size: 44px; letter-spacing: .1em; color: var(--amber); }
.karne-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.karne-izgara div { background: rgba(18,35,63,.04); border-radius: 10px; padding: 10px 12px; display: grid; }
.karne-izgara b { font: 700 20px var(--sans); }
body[data-ekran="baslik"] .ust, body[data-ekran="baslik"] .gostergeler, body[data-ekran="baslik"] .plan { opacity: 0; pointer-events: none; }

@media (pointer: coarse) {
  button { min-height: 40px; min-width: 40px; }
  .secim .vincler button { width: 44px; height: 44px; }
  .gemi-kart { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .ipucu, .bildirim { animation: none; } }
@media (max-width: 860px) {
  #planIpucu, .kasa .et { display: none; }
  .ust { gap: 6px; } .logo { padding: 6px 10px !important; } .kasa { min-width: 0; padding: 6px 10px !important; }
  .gorunumler button[data-gorunum="Gar"] { display: none; }
  .gostergeler { display: none; }
  .ust { flex-wrap: wrap; }
  .gorunumler { margin-left: 0; }
  .secim { left: 12px; right: 12px; width: auto; top: auto; bottom: 230px; }
  .zaman { height: 60px; }
}

body.temiz .ust, body.temiz .gostergeler, body.temiz .plan, body.temiz #etiketler, body.temiz .bildirimler, body.temiz .secim, body.temiz .olay { display: none !important; }