/* T-027: contact page (SayfaDetay, IletisimMi). Loaded synchronously in the ContactTitle section after product-page.css
   (title band); the theme bundle arrives async, so the layout geometry is fixed here. Brand palette as footer/T-026. */
/* Hero: the map starts right under the header. On >= 992px the title is a wide, low bar floating at the top of the map
   (user design, 17 Oct), 8px from the top like Google's place card. Its right edge follows the content container; its left
   edge follows the container too but never starts before 268px (8px gap), so Google's own place card (iframe top-left, ~8..260px) is never covered. The pin (centre), Google
   logo and attribution (bottom) stay visible. Below 992px the bar is the normal title band above the map (column-reverse
   keeps the DOM order map -> title). */
.sh-contact-hero { position: relative; display: flex; flex-direction: column-reverse; }
.sh-contact-map { position: relative; height: 300px; background: #e9ecef; border-bottom: 1px solid #e6e8eb; }
.sh-contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.sh-contact-hero-layer { position: relative; background: #f5f5f5; border-bottom: 1px solid #eee; }
#page-title.sh-pp-title.sh-contact-box { background: transparent; border: 0; }
@media (min-width: 992px) {
    .sh-contact-hero { display: block; --shc-edge: 15px; } /* .sh-contact is full width (max 1170) below 1200px */
    .sh-contact-map { height: 500px; border-bottom: 0; }
    .sh-contact-hero-layer { position: absolute; top: 8px; left: 0; right: 0; background: none; border: 0; pointer-events: none; } /* same 8px inset as Google's place card */
    .sh-contact-hero-layer > .container { width: auto; max-width: none; margin: 0 var(--shc-edge) 0 max(268px, var(--shc-edge)); padding: 0; } /* 8px gap to the place card (8..260px) */
    #page-title.sh-pp-title.sh-contact-box {
        display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; margin: 0; padding: 20px 32px 22px;
        background: rgba(255, 255, 255, .97); border-top: 4px solid #b52129; border-radius: 12px;
        box-shadow: 0 18px 44px rgba(16, 18, 22, .16); text-align: left; pointer-events: auto;
    }
    #page-title.sh-pp-title.sh-contact-box .breadcrumb { margin-bottom: 8px !important; }
    #page-title.sh-pp-title.sh-contact-box .sh-pp-sub { margin: 0; text-align: right; }
    #page-title.sh-pp-title.sh-contact-box script { display: none; }
}
@media (min-width: 1200px) { .sh-contact-hero { --shc-edge: calc((100% - 1140px) / 2); } }

#content .content-wrap:has(> .sh-contact) { padding-top: 0; }
.sh-contact { max-width: 1170px; padding-top: 56px; padding-bottom: 72px; color: #4a5058; }
.sh-contact *, .sh-contact *::before, .sh-contact *::after { box-sizing: border-box; }
.sh-contact svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }

.sh-contact .sh-contact-title {
    position: relative; margin: 0 0 22px; padding: 0 0 12px; color: #25282d;
    font: 700 22px/1.3 'Raleway', Arial, sans-serif; letter-spacing: -.2px; text-transform: none;
}
.sh-contact .sh-contact-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: #b52129; }

/* Form */
.sh-contact-form { padding: 32px 34px 34px; background: #fff; border: 1px solid #e2e5e8; border-radius: 12px; box-shadow: 0 10px 30px rgba(37, 40, 45, .06); }
.sh-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sh-field { margin: 0 0 18px; }
.sh-contact .sh-field label { display: block; margin: 0 0 6px; color: #4a5058; font: 600 13px/1.4 'Lato', Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.sh-contact .sh-field label span { color: #b52129; }
.sh-contact .sh-field input, .sh-contact .sh-field textarea {
    display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px; border: 1px solid #d8dde1; border-radius: 8px;
    background: #fff; color: #25282d; font: 15px/1.4 'Lato', Arial, sans-serif; box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sh-contact .sh-field textarea { height: auto; min-height: 168px; padding: 12px 14px; resize: vertical; }
.sh-contact .sh-field input::placeholder, .sh-contact .sh-field textarea::placeholder { color: #9aa0a6; }
.sh-contact .sh-field input:focus, .sh-contact .sh-field textarea:focus { outline: none; border-color: #b52129; box-shadow: 0 0 0 3px rgba(181, 33, 41, .15); }
.sh-contact-submit {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 160px; margin: 4px 0 0; padding: 12px 28px;
    border: 0; border-radius: 8px; background: #b52129; color: #fff; cursor: pointer;
    font: 700 14px/1.2 'Lato', Arial, sans-serif; letter-spacing: .04em; text-transform: none; text-shadow: none; transition: background-color .15s ease;
}
.sh-contact-submit:hover { background: #d23a41; }
.sh-contact-submit:disabled { opacity: .6; cursor: progress; }
.sh-contact-submit:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b52129; } /* theme :focus { outline: none !important } */
.sh-contact-success { position: relative; margin: 0 0 18px; padding: 14px 44px 14px 16px; border: 1px solid #cfe8d7; border-radius: 8px; background: #eef7f1; color: #1f5f33; font-size: 14px; line-height: 1.5; }
.sh-contact-success .close { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; opacity: .7; cursor: pointer; }

/* Info column */
.sh-contact-card { overflow: hidden; background: #fff; border: 1px solid #e2e5e8; border-radius: 12px; }
.sh-contact-photo { display: block; }
.sh-contact-photo img { display: block; width: 100%; height: 220px; margin: 0; object-fit: cover; object-position: 50% 55%; }
.sh-contact-card-body { padding: 26px 28px 28px; }
.sh-contact-list { margin: 0; padding: 0; list-style: none; }
.sh-contact-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: #25282d; font-size: 15px; line-height: 1.55; }
.sh-contact-list li + li { margin-top: 14px; }
.sh-contact-list svg { margin-top: 2px; color: #b52129; }
.sh-contact-list address { margin: 0; font-style: normal; }
.sh-contact-label { display: block; margin-bottom: 1px; color: #8a9097; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.sh-contact a { color: #25282d; text-decoration: none; }
.sh-contact a:hover { color: #b52129; }
.sh-contact a:focus-visible { border-radius: 3px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b52129; }
.sh-contact .sh-contact-directions {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #b52129;
    font: 700 12px/1.2 'Raleway', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}

/* Dealers (shared _DealerCards; footer styles are scoped to #footer) */
.sh-contact-dealers { margin-top: 36px; }
.sh-contact .sh-dealer { position: relative; padding: 18px 20px 16px 22px; border: 1px solid #e2e5e8; border-radius: 10px; background: #fff; }
.sh-contact-dealer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sh-contact .sh-dealer::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: #b52129; }
.sh-contact .sh-dealer p, .sh-contact .sh-dealer address { margin: 0; }
.sh-contact .sh-dealer-region { color: #b52129; font: 700 11px/1.3 'Raleway', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.sh-contact .sh-dealer-name { margin-top: 6px; color: #25282d; font-size: 15px; font-weight: 700; line-height: 1.4; }
.sh-contact .sh-dealer-address { margin-top: 4px; color: #646970; font-size: 13.5px; font-style: normal; line-height: 1.6; text-wrap: pretty; }
.sh-contact .sh-dealer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 13.5px; }
.sh-contact .sh-dealer-links a { display: inline-flex; align-items: center; gap: 8px; }
.sh-contact .sh-dealer-links svg { width: 14px; height: 14px; flex-basis: 14px; color: #b52129; }

@media (max-width: 991.98px) {
    .sh-contact-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .sh-contact-aside { order: -1; } /* phone/address first on small screens */
    .sh-contact-photo img { height: 240px; }
}
@media (max-width: 575.98px) {
    .sh-contact { padding-top: 28px; padding-bottom: 48px; }
    .sh-contact-form { padding: 24px 20px 26px; }
    .sh-form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sh-contact-dealer-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .sh-contact-submit { width: 100%; }
    .sh-contact-card-body { padding: 22px 20px 24px; }
    .sh-contact-photo img { height: 200px; }
}