/* KONUM: CodeAndSystems.Website\wwwroot\css\pages\contact.css
   Contact page: its own styles (moved out of the old contact.html, unchanged) and, at the end, the dark theme of the page
   (generated from the light colours of the rules above, then hand-tuned). Loaded after site.css, before theme.css. */

.contact-body { padding: 72px 0 120px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start; }
@media(max-width:768px){ .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

.ci-blocks { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.ci-row { display: flex; align-items: flex-start; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.ci-row:last-child { border-bottom: none; }
.ci-icon { font-size: 15px; width: 36px; height: 36px; border-radius: 8px; background: var(--purple-xl); border: 1px solid #ddd6fe; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 3px; }
.ci-val { font-size: 13.5px; color: var(--text); line-height: 1.5; font-weight: 300; }
.ci-val a { color: var(--purple-l); text-decoration: none; }
.ci-val a:hover { text-decoration: underline; }

.hours-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.hours-header { padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.hours-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 13px; }
.hours-row:last-child { border-bottom: none; }
.hours-day { color: var(--muted2); font-weight: 300; }
.hours-time.open { color: #16a34a; font-weight: 500; }
.hours-time.emergency { color: var(--purple-l); font-size: 12px; font-weight: 500; }
.hours-time.appt { color: var(--muted); font-weight: 300; }

.remote-bar { background: var(--purple-xl); border: 1px solid #ddd6fe; border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; }
.rb-icon { font-size: 18px; flex-shrink: 0; }
.rb-title { font-size: 12.5px; font-weight: 500; color: var(--text); margin-bottom: 1px; }
.rb-desc { font-size: 11px; color: var(--muted); font-weight: 300; }
.rb-btn { margin-left: auto; flex-shrink: 0; font-size: 11.5px; padding: 7px 14px; border-radius: 7px; }

/* ── COMING SOON badge (indirme kaldirildi) ── */
@keyframes cs-sweep { 0% { transform: translateX(-140%); } 55%, 100% { transform: translateX(240%); } }
@keyframes cs-dot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes cs-halo { 0%, 100% { box-shadow: 0 0 0 0 rgba(109,40,217,0.22); } 50% { box-shadow: 0 0 0 7px rgba(109,40,217,0); } }
@keyframes cs-tick { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(20deg); } }
.cs-pill {
  position: relative; overflow: hidden; flex-shrink: 0; margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #ede9fe, #e0f2fe);
  border: 1px solid #ddd6fe; border-radius: 100px;
  padding: 9px 17px; cursor: default;
  animation: cs-halo 2.8s ease-in-out infinite;
  transition: transform 0.25s;
}
.cs-pill:hover { transform: translateY(-2px); }
.cs-pill::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.92), transparent);
  animation: cs-sweep 3.4s ease-in-out infinite; pointer-events: none;
}
.cs-ico { position: relative; z-index: 1; flex-shrink: 0; animation: cs-tick 2.8s ease-in-out infinite; transform-origin: center; }
.cs-txt { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--purple-l); position: relative; z-index: 1; }
.cs-dots { display: inline-flex; gap: 4px; position: relative; z-index: 1; }
.cs-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--purple-l); animation: cs-dot 1.5s ease-in-out infinite; }
.cs-dots i:nth-child(2) { animation-delay: 0.2s; }
.cs-dots i:nth-child(3) { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .cs-pill, .cs-pill::after, .cs-dots i, .cs-ico { animation: none; }
  .cs-pill::after { display: none; }
}
@media(max-width:520px){
  .remote-bar { flex-wrap: wrap; }
  .cs-pill { margin-left: 0; width: 100%; justify-content: center; }
}

.contact-form { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
.form-top { height: 3px; background: var(--grad); }
.form-inner { padding: 32px; }
.form-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); margin-bottom: 4px; }
.form-subtitle { font-size: 12.5px; color: var(--muted); font-weight: 300; margin-bottom: 24px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:500px){ .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 11px; font-weight: 500; color: var(--muted2); margin-bottom: 6px; letter-spacing: 0.02em; text-transform: uppercase; }
.form-label span { color: var(--muted); font-weight: 400; text-transform: none; }

.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text); font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 300; padding: 10px 13px; outline: none; transition: all 0.2s;
}
.form-input::placeholder, .form-textarea::placeholder { color: #cbd5e1; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--purple-l); background: #fff; box-shadow: 0 0 0 3px rgba(109,40,217,0.08); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; background-color: var(--bg2); }
.form-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.form-submit { width: 100%; background: var(--grad); color: #fff; border: none; border-radius: 8px; padding: 13px; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 4px; }
.form-submit:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(109,40,217,0.25); }
.form-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.form-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; font-weight: 300; }
.form-note a { color: var(--purple-l); text-decoration: none; }

.form-msg { display: none; padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.form-msg.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; display: block; }
.form-msg.error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; display: block; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.turnstile-group { margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════
   GATECORE AUTHENTICATOR — FOOTER BADGE BAR
   On every page. Images in /img: gatecore-logo.webp · app-store.svg · google-play.webp
   Both badges sit on the same 646x250 canvas, the visible box is 67% —
   the required clear space is inside the asset, so both get the same height.
   ══════════════════════════════════════════════════════════ */
.gc-appbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.gc-appbar-ico { width: 44px; height: 44px; border-radius: 22%; flex-shrink: 0; display: block; box-shadow: 0 6px 18px rgba(109,40,217,0.22); }
.gc-appbar-txt { min-width: 220px; }
.gc-appbar-t { font-size: 13.5px; font-weight: 700; color: var(--text); }
.gc-appbar-s { font-size: 11.5px; color: var(--muted); font-weight: 300; margin-top: 3px; line-height: 1.65; }
.gc-appbar-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.gc-appbar-badges a { display: inline-flex; align-items: center; transition: transform 0.2s, opacity 0.2s; }
.gc-appbar-badges a:hover { transform: translateY(-2px); opacity: 0.85; }
.gc-appbar-badges img { height: 58px; width: auto; display: block; }

@media (max-width: 700px) {
  .gc-appbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gc-appbar-badges { margin-left: 0; width: 100%; }
  .gc-appbar-badges a { flex: 1 1 150px; }
  .gc-appbar-badges img { height: 52px; max-width: 100%; }
}
@media (max-width: 380px) {
  .gc-appbar-badges img { height: 46px; }
}

/* ================================================================ dark theme */
html[data-theme="dark"] .ci-icon { border: 1px solid color-mix(in srgb, #451ffa 40%, var(--card)); }
html[data-theme="dark"] .remote-bar { border: 1px solid color-mix(in srgb, #451ffa 40%, var(--card)); }
html[data-theme="dark"] .cs-pill { background: linear-gradient(135deg, color-mix(in srgb, #370bf4 15%, var(--card)), color-mix(in srgb, #0897f7 15%, var(--card))); border: 1px solid color-mix(in srgb, #451ffa 40%, var(--card)); }
html[data-theme="dark"] .cs-pill::after { background: linear-gradient(100deg, transparent, rgba(16,23,42,0.92), transparent); }
html[data-theme="dark"] .contact-form { background: var(--card); }
html[data-theme="dark"] .form-input:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] .form-textarea:focus { background: var(--card); }
html[data-theme="dark"] .form-msg.success { background: color-mix(in srgb, #1ee15a 15%, var(--card)); border: 1px solid color-mix(in srgb, #32e771 40%, var(--card)); color: #7ce9a5; }
html[data-theme="dark"] .form-msg.error { background: color-mix(in srgb, #ed1212 15%, var(--card)); border: 1px solid color-mix(in srgb, #fb1e1e 40%, var(--card)); color: #ea7b7b; }
html[data-theme="dark"] .contact-form { box-shadow: 0 4px 24px rgba(0,0,0,0.35); }
html[data-theme="dark"] :is(.form-input, .form-select, .form-textarea) { background: var(--bg2); border-color: var(--border2); color: var(--text); }
html[data-theme="dark"] :is(.form-input, .form-select, .form-textarea):focus { background: var(--bg2); }
html[data-theme="dark"] :is(.form-input, .form-textarea)::placeholder { color: #55627a; }
html[data-theme="dark"] .cs-pill::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,0.12), transparent); }
html[data-theme="dark"] .cs-txt { color: #c4b5fd; } html[data-theme="dark"] .cs-dots i { background: #c4b5fd; }
html[data-theme="dark"] .cs-ico { stroke: #c4b5fd; }