/* =====================================================================
   Anasayfa hızlı arama (hsr-) + Talep Formu kartı
   tokur.com.tr ile birebir aynı yapı; renkler Balcity paletine göre:
     Tokur tuğla kırmızısı rgba(143,43,47)  ->  Balcity turuncu #FF3600
     Tokur lacivert       rgba(39,54,79)    ->  Balcity lacivert #000F8F
   Mobil öncelikli.
   ===================================================================== */

.hsr {
    --hsr-ana: #FF3600;
    --hsr-ana-koyu: #d92e00;
    --hsr-lacivert: #000F8F;
    --hsr-lacivert-65: rgba(0, 15, 143, .65);
    --hsr-lacivert-14: rgba(0, 15, 143, .14);
    margin-top: 14px;
}

.hsr *,
.hsr *::before,
.hsr *::after {
    box-sizing: border-box;
}

.hsr-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }

.hsr-kart,
.hsr-cta { background: #fff; border: 1px solid rgba(0, 15, 143, .12); border-radius: 12px; padding: 14px; min-width: 0; }

.hsr-ust { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; }

.hsr-ikon {
    align-items: center; background: #eef0fb; border-radius: 10px;
    color: var(--hsr-lacivert); display: inline-flex; flex: 0 0 auto;
    height: 38px; justify-content: center; width: 38px;
}
.hsr-ikon svg { height: 21px; width: 21px; }

.hsr-baslik { color: var(--hsr-lacivert); font-size: 19px; font-weight: 600; line-height: 1.2; margin: 0; }
.hsr-alt { color: #5b6675; font-size: 12.5px; margin: 2px 0 0; }

.hsr-form { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0; }
.hsr-alan { min-width: 0; }
.hsr-etiket { color: #5b6675; display: block; font-size: 12px; margin-bottom: 4px; font-weight: 400; }
.hsr-ipucu { color: #64707f; font-size: 11px; }

/* tsl-select.js devreye girene kadar (ve JS kapalıyken) native select'ler
   de aynı kutuya benzesin. */
.hsr-form select {
    background: #fff; border: 1px solid #d5dbe3; border-radius: 10px;
    color: #1f2937; font-size: 14px; height: 42px; padding: 8px 10px; width: 100%;
}

/* Mahalle adları tetik genişliğine sığmıyor; panel içeriği kadar genişleyebilsin. */
.hsr-form .tsl-panel {
    max-width: 280px; min-width: 100%; right: auto; width: max-content;
}
.hsr-form .tsl-secenek { overflow-wrap: anywhere; }

.hsr-buton {
    align-items: center; background: var(--hsr-ana); border: 0; border-radius: 10px;
    color: #fff; cursor: pointer; display: flex; font-size: 15px; font-weight: 600;
    gap: 8px; height: 42px; justify-content: center; width: 100%;
    transition: background .15s ease;
}
.hsr-buton:hover { background: var(--hsr-ana-koyu); }
.hsr-buton svg { height: 17px; width: 17px; }
.hsr-alan-buton { align-self: end; grid-column: 1 / -1; }

.hsr-kisayollar {
    border-top: 1px solid #eef1f5; display: grid; gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; padding-top: 12px;
}

.hsr-kisayol {
    align-items: center; border: 1px solid #e6eaf0; border-radius: 10px;
    color: var(--hsr-lacivert); display: flex; gap: 8px; padding: 9px 10px;
    text-decoration: none; transition: background .15s ease, border-color .15s ease;
    min-width: 0;
}
.hsr-kisayol:hover { background: #f8f9fb; border-color: #c7cedb; color: var(--hsr-lacivert); }
.hsr-kisayol-ikon { color: var(--hsr-lacivert-65); flex: 0 0 auto; }
.hsr-kisayol-ikon svg { display: block; height: 22px; width: 22px; }
.hsr-kisayol-ad {
    flex: 1 1 auto; font-size: 13.5px; font-weight: 500;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hsr-kisayol-ok { color: #64707f; font-size: 18px; line-height: 1; }

.hsr-cta {
    align-items: center; background: linear-gradient(180deg, #fbfcfd 0%, #f3f6f9 100%);
    display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.hsr-cta-ikon {
    align-items: center; background: #fff; border: 1px solid #e6eaf0; border-radius: 12px;
    color: var(--hsr-ana); display: inline-flex; height: 44px;
    justify-content: center; margin-bottom: 10px; width: 44px;
}
.hsr-cta-ikon svg { height: 22px; width: 22px; }
.hsr-cta-ust { color: #5b6675; font-size: 12.5px; margin: 0 0 2px; }
.hsr-cta-baslik { color: var(--hsr-lacivert); font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.hsr-cta-metin { color: #5b6675; font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; max-width: 240px; }
.hsr-cta-buton {
    align-items: center; background: var(--hsr-ana); border-radius: 10px; color: #fff;
    display: inline-flex; font-size: 14px; font-weight: 600; gap: 6px; justify-content: center;
    padding: 11px 16px; text-decoration: none; width: 100%;
    transition: background .15s ease;
}
.hsr-cta-buton:hover { background: var(--hsr-ana-koyu); color: #fff; }

@media (min-width: 576px) {
    .hsr-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hsr-kisayollar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .hsr-grid { gap: 14px; grid-template-columns: minmax(0, 1fr) 248px; }
    .hsr-kart, .hsr-cta { padding: 16px; }
    .hsr-form { column-gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobilde iOS zoom'u engelle (Tokur custom.css ile aynı) */
@media (max-width: 767px) {
    .hsr-form select,
    .hsr .tsl-arama input {
        font-size: 16px !important;
    }
}


/* =====================================================================
   Modern açılır liste (tsl-) — tsl-select.js
   ===================================================================== */
.tsl { position: relative; width: 100%; }
select.tsl-native { display: none !important; }

.tsl-tetik {
    align-items: center;
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 10px;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 14px;
    gap: 8px;
    height: 42px;
    justify-content: space-between;
    padding: 8px 12px;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}
.tsl-tetik:hover:not(:disabled) { border-color: #9aa7b8; }
.tsl-acik .tsl-tetik,
.tsl-tetik:focus-visible {
    border-color: #000F8F;
    box-shadow: 0 0 0 3px rgba(0, 15, 143, .14);
    outline: none;
}
.tsl-tetik:disabled { background: #f1f3f6; color: #8b93a1; cursor: not-allowed; }

.tsl-etiket { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsl-etiket-bos { color: #64707f; }

.tsl-ok {
    border: solid #64748b;
    border-width: 0 2px 2px 0;
    flex: 0 0 auto;
    height: 8px;
    margin-top: -4px;
    transform: rotate(45deg);
    transition: transform .18s ease, margin-top .18s ease;
    width: 8px;
}
.tsl-acik .tsl-ok { margin-top: 2px; transform: rotate(225deg); }

.tsl-panel {
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    left: 0;
    margin-top: 6px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    visibility: hidden;
    z-index: 60;
}
.tsl-acik .tsl-panel { opacity: 1; transform: none; visibility: visible; }

.tsl-arama { border-bottom: 1px solid #eef1f5; padding: 8px; }
.tsl-arama input {
    border: 1px solid #dfe4ea;
    border-radius: 8px;
    font-size: 14px;
    height: 36px;
    padding: 6px 10px;
    width: 100%;
}
.tsl-arama input:focus { border-color: rgba(0, 15, 143, .6); outline: none; }

.tsl-liste { list-style: none; margin: 0; max-height: 248px; overflow-y: auto; padding: 6px; }
.tsl-liste::-webkit-scrollbar { width: 8px; }
.tsl-liste::-webkit-scrollbar-thumb { background: #d5dbe3; border-radius: 8px; }

.tsl-secenek {
    border-radius: 8px;
    color: #273241;
    cursor: pointer;
    font-size: 14px;
    padding: 9px 32px 9px 12px;
    position: relative;
    user-select: none;
}
.tsl-secenek:hover, .tsl-odak { background: #f1f4f8; }
.tsl-secili { background: #eef0fb; color: #000F8F; font-weight: 600; }
.tsl-secili::after {
    border: solid #000F8F;
    border-width: 0 2px 2px 0;
    content: '';
    height: 10px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    width: 5px;
}
.tsl-bos { color: #64707f; font-size: 13px; padding: 14px; text-align: center; }

/* ---- Çoklu seçim (tsl-coklu) ---- */
.tsl-coklu .tsl-tetik { height: auto; min-height: 42px; padding: 5px 12px; }

.tsl-coklu .tsl-etiket {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.tsl-cip {
    align-items: center;
    background: #eef0fb;
    border-radius: 6px;
    color: #000F8F;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12.5px;
    gap: 5px;
    line-height: 1;
    max-width: 100%;
    min-width: 0;
    padding: 5px 6px 5px 8px;
}

.tsl-cip-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsl-cip-kirp { flex: 0 1 auto; min-width: 48px; }

.tsl-cip-sil {
    color: #64707f;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}
.tsl-cip-sil:hover { color: #FF3600; }

.tsl-cip-fazla { background: #dfe4ea; color: #4b5563; padding: 5px 8px; }
.tsl-cip[hidden] { display: none; }

.tsl-coklu .tsl-secenek { padding-left: 34px; padding-right: 12px; }
.tsl-coklu .tsl-secenek::before {
    border: 1.5px solid #c7cedb;
    border-radius: 5px;
    content: '';
    height: 16px;
    left: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
}
.tsl-coklu .tsl-secili { background: transparent; font-weight: 500; }
.tsl-coklu .tsl-secili:hover { background: #f1f4f8; }
.tsl-coklu .tsl-secili::before {
    background: #000F8F;
    border-color: #000F8F;
}
.tsl-coklu .tsl-secili::after {
    border-color: #fff;
    border-width: 0 2px 2px 0;
    height: 9px;
    left: 15px;
    right: auto;
    top: 50%;
    transform: translateY(-62%) rotate(45deg);
    width: 5px;
}

.tsl-temizle {
    background: none;
    border: 0;
    border-top: 1px solid #eef1f5;
    color: #FF3600;
    cursor: pointer;
    display: block;
    font-size: 13px;
    padding: 9px 12px;
    text-align: left;
    width: 100%;
}
.tsl-temizle:hover { background: #f8f9fb; }