/* ============================================================
   Token sistemi
   Renk: derin çam yeşili + turkuaz (deniz) + kum tonu + terracotta vurgu
   ============================================================ */
:root{
  --deep-pine:   #0f3d3e;
  --pine-700:    #123f42;
  --turquoise:   #2a9d8f;
  --sand:        #f6f1e7;
  --sand-100:    #fbf8f2;
  --terracotta:  #e76f51;
  --ink:         #16221f;
  --ink-soft:    #4b5a56;
  --line-soft:   #dedbcd;

  --font-display: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  --topbar-h: 60px;
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sand);
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- Top bar ---------------- */
.topbar{
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  gap:14px;
  padding: 0 16px;
  background: var(--deep-pine);
  color: var(--sand-100);
  position: sticky; top:0; z-index: 1000;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.icon-btn{
  background: transparent;
  border: none;
  color: var(--sand-100);
  width: 38px; height: 38px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn:hover{ background: rgba(255,255,255,.08); }
.icon-btn:focus-visible{ outline: 2px solid var(--turquoise); outline-offset:2px; }

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
#site-logo{ height: 32px; width:auto; max-width:120px; object-fit:contain; border-radius:6px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-title{ font-family: var(--font-display); font-weight:800; font-size:16px; letter-spacing:.2px; }
.brand-sub{ font-size:11.5px; color: rgba(246,241,231,.7); }
.topbar-spacer{ flex:1; }

/* ---------------- Layout ---------------- */
.layout{
  display:flex;
  height: calc(100vh - var(--topbar-h));
  position: relative;
  overflow: hidden;
}

.map-wrap{ position:relative; flex:1; min-width:0; }
#map{ position:absolute; inset:0; background:#dfe9e6; }

/* Leaflet control tweaks: hide zoom control entirely (map is locked) */
.leaflet-control-zoom{ display:none !important; }
.leaflet-control-attribution{
  font-size: 10.5px !important;
  background: rgba(251,248,242,.85) !important;
}

.map-hint{
  position:absolute; left:12px; bottom:12px;
  background: rgba(15,61,62,.92);
  color: var(--sand-100);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  z-index: 500;
  pointer-events:none;
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  width: 320px;
  flex-shrink:0;
  background: var(--sand-100);
  border-right: 1px solid var(--line-soft);
  z-index: 900;
  overflow:hidden;
  transition: margin-left .25s ease;
}
.sidebar-inner{
  height:100%;
  display:flex; flex-direction:column;
  padding: 14px;
  overflow-y:auto;
}

.search-wrap{ position:relative; margin-bottom:10px; }
.search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color: var(--ink-soft); }
#searchBox{
  width:100%;
  padding: 10px 12px 10px 34px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background:#fff;
  font-size:14px;
  font-family: var(--font-body);
  color: var(--ink);
}
#searchBox:focus{ outline: 2px solid var(--turquoise); outline-offset: 1px; }

.sidebar-actions{ display:flex; gap:8px; margin-bottom:12px; }
.pill-btn{
  border: 1px solid var(--line-soft);
  background: #fff;
  color: var(--ink-soft);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight:600;
  cursor:pointer;
  font-family: var(--font-body);
}
.pill-btn.active{ background: var(--deep-pine); color: var(--sand-100); border-color: var(--deep-pine); }
.pill-btn:focus-visible{ outline: 2px solid var(--turquoise); outline-offset:1px; }

.line-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.line-item{
  display:flex; align-items:center; gap:10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor:pointer;
  border: 1px solid transparent;
}
.line-item:hover{ background: rgba(42,157,143,.08); }
.line-item.selected{ background: rgba(231,111,81,.10); border-color: rgba(231,111,81,.35); }
.line-item.dimmed{ opacity:.35; }

.line-dot{
  width: 14px; height:14px; border-radius:4px; flex-shrink:0;
}
.line-num{
  font-family: var(--font-display);
  font-weight:800;
  font-size: 13px;
  min-width: 46px;
  color: var(--deep-pine);
}
.line-route{
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height:1.25;
}
.line-op{
  font-size: 10.5px;
  color: #8a8477;
  margin-top:1px;
}

.sidebar-backdrop{
  display:none;
  position:fixed; inset: var(--topbar-h) 0 0 0;
  background: rgba(15,34,31,.45);
  z-index: 850;
}

/* ---------------- Line info card (over map) ---------------- */
.line-info{
  position:absolute;
  top:14px; right:14px;
  width: 300px;
  max-height: calc(100% - 28px);
  overflow-y:auto;
  background: var(--sand-100);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15,34,31,.25);
  padding: 16px;
  z-index: 800;
}
.line-info.hidden{ display:none; }
.line-info-close{
  position:absolute; top:10px; right:10px;
  border:none; background:transparent; font-size:20px; line-height:1;
  color: var(--ink-soft); cursor:pointer; width:28px; height:28px; border-radius:8px;
}
.line-info-close:hover{ background: rgba(0,0,0,.06); }
.line-info-head{ display:flex; gap:10px; align-items:flex-start; padding-right: 22px; }
.line-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 44px; height: 28px; padding: 0 8px;
  border-radius: 8px; color:#fff;
  font-family: var(--font-display); font-weight:800; font-size:13px;
  flex-shrink:0;
}
#lineInfoName{ margin:0 0 2px; font-family: var(--font-display); font-size: 15px; font-weight:700; color: var(--deep-pine); }
.line-info-operator{ margin:0; font-size:12px; color: var(--ink-soft); }
.line-info-stops-title{
  margin: 14px 0 6px; font-size: 11.5px; text-transform: none;
  font-weight:700; color: var(--ink-soft);
}
.line-info-stops{
  margin:0; padding-left: 18px;
  display:flex; flex-direction:column; gap:6px;
  font-size: 13px;
}
.line-info-stops li{ padding-left: 2px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px){
  .sidebar{
    position:fixed;
    top: var(--topbar-h); bottom:0; left:0;
    width: min(84vw, 340px);
    margin-left: -100%;
    box-shadow: 6px 0 24px rgba(0,0,0,.2);
  }
  .sidebar.open{ margin-left:0; }
  .sidebar-backdrop.show{ display:block; }

  .line-info{
    left:12px; right:12px; width:auto;
    top:auto; bottom:12px;
    max-height: 46vh;
  }
  .map-hint{ font-size:11px; }
}

@media (min-width: 861px){
  #menuToggle{ display:none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sidebar{ transition:none; }
}