*{box-sizing:border-box}
body{margin:0;background:#f5f8f6;color:#193027;font-family:Arial,sans-serif}
.routeHeader{background:#087f5b;color:#fff;padding:22px max(20px,calc((100% - 1160px)/2));display:flex;gap:18px;align-items:center}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:22px;white-space:nowrap}
.routeHeader h1{margin:0;font-size:28px}.routeHeader p{margin:5px 0 0;opacity:.9}
.routePage{width:min(1160px,calc(100% - 30px));margin:24px auto 60px}
.intro{background:#fff;border-radius:16px;padding:20px;display:flex;gap:15px;box-shadow:0 5px 20px #0000000c;margin-bottom:18px}
.intro>span{font-size:34px}.intro h2{margin:0 0 5px}.intro p{margin:0;color:#61716a}
.filters{display:flex;gap:8px;overflow:auto;padding:2px 0 15px}.filter{border:1px solid #d4e1da;background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;white-space:nowrap}.filter.active{background:#087f5b;color:#fff;border-color:#087f5b}
.routeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.card{background:#fff;border-radius:16px;padding:18px;border:1px solid #e1eae5;cursor:pointer;transition:.15s}.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000012}
.card h3{margin:8px 0}.card p{color:#63736c;margin:0 0 12px;line-height:1.5}.cardMeta{display:flex;gap:7px;flex-wrap:wrap}.pill,.tag{display:inline-block;background:#eaf5ef;color:#087f5b;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}
.detail{margin-top:10px}.hidden{display:none}.back{border:0;background:none;color:#087f5b;font-weight:700;cursor:pointer;padding:8px 0 16px}.detailHead{background:#fff;border-radius:16px;padding:20px;margin-bottom:15px}.detailHead h2{font-size:30px;margin:8px 0}.detailHead p{color:#62736b;line-height:1.5}.meta{display:flex;gap:8px;flex-wrap:wrap}.detailLayout{display:grid;grid-template-columns:380px 1fr;gap:15px}.stops{background:#fff;border-radius:16px;padding:10px}.stop{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:13px;border-bottom:1px solid #edf1ef}.stop:last-child{border-bottom:0}.time{font-weight:800;color:#087f5b}.stop h3{margin:0 0 5px;font-size:16px}.stop p{margin:0;color:#687770;font-size:13px;line-height:1.4}.nav{display:flex;gap:7px;margin-top:8px}.nav a{font-size:12px;text-decoration:none;background:#087f5b;color:#fff;padding:7px 9px;border-radius:8px}
#map{height:620px;border-radius:16px;overflow:hidden;background:#dfe8e2}.warning{font-size:12px;color:#9a5a00;margin-top:7px}
@media(max-width:760px){.routeHeader{padding:16px;display:block}.logo{display:block;margin-bottom:10px}.routeHeader h1{font-size:23px}.routePage{width:min(100% - 20px,600px);margin-top:14px}.routeGrid{grid-template-columns:1fr}.detailLayout{grid-template-columns:1fr}.stops{order:2}#map{height:390px;order:1}.detailHead h2{font-size:24px}}
/* =====================================================
   ROTA MESAFE / SÜRE
===================================================== */

.routeDistances {
    margin: 18px 0 22px;
    padding: 18px;
    background: #f6f9f6;
    border: 1px solid #dfe9df;
    border-radius: 12px;
}

.routeDistanceTitle {
    font-size: 18px;
    font-weight: 700;
    color: #287c35;
    margin-bottom: 14px;
}

.routeDistanceItem {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 0;
    border-bottom: 1px solid #e5ebe5;
}

.routeDistanceItem:last-child {
    border-bottom: 0;
}

.routeDistanceLabel {
    font-weight: 600;
    color: #444;
}

.routeDistanceValue {
    font-weight: 700;
    color: #287c35;
    text-align: right;
}

.routeDistanceBlock {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dfe9df;
}

.routeDistanceBlock strong {
    display: block;
    margin-bottom: 8px;
}

.routeDistanceText {
    line-height: 1.7;
    color: #555;
}

.routeError {
    padding: 25px;
    margin: 15px 0;
    background: #fff7f7;
    border: 1px solid #e5caca;
    border-radius: 10px;
    color: #8a2222;
}

.routeError strong {
    display: block;
    margin-bottom: 6px;
}

@media (max-width: 700px) {

    .routeDistanceItem {
        display: block;
    }

    .routeDistanceLabel {
        display: block;
        margin-bottom: 4px;
    }

    .routeDistanceValue {
        display: block;
        text-align: left;
    }

}