/* =====================================================================
   custom.css — enhancements layered on top of the vCard template.
   Accessibility, mobile nav spacing, cookie consent, CTA, contact, 404.
   Loaded after style.css so these rules win.
   ===================================================================== */

:root {
  --og-gold: #FFDB6E;
  --og-gold-2: #FFBC5E;
  --og-dark: #202021;
}

/* --- Accessibility: visible keyboard focus (template strips outlines) --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav__item a:focus-visible,
.social__link:focus-visible,
.filter__link:focus-visible,
.js-btn-toggle:focus-visible,
.back-to-top:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--og-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 4000;
  background: var(--og-gold);
  color: #1a1a1a;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* Back-to-top as a real button (keyboard reachable) */
button.back-to-top {
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Mobile: clear the fixed bottom nav so content isn't hidden --- */
@media only screen and (max-width: 1200px) {
  .main { padding-bottom: 88px; }
}
@media only screen and (max-width: 576px) {
  .main { padding-bottom: 70px; }
}

/* --- Larger tap targets for social icons (min 44px) --- */
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

/* --- Primary CTA button --- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--og-gold);
  color: #1a1a1a !important;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  border: 0;
  transition: filter .2s ease, transform .2s ease;
}
.btn-cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: #1a1a1a; }
.sidebar__cta { display: block; margin-top: 14px; text-align: center; }

/* Closing CTA block */
.cta-block {
  margin-top: 8px;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,219,110,.10), rgba(255,188,94,.05));
  border: 1px solid rgba(255,219,110,.18);
  text-align: center;
}
.cta-block p { margin: 0 0 16px; color: var(--color-text-secondary, #b8b8bc); }

/* --- Contact form --- */
.contact-form .form-group { margin-bottom: 16px; }
.contact-form label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--color-text-secondary, #b0b0b4); }
.contact-form .form-control {
  width: 100%;
  background: var(--color-surface-2, #2b2b2c);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 13px 16px;
  color: #eee;
  font-size: 15px;
  transition: border-color .2s ease;
}
.contact-form .form-control::placeholder { color: #8a8a8e; }
.contact-form .form-control:focus { outline: none; border-color: var(--og-gold); }
.contact-form textarea.form-control { min-height: 150px; resize: vertical; }
.contact-form .validation { min-height: 22px; margin-top: 10px; font-size: 14px; }
.contact-form .validation-success { color: #7bd88f; }
.contact-form .validation-danger { color: #e07a7a; }

.contact-cards { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 28px; }
.contact-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-surface-2, #2b2b2c);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 14px 18px;
  color: #ddd; text-decoration: none; flex: 1 1 220px;
  transition: border-color .2s ease, transform .2s ease;
}
.contact-card:hover { border-color: var(--og-gold); transform: translateY(-1px); color: #fff; }
.contact-card .contact-card__icon { color: var(--og-gold); font-size: 20px; }

/* --- Portfolio: brand-logo wall (display only, not clickable) --- */
.gallery-grid__link { cursor: default; }

/* --- 404 page --- */
.error-page { text-align: center; padding: 30px 0 10px; }
.error-page__code {
  font-size: 92px; font-weight: 800; line-height: 1;
  color: var(--og-gold); margin-bottom: 8px;
}

/* --- Cookie consent (KVKK / GDPR) --- */
.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(160%);
  width: min(700px, calc(100% - 32px));
  background: #2b2b2c;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0,0,0,.45);
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: transform .35s ease, opacity .35s ease, visibility .35s ease;
}
.cookie-consent.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
.cookie-consent__text { margin: 0; color: #cfcfd2; font-size: 13.5px; line-height: 1.5; flex: 1 1 300px; }
.cookie-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-consent__btn {
  border: 0; border-radius: 10px; padding: 10px 22px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: var(--og-gold); color: #1a1a1a;
  transition: filter .2s ease;
}
.cookie-consent__btn:hover { filter: brightness(1.06); }
.cookie-consent__btn--ghost { background: transparent; color: #cfcfd2; border: 1px solid rgba(255,255,255,.18); }

@media only screen and (max-width: 1200px) {
  .cookie-consent { bottom: 78px; }  /* sit above the fixed mobile nav */
}
@media only screen and (max-width: 576px) {
  .cookie-consent { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-consent__actions { justify-content: center; }
  .cookie-consent__btn { flex: 1; }
}