/**
 * File: demov2/assets/css/pages/contact.css
 * Purpose: Əlaqə — iki sütun (forma + əlaqə məlumatları), daxili
 *          validasiya, uğur vəziyyəti, şöbələr sırası və ofis pin-i ilə
 *          Leaflet xəritəsi (üzərində məlumat kartı). Rəngli minimal:
 *          kanal ikonları rəngli qutularda, iş saatı statusu yaşıl/boz pill,
 *          şöbə ikonları rəngli, ofis pin-i brend rəngində.
 */

/* ── İki sütun ── */
.ctop { padding-top: 24px; }
@media (min-width: 1024px) { .ctop { padding-top: 32px; } }
.cgrid { display: grid; gap: 40px; }
@media (min-width: 960px) { .cgrid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
@media (min-width: 1200px) { .cgrid { gap: 96px; } }

/* ── Forma ── */
.cform { display: grid; gap: 20px; }
.cform__row { display: grid; gap: 20px; }
@media (min-width: 640px) { .cform__row { grid-template-columns: 1fr 1fr; } }
.cform .textarea { min-height: 160px; }
.cform__cnt { font-size: 13px; font-variant-numeric: tabular-nums; }
.cform__cnt.is-max { color: var(--danger); }
.cform .check { align-items: flex-start; font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
.cform .check .check__box { margin-top: 1px; }
.cform__ok .link { font-weight: 500; color: var(--text); }
.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.cform__foot .faint { font-size: 14px; }
@media (max-width: 479px) { .cform__foot .btn { width: 100%; } }
.field.has-err .select-native { border-color: var(--danger); }
.field.has-err .check__box { border-color: var(--danger); }
.cphone { display: flex; gap: 8px; }
.cphone__cc { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 50px; padding: 0 14px; border-radius: 10px; background: var(--surface-2); font-weight: 500; font-size: 15px; }
.cphone .input { letter-spacing: .02em; }

/* uğur vəziyyəti */
.csent { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 20px 40px; border-radius: 20px; background: var(--surface); box-shadow: var(--edge); animation: fadeUp .5s var(--ease-out); }
@media (min-width: 768px) { .csent { padding: 48px 40px 56px; } }
.csent .art { width: 180px; }
.csent h2 { margin-top: 12px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.025em; }
.csent p { margin-top: 10px; color: var(--text-2); max-width: 44ch; font-size: 15.5px; }
.csent dl { display: grid; grid-template-columns: auto auto; gap: 8px 24px; margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: var(--tint); font-size: 14.5px; text-align: left; }
.csent dt { color: var(--text-2); }
.csent dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.csent .row { margin-top: 26px; justify-content: center; }

/* ── Əlaqə məlumatları ──
   ikon rəngləri: ofis çəhrayı, saat qızılı, telefon yaşıl, e-poçt mavi (help.html ilə eyni),
   sosial bənövşəyi. Burada hue-brand yoxdur — hər palitrada (zümrüd/kobalt/bənövşəyi)
   yaşıl/mavi/bənövşəyi ilə üst-üstə düşürdü. */
.cinfo { display: flex; flex-direction: column; }
@media (min-width: 960px) { .cinfo { position: sticky; top: calc(var(--hdr-h) + 24px); } }
.cinfo__row { display: flex; gap: 16px; padding-block: 20px; background: var(--taper) top / 100% 1px no-repeat; }
.cinfo__row:first-child { border-top: 0; padding-top: 4px; }
.cinfo .ico-box { width: 40px; height: 40px; border-radius: 11px; margin-top: -2px; }
.cinfo .ico-box .i { width: 20px; height: 20px; }
.cinfo__row > div { min-width: 0; flex: 1; }
.cinfo__row b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.cinfo__row p { font-size: 15px; color: var(--text); line-height: 1.6; }
.cinfo__row p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cinfo__row .link { margin-top: 8px; font-size: 14.5px; }
.chours { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 15px; max-width: 320px; }
.chours dt { color: var(--text-2); }
.chours dd { font-variant-numeric: tabular-nums; text-align: right; }
.cnow { display: inline-flex; align-items: center; gap: 8px; height: 28px; margin-top: 12px; padding: 0 12px; border-radius: var(--r-full); font-size: 13.5px; font-weight: 500; color: var(--h-t, var(--text-2)); background: var(--h-s, var(--surface-2)); }
.cnow i { width: 8px; height: 8px; border-radius: 50%; background: var(--h, var(--text-3)); }
.csocial { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px -8px; }
.csocial a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: background .15s; }
.csocial a:hover { background: var(--h-s, var(--surface-2)); color: var(--h, var(--text)); }
.csocial .i { width: 19px; height: 19px; }
.cinfo__row small { font-size: 13.5px; }
.cinfo__help { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 16px 20px 16px 16px; border-radius: 14px; background: var(--brand-soft); transition: background .15s; }
.cinfo__help:hover { background: var(--brand-soft-2); }
.cinfo__help .ico-box { width: 40px; height: 40px; border-radius: 11px; background: var(--surface); }
html[data-theme='dark'] .cinfo__help .ico-box { background: var(--brand-soft); }
.cinfo__help .ico-box .i { width: 20px; height: 20px; }
.cinfo__help > .i { color: var(--brand-text); }
.cinfo__help b { display: block; font-size: 15px; font-weight: 600; }
.cinfo__help small { display: block; font-size: 13.5px; color: var(--text-2); }
.cinfo__help > .i { flex: none; width: 18px; height: 18px; transition: transform .2s var(--ease); }
.cinfo__help:hover > .i { transform: translateX(3px); }

/* ── Şöbələr ── */
.cdeps { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cdeps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.cdep { display: flex; flex-direction: column; padding: 24px; border-radius: 16px; background: var(--surface-2); }
@media (min-width: 1024px) { .cdep { padding: 28px; } }
.cdep > .ico-box { margin-bottom: 18px; }
.cdep .ico-box .i { width: 22px; height: 22px; }
.cdep h3 { font-size: 17px; letter-spacing: -.015em; }
.cdep p { margin-top: 6px; font-size: 14.5px; color: var(--text-2); }
.cdep ul { margin-top: auto; padding-top: 18px; display: grid; gap: 4px; font-size: 15px; }
.cdep ul a { font-weight: 500; }
.cdep ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cdep ul .faint { font-size: 13.5px; margin-top: 4px; }

/* ── Xəritə ── */
.cmap { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--edge); isolation: isolate; }
@media (min-width: 768px) { .cmap { border-radius: 24px; } }
.cmap__map { height: 340px; }
@media (min-width: 768px) { .cmap__map { height: 460px; } }
.cmap__card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; background: var(--surface); }
@media (min-width: 768px) { .cmap__card { position: absolute; left: 24px; top: 24px; width: 300px; border-radius: 16px; box-shadow: var(--sh-3); } }
.cmap__card b { font-size: 16px; font-weight: 600; }
.cmap__card p { font-size: 14.5px; color: var(--text-2); }
.cmap__card small { font-size: 13px; }
.cmap__card .btn { margin-top: 12px; }
.opin { display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); }
.opin__b { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font: 600 13.5px/1 var(--font); white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.opin__b svg { flex: none; width: 24px; height: 24px; max-width: none; padding: 3px; border-radius: 50%; background: var(--surface); } /* 0 ölçülü marker daxilində sıxılmasın; glyph brend fonda itməsin deyə surface dairəsində */
.opin__t { width: 2px; height: 10px; background: var(--brand); }
.opin__d { width: 8px; height: 8px; margin-top: -2px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
/* xəritə — sakit, az doymuş tonlar (yalnız işıqlı tema; qaranlıq tema core.css filtrindən istifadə edir) */
html:not([data-theme='dark']) .cmap .leaflet-tile-pane { filter: saturate(.3) contrast(1.02) brightness(1.02); }
@media (max-width: 479px) { .csent .row { width: 100%; } .csent .row .btn { flex: 1 1 100%; } .csent dl { width: 100%; } }