@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

.nlm-bayi-page,
.nlm-bayi-page * {
box-sizing: border-box;
}

.nlm-bayi-page {
--nlm-dark: #33414c;
--nlm-blue-soft: #dce8ec;
--nlm-cream: #f3f0e5;
--nlm-border: #b9aa92;
--nlm-accent: #a9724d;
--nlm-light: #ffffff;
--nlm-text: #4d555a;
--nlm-muted: #879097;

width: 100%;
background: #fbfbfa;
font-family: Arial, Helvetica, sans-serif;
color: var(--nlm-text);
overflow: hidden;
}

/* HERO */

.nlm-bayi-hero {
position: relative;
min-height: 245px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
linear-gradient(90deg, #dfeaec 0%, #d6e3e7 50%, #e5eef0 100%);
}

.nlm-bayi-hero::before,
.nlm-bayi-hero::after {
content: "";
position: absolute;
background-image: radial-gradient(circle, rgba(70, 83, 92, .7) 1.5px, transparent 1.8px);
background-size: 8px 8px;
opacity: .55;
pointer-events: none;
}

.nlm-bayi-hero::before {
width: 420px;
height: 170px;
right: 9%;
top: 16px;
clip-path: polygon(0 25%, 15% 0, 34% 18%, 55% 4%, 72% 30%, 89% 15%, 100% 58%, 82% 86%, 56% 72%, 30% 100%, 8% 68%);
}

.nlm-bayi-hero::after {
width: 180px;
height: 80px;
left: 27%;
bottom: 5px;
opacity: .16;
clip-path: polygon(0 50%, 15% 15%, 45% 35%, 67% 0, 100% 44%, 84% 100%, 36% 78%);
}

.nlm-bayi-hero-inner {
position: relative;
z-index: 2;
width: min(900px, 92%);
text-align: center;
padding: 25px 20px;
}

.nlm-bayi-hero h1 {
position: relative;
margin: 0;
color: transparent;
font-size: 0;
line-height: 1;
}

.nlm-bayi-hero h1::before {
content: "BAYİ AĞIMIZ";
display: block;
color: var(--nlm-dark);
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: clamp(32px, 4vw, 52px);
font-weight: 300;
letter-spacing: 2px;
line-height: 1.15;
}

.nlm-bayi-hero h1::after {
content: "";
display: block;
width: 85px;
height: 2px;
margin: 18px auto 16px;
background: #b18b58;
}

.nlm-bayi-hero-inner::after {
content: "Size en yakın Regnum Carpet satış noktasını harita üzerinden kolayca keşfedin.";
display: block;
max-width: 660px;
margin: 0 auto;
color: #66747d;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.8;
letter-spacing: .1px;
}

/* MAIN */

.nlm-bayi-content {
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: 42px 20px 80px;
}

.nlm-bayi-content::before,
.nlm-bayi-content::after {
content: "";
position: absolute;
top: 0;
width: 180px;
height: 420px;
opacity: .18;
pointer-events: none;
background-image:
linear-gradient(35deg, transparent 49%, #d8dee0 50%, transparent 51%),
linear-gradient(145deg, transparent 49%, #d8dee0 50%, transparent 51%);
background-size: 42px 42px;
}

.nlm-bayi-content::before {
left: -120px;
}

.nlm-bayi-content::after {
right: -120px;
}

/* MAP */

.nlm-bayi-map-card {
position: relative;
z-index: 1;
background: #fff;
border: 1px solid rgba(51, 65, 76, .08);
box-shadow: 0 15px 38px rgba(39, 52, 58, .08);
overflow: hidden;
}

.nlm-bayi-map-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
min-height: 70px;
padding: 16px 24px;
border-bottom: 1px solid #edf0f0;
background: #fcfcfb;
}

.nlm-bayi-map-top strong {
position: relative;
color: transparent;
font-size: 0;
line-height: 1;
}

.nlm-bayi-map-top strong::before {
content: "REGNUM CARPET YETKİLİ SATICILARI";
display: block;
color: var(--nlm-dark);
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
}

.nlm-bayi-map-top strong::after {
content: "Türkiye genelindeki seçkin satış noktalarımız";
display: block;
margin-top: 7px;
color: #909ba1;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
}

.nlm-bayi-map-top span {
position: relative;
color: transparent;
font-size: 0;
line-height: 1;
text-align: right;
}

.nlm-bayi-map-top span::before {
content: "Şehrinizi seçin";
display: block;
color: #8c704c;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 500;
}

.nlm-bayi-map-top span::after {
content: "Harita üzerinden bayileri görüntüleyin";
display: block;
margin-top: 7px;
color: #98a1a6;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 400;
}

.nlm-bayi-map {
width: 100%;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
padding: 18px 26px 14px;
background:
radial-gradient(circle at 50% 40%, rgba(243, 240, 229, .5) 0%, rgba(255,255,255,0) 60%),
#fff;
}

.nlm-bayi-map svg {
display: block;
width: 100%;
max-width: 1080px;
height: auto;
}

.nlm-bayi-map svg .nlm-map-city {
cursor: pointer;
outline: none;
}

.nlm-bayi-map svg .nlm-map-city path,
.nlm-bayi-map svg .nlm-map-city polygon,
.nlm-bayi-map svg .nlm-map-city polyline {
fill: #f4f1e9 !important;
stroke: var(--nlm-border) !important;
stroke-width: 1.1px !important;
transition: fill .2s ease, stroke .2s ease, opacity .2s ease;
}

.nlm-bayi-map svg .nlm-map-city.has-dealer path,
.nlm-bayi-map svg .nlm-map-city.has-dealer polygon,
.nlm-bayi-map svg .nlm-map-city.has-dealer polyline {
fill: #e9e3d3 !important;
}

.nlm-bayi-map svg .nlm-map-city:hover path,
.nlm-bayi-map svg .nlm-map-city:hover polygon,
.nlm-bayi-map svg .nlm-map-city:hover polyline,
.nlm-bayi-map svg .nlm-map-city:focus path,
.nlm-bayi-map svg .nlm-map-city:focus polygon,
.nlm-bayi-map svg .nlm-map-city:focus polyline {
fill: #c9b58e !important;
stroke: #8c7555 !important;
}

.nlm-bayi-map svg .nlm-map-city.is-active path,
.nlm-bayi-map svg .nlm-map-city.is-active polygon,
.nlm-bayi-map svg .nlm-map-city.is-active polyline {
fill: var(--nlm-accent) !important;
stroke: #74492f !important;
}

.nlm-map-loading,
.nlm-map-error {
width: 100%;
padding: 90px 20px;
color: var(--nlm-muted);
text-align: center;
font-size: 14px;
}

.nlm-map-error {
color: #a24f41;
}

.nlm-map-tooltip {
position: absolute;
z-index: 10;
min-width: 150px;
padding: 10px 12px;
border-radius: 5px;
background: var(--nlm-dark);
color: #fff;
box-shadow: 0 10px 26px rgba(0,0,0,.16);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition: opacity .15s ease, transform .15s ease;
}

.nlm-map-tooltip.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.nlm-map-tooltip strong,
.nlm-map-tooltip span {
display: block;
}

.nlm-map-tooltip strong {
margin-bottom: 4px;
font-size: 13px;
}

.nlm-map-tooltip span {
color: #d9e3e7;
font-size: 12px;
}

/* FILTER */

.nlm-bayi-filter-area {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
max-width: 860px;
margin: 28px auto 22px;
}

.nlm-bayi-filter-area select,
.nlm-bayi-filter-area button {
height: 47px;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
}

.nlm-bayi-filter-area select {
width: 100%;
padding: 0 15px;
border: 1px solid #d4d9da;
background: #fff;
color: var(--nlm-text);
outline: none;
cursor: pointer;
}

.nlm-bayi-filter-area select:focus {
border-color: var(--nlm-accent);
}

.nlm-bayi-filter-area select:disabled {
cursor: not-allowed;
opacity: .55;
background: #f2f3f3;
}

#nlm-bayi-reset {
padding: 0 18px;
border: 1px solid var(--nlm-dark);
background: var(--nlm-dark);
color: #fff;
cursor: pointer;
transition: .2s ease;
}

#nlm-bayi-reset:hover {
background: var(--nlm-accent);
border-color: var(--nlm-accent);
}

/* RESULT */

.nlm-bayi-result {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
max-width: 1180px;
margin: 0 auto;
padding: 17px 20px;
border-left: 4px solid var(--nlm-accent);
background: #f1f3f2;
}

.nlm-bayi-result span,
.nlm-bayi-result strong {
display: block;
}

.nlm-bayi-result span {
margin-bottom: 4px;
color: var(--nlm-muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
}

.nlm-bayi-result strong {
color: var(--nlm-dark);
font-size: 14px;
letter-spacing: .25px;
}

.nlm-bayi-result b {
color: var(--nlm-accent);
white-space: nowrap;
font-size: 14px;
}

/* TABLE */

.nlm-bayi-table-wrap {
position: relative;
z-index: 2;
max-width: 1180px;
margin: 16px auto 0;
overflow-x: auto;
border: 1px solid #e6e8e8;
background: #fff;
box-shadow: 0 12px 30px rgba(39, 52, 58, .05);
}

.nlm-bayi-table {
width: 100%;
min-width: 940px;
border-collapse: collapse;
}

.nlm-bayi-table th {
padding: 15px 12px;
background: #f0f1ef;
border-bottom: 1px solid #dedfdd;
color: #687178;
text-align: left;
font-size: 12px;
font-weight: 700;
}

.nlm-bayi-table td {
padding: 15px 12px;
border-bottom: 1px solid #eef0ef;
color: #626b70;
vertical-align: top;
font-size: 13px;
line-height: 1.55;
}

.nlm-bayi-table tbody tr:last-child td {
border-bottom: 0;
}

.nlm-bayi-table tbody tr:hover td {
background: #fcfaf6;
}

.nlm-row-no {
width: 45px;
color: var(--nlm-accent) !important;
font-weight: 700;
}

.nlm-firm-name {
min-width: 235px;
color: var(--nlm-dark) !important;
font-weight: 700;
}

.nlm-address {
min-width: 300px;
}

.nlm-empty-row td {
padding: 35px 15px;
color: var(--nlm-muted);
text-align: center;
font-style: italic;
}

/* MOBILE */

@media (max-width: 760px) {

.nlm-bayi-hero {
min-height: 215px;
}

.nlm-bayi-hero::before {
right: -100px;
opacity: .38;
}

.nlm-bayi-hero h1::before {
font-size: 31px;
letter-spacing: 1px;
}

.nlm-bayi-hero-inner::after {
font-size: 12px;
line-height: 1.65;
}

.nlm-bayi-content {
padding: 28px 14px 55px;
}

.nlm-bayi-map-top {
align-items: flex-start;
flex-direction: column;
padding: 15px;
}

.nlm-bayi-map-top span {
text-align: left;
}

.nlm-bayi-map {
min-height: 245px;
padding: 16px 8px 10px;
}

.nlm-bayi-filter-area {
grid-template-columns: 1fr;
}

#nlm-bayi-reset {
width: 100%;
}

.nlm-bayi-result {
align-items: flex-start;
flex-direction: column;
}

.nlm-bayi-result b {
white-space: normal;
}

}