*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#00AEEF;color:#111}.app{max-width:900px;margin:auto;background:#f5f5dc;min-height:100vh;border-left:4px solid #c0392b;border-right:4px solid #c0392b}header{padding:18px 20px;background:#f5f5dc;border-bottom:4px solid #c0392b;display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:24px;margin:0}button{border:0;border-radius:8px;padding:12px 18px;font-weight:700;cursor:pointer;background:#e53935;color:#fff}.secondary{background:#34495e}header button{background:#34495e;font-size:12px}main{padding:18px}.panel{background:#fff8dc;border:2px solid #c0392b;border-radius:12px;padding:18px;margin-bottom:18px}label{display:block;font-weight:700;margin:5px 0 7px}select{width:100%;padding:12px;border:1px solid #aaa;border-radius:7px;font-size:16px;margin-bottom:15px;background:#fff}.buttons{display:flex;gap:10px;flex-wrap:wrap}.result{margin-top:16px;padding:15px;border:2px solid #c0392b;border-radius:10px;background:#fff}.result.hidden{display:none}#routeName{font-size:19px;font-weight:700;color:#2c3e50;margin-bottom:8px}#times{font-family:Consolas,monospace;font-weight:700;color:#00aEEF;white-space:pre-wrap;margin:0 0 10px}.stats{font-weight:600;color:#333}.mapwrap{background:#fff;padding:5px;border-radius:12px}.leaflet-container{height:520px;width:100%;border-radius:9px}.stop-label{font-size:11px;font-weight:700;color:#111}.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}.modal.hidden{display:none}.modalbox{position:relative;background:#fff;border-radius:12px;padding:28px;text-align:center;width:min(390px,100%);box-shadow:0 10px 35px #0005}.modalbox h2{margin-top:0}.modalbox h3{color:#c0392b}.close{position:absolute;right:10px;top:8px;background:none;color:#333;font-size:28px;padding:3px 10px}@media(max-width:600px){header{align-items:flex-start}h1{font-size:20px}.leaflet-container{height:430px}main{padding:10px}.panel{padding:13px}}
/* SON DÜZEN: HAKKINDA üstte kalır, haritanın altına kaymaz */
.app { position: relative; }
header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  width: 100%;
  z-index: 20;
}
header button {
  position: relative;
  z-index: 21;
  flex-shrink: 0;
}
main { position: relative; z-index: 1; }
.mapwrap { position: relative; z-index: 1; }
.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
}


/* Konum butonu */
.buttons {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.location {
  background:#198754;
}
.location:hover {
  filter:brightness(0.95);
}

/* Sayfa başlığı ve paylaş düğmesi */
.brand{display:flex;align-items:center;gap:12px;min-width:0}

.brand h1{font-size:22px}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-actions button{white-space:nowrap}
#shareBtn{background:#198754}
@media(max-width:600px){header{flex-wrap:wrap;align-items:center}.brand{flex:1 1 100%}.brand h1{font-size:18px}.header-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.header-actions button{font-size:11px;padding:11px 12px}}



/* Haritada varış noktası etiketi sürekli görünür */
.arrival-label{
  background:#198754!important;
  border:2px solid #fff!important;
  border-radius:7px!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:700!important;
  padding:5px 8px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.28)!important;
}
.arrival-label:before{border-top-color:#198754!important}

.language-label{font-size:12px;margin:0;white-space:nowrap}.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#languageSelect{width:auto;min-width:125px;margin:0;padding:10px;font-size:14px}

#map{display:block;width:100%;height:520px;min-height:520px;}

/* Konuma en yakın duraklar */
.nearest-stops{margin-top:15px;padding:14px;border:2px solid #198754;border-radius:10px;background:#f0fff7}
.nearest-stops.hidden{display:none}
.nearest-stops h3{margin:0 0 7px;color:#145c3b;font-size:17px}
#nearestStopsNote{margin:0 0 10px;font-size:13px;color:#3d5549}
.nearest-stops-list{display:grid;gap:7px}
.nearest-stop-item{width:100%;text-align:left;background:#fff;color:#173b2b;border:1px solid #b5d9c5;border-radius:7px;padding:10px 12px;font-weight:600;line-height:1.4}
.nearest-stop-item:hover{background:#dff7e9}

/* Sağdan açılan üç nokta menüsü */
.menu-toggle{width:42px;height:42px;padding:0;border-radius:9px;font-size:30px;line-height:1;background:#34495e;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:100000;opacity:1;transition:opacity .22s ease}.menu-overlay.hidden{display:none}
.side-menu{position:fixed;top:0;right:0;width:min(320px,86vw);height:100vh;height:100dvh;background:#fff8dc;border-left:4px solid #c0392b;box-shadow:-8px 0 28px rgba(0,0,0,.2);z-index:100001;padding:20px;transform:translateX(110%);transition:transform .25s ease;display:flex;flex-direction:column;gap:13px;overflow-y:auto}
.side-menu.open{transform:translateX(0)}.side-menu-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #ddd;font-size:20px}.menu-close{background:transparent;color:#333;font-size:30px;padding:0 8px;line-height:1}
.side-menu .language-label{display:block;margin:8px 0 0;font-size:14px}.side-menu #languageSelect{width:100%;margin:0;padding:12px}.drawer-action{width:100%;text-align:left;padding:14px 15px;background:#34495e;color:white;border-radius:9px;font-size:15px}.drawer-action.share-action{background:#198754}body.menu-open{overflow:hidden}
@media(max-width:600px){header{flex-wrap:nowrap;align-items:center}.brand{flex:1 1 auto;min-width:0}.brand h1{font-size:17px}.header-actions{width:auto;justify-content:flex-end;flex-wrap:nowrap}.menu-toggle{width:38px;height:38px}}

/* Android tarzı, belirgin üç nokta menü düğmesi */
.menu-toggle{
  width:48px!important;height:48px!important;min-width:48px!important;
  padding:0!important;border:2px solid #ffffff!important;border-radius:50%!important;
  background:#1976d2!important;color:#ffffff!important;
  font-family:Arial,sans-serif!important;font-size:34px!important;font-weight:900!important;
  line-height:1!important;box-shadow:0 3px 8px rgba(0,0,0,.32)!important;
  outline:2px solid #1976d2;outline-offset:2px;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex-shrink:0!important;position:relative;z-index:22;
}
.menu-toggle:active{transform:scale(.94);background:#125ca1!important}
.menu-toggle:focus-visible{outline:3px solid #ffca28;outline-offset:3px}
@media(max-width:600px){.menu-toggle{width:46px!important;height:46px!important;min-width:46px!important;font-size:33px!important}}


/* Hakkında: destek bilgisi ve YouTube kanal düğmesi */
.support-credit { margin: 16px 0 12px; font-size: 16px; }
.youtube-channel-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 8px; background: #d9232e; color: #fff !important; text-decoration: none; font-weight: 700; box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.youtube-channel-button:hover { background: #b91c26; }
.youtube-channel-button:focus-visible { outline: 3px solid #1976d2; outline-offset: 3px; }

/* Destek ve YouTube bağlantısı yan menüde, Paylaş bölümünün altında */
.drawer-support{padding:14px 16px;color:var(--text-color,#243447);font-size:14px;border-top:1px solid rgba(100,116,139,.22);margin-top:8px}
.drawer-youtube-button{display:flex;align-items:center;justify-content:center;margin:0 12px 12px;text-decoration:none;box-sizing:border-box}


/* DiyarBus logo ve üst başlık tarihi */
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.app-logo{width:76px;height:76px;object-fit:contain;flex:0 0 auto;border-radius:50%;background:#08265d}
.brand-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.current-date{font-size:13px;font-weight:700;color:#173b73;text-transform:capitalize;letter-spacing:.2px}
@media(max-width:600px){.app-logo{width:58px;height:58px}.brand{gap:9px}.brand-text h1{font-size:16px;line-height:1.2}.current-date{font-size:11px}}

/* LOGO BÜYÜTÜLDÜ */
.app-logo{width:96px;height:96px}
@media(max-width:600px){.app-logo{width:74px;height:74px}}

/* Tema seçenekleri */
body[data-theme="light"]{background:#eaf2f8;color:#17202a}
body[data-theme="light"] .app,body[data-theme="light"] header{background:#f8fbff}
body[data-theme="light"] .panel{background:#ffffff;border-color:#6c8ebf}
body[data-theme="dark"]{background:#111827;color:#f3f4f6}
body[data-theme="dark"] .app,body[data-theme="dark"] header{background:#111827;color:#f3f4f6}
body[data-theme="dark"] .panel,body[data-theme="dark"] .side-menu{background:#1f2937;color:#f3f4f6;border-color:#60a5fa}
body[data-theme="dark"] select,body[data-theme="dark"] .result{background:#374151;color:#fff;border-color:#6b7280}
body[data-theme="dark"] #routeName,body[data-theme="dark"] .stats{color:#f3f4f6}
body[data-theme="colorful"]{background:linear-gradient(135deg,#00b4d8,#7b2ff7,#ff6b6b);color:#172033}
body[data-theme="colorful"] .app{background:#fff0f6}
body[data-theme="colorful"] header{background:linear-gradient(90deg,#ffe66d,#ff9f1c)}
body[data-theme="colorful"] .panel{background:#e0fbfc;border-color:#7b2ff7}
.voice-button{position:fixed;right:18px;bottom:18px;z-index:100002;border:3px solid white;border-radius:999px;background:#1976d2;color:#fff;padding:14px 18px;font-size:17px;box-shadow:0 4px 14px #0005;display:flex;align-items:center;gap:8px}
.voice-button.listening{background:#c62828;animation:voicePulse 1.2s infinite}
.voice-button:focus-visible{outline:4px solid #ffca28;outline-offset:3px}
.voice-status{position:fixed;right:18px;bottom:82px;z-index:100002;max-width:min(320px,85vw);padding:9px 12px;border-radius:8px;background:#fff;color:#222;border:1px solid #777;box-shadow:0 2px 8px #0003;font-size:13px}
@keyframes voicePulse{50%{box-shadow:0 0 0 8px #c6282833}}
@media(max-width:600px){.voice-button{right:12px;bottom:12px;padding:14px 16px;font-size:16px}.voice-status{right:12px;bottom:76px}}

/* Logo daha büyük ve net; aynı logo yan menünün en altında */
.app-logo{width:124px!important;height:124px!important;object-fit:contain!important;background:transparent!important;border-radius:50%;}
.brand{gap:14px!important;}
.brand-text h1{line-height:1.18;}
.menu-logo-wrap{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;align-items:center;gap:5px;border-top:1px solid rgba(100,116,139,.25);color:#173b73;font-weight:800;}
.menu-logo{width:138px;height:138px;max-width:70%;object-fit:contain;display:block;background:transparent;border-radius:50%;}
.theme-switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-top:1px solid rgba(100,116,139,.2);border-bottom:1px solid rgba(100,116,139,.2);}
.theme-switch-copy{display:flex;flex-direction:column;gap:4px;}
.theme-switch-copy strong{font-size:15px;}
.theme-switch-copy span{font-size:13px;opacity:.8;}
.switch{position:relative;display:inline-block;width:54px;height:30px;margin:0;flex:0 0 auto;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch-slider{position:absolute;cursor:pointer;inset:0;background:#b8c1cc;transition:.25s;border-radius:999px;box-shadow:inset 0 0 0 1px #7b8794;}
.switch-slider:before{content:"";position:absolute;width:22px;height:22px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 4px #0004;}
.switch input:checked + .switch-slider{background:#1976d2;box-shadow:inset 0 0 0 1px #145ca5;}
.switch input:checked + .switch-slider:before{transform:translateX(24px);}
.switch input:focus-visible + .switch-slider{outline:3px solid #ffca28;outline-offset:3px;}
.about-app-name{font-size:16px;margin:8px 0;color:#173b73;}
@media(max-width:600px){.app-logo{width:92px!important;height:92px!important}.brand{gap:9px!important}.brand-text h1{font-size:15px!important}.menu-logo{width:122px;height:122px}}