/* OpenAds — site-specific styles (interaktif durumlar + wordmark + form)
   DC kaynağındaki style-hover / style-focus / style-active nitelikleri
   düz HTML'de çalışmadığından bu durumlar burada gerçek CSS ile tanımlandı. */

/* ---------- Wordmark ---------- */
.oa-logo {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  text-decoration: none;
}
.oa-logo .oa-logo__ads { color: var(--oa-orange); }
.oa-logo--white .oa-logo__open { color: #ffffff; }
.oa-logo--color .oa-logo__open { color: var(--oa-purple); }
.oa-logo--nav { font-size: 26px; }
.oa-logo--foot { font-size: 24px; }
a.oa-logo:hover .oa-logo__open,
a.oa-logo:hover .oa-logo__ads { color: inherit; }
a.oa-logo:hover { opacity: 0.9; }

/* ---------- Nav ---------- */
.oa-nav__links a { color: var(--text-heading); transition: color var(--dur-fast) var(--ease-out); }
.oa-nav__links a:hover { color: var(--oa-orange); }

/* ---------- Footer links ----------
   Not: .oa-body a { color: mor } genel kuralını yenmek için .oa-body ön eki
   ile özgüllük artırıldı; footer koyu zemin olduğundan yazılar beyaz. */
.oa-body .oa-foot-link { color: #ffffff; transition: color var(--dur-fast) var(--ease-out); }
.oa-body .oa-foot-link:hover { color: #FF4F00; }
.oa-body .oa-social {
  color: #ffffff;
  display: flex; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.oa-body .oa-social:hover { color: var(--oa-orange-bright); border-color: var(--oa-orange-bright); }

/* ---------- Form: chips ---------- */
.oa-chip {
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  background: #FFFFFF;
  border: 1.5px solid #E8E4EC;
  color: #4A4152;
}
.oa-chip:hover { border-color: var(--oa-purple); }
.oa-chip[aria-pressed="true"] {
  background: rgba(80,0,115,0.07);
  border-color: #500073;
  color: #500073;
}
.oa-chip--concern {
  font-size: var(--text-small); font-weight: var(--weight-body-medium);
  text-align: left; border-radius: var(--radius-m);
  padding: 14px 16px; line-height: 1.45; min-height: 48px;
}
.oa-chip--budget {
  font-size: var(--text-small); font-weight: var(--weight-body-medium);
  border-radius: var(--radius-pill); padding: 0 18px; min-height: 44px;
}

/* ---------- Form: inputs ---------- */
.oa-input, .oa-textarea {
  font-family: var(--font-body);
  color: var(--text-heading);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  width: 100%; box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.oa-input { font-size: var(--text-base); min-height: 48px; padding: 0 16px; }
.oa-textarea { font-size: var(--text-small); padding: 12px 16px; resize: vertical; }
.oa-input:focus, .oa-textarea:focus {
  border-color: var(--oa-purple);
  outline: 2px solid rgba(80,0,115,0.15);
}

/* ---------- Floating WhatsApp ---------- */
.oa-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(24,0,34,0.3);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.oa-wa:hover { background: #1EBE5A; color: #fff; transform: scale(1.05); }
.oa-wa:active { transform: scale(0.98); }

/* ---------- v2 form: input odak & chip hover ---------- */
.oa-in { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.oa-in:focus { border-color: var(--oa-purple) !important; outline: 2px solid rgba(80,0,115,0.15); }
.oa-concern-btn { transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.oa-concern-btn:hover { border-color: var(--oa-purple) !important; }
.oa-btn--secondary:hover { background: rgba(241,74,0,0.06); }

/* ---------- Utility ---------- */
[hidden] { display: none !important; }
.oa-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: oa-spin 0.7s linear infinite; display: inline-block;
}
@keyframes oa-spin { to { transform: rotate(360deg); } }