.gk-ilan-form {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--gk-space-6);
  background: var(--gk-color-bg);
  border: 1px solid var(--gk-color-border);
  border-radius: var(--gk-radius-lg);
  box-shadow: var(--gk-shadow-sm);
}

/* Spacing daraltma — submit + edit form alanları arası boşlukları kompaktla. */
.gk-ilan-form .gk-form-field,
.gk-edit-listing-form .gk-form-field {
  margin-bottom: var(--gk-space-3);
  gap: 4px;
}

.gk-ilan-form .gk-form-row,
.gk-edit-listing-form .gk-form-row {
  margin-bottom: var(--gk-space-3);
}

.gk-ilan-form .gk-form-row .gk-form-field,
.gk-edit-listing-form .gk-form-row .gk-form-field {
  margin-bottom: 0;
}

.gk-ilan-form .gk-form-fieldset,
.gk-edit-listing-form .gk-form-fieldset {
  margin-bottom: var(--gk-space-3);
}

.gk-ilan-form .gk-quality-rules,
.gk-edit-listing-form .gk-quality-rules {
  margin-top: 4px;
}

/* Onaylar fieldset — legend altı ve checkbox arası boşluk daralt.
   Browser <fieldset> UA padding-block-start agresif (~12-16px) — !important ile zorla.
   padding-block-start: 0 ile legend'ın hemen altında content başlar. */
.gk-ilan-form .gk-form-consents,
.gk-edit-listing-form .gk-form-consents {
  margin: var(--gk-space-3) 0 !important;
  padding: 0 var(--gk-space-4) var(--gk-space-3) !important;
  padding-block-start: 0 !important;
}

.gk-ilan-form .gk-form-consents__legend,
.gk-edit-listing-form .gk-form-consents__legend {
  margin: 0 !important;
  padding: 0 var(--gk-space-2) !important;
  line-height: 1.2 !important;
}

.gk-ilan-form .gk-form-field--consent,
.gk-edit-listing-form .gk-form-field--consent {
  margin: var(--gk-space-2) 0 0 0 !important;
}

.gk-ilan-form .gk-form-field--consent:first-of-type,
.gk-edit-listing-form .gk-form-field--consent:first-of-type {
  margin-top: var(--gk-space-2) !important;
}

.gk-ilan-form h2 {
  margin-top: 0;
}

.gk-ilan-form .gk-form-submit {
  display: flex;
  justify-content: center;
}

.gk-ilan-form button[type="submit"] {
  min-width: 200px;
}

/* Business-fields fieldset — onaylar fieldset'iyle aynı kompakt pattern.
   UA <fieldset> default ~0.75em top padding + <legend> default block margin → toplam ~30px boşluk.
   padding tamamen override + legend margin sıfır + ilk .gk-help margin sıkı. */
.gk-ilan-form .gk-business-fields,
.gk-edit-listing-form .gk-business-fields {
  padding: 0 var(--gk-space-4) var(--gk-space-3) !important;
  padding-block-start: 0 !important;
}
.gk-ilan-form .gk-business-fields > legend,
.gk-edit-listing-form .gk-business-fields > legend {
  margin: 0 !important;
  padding: 0 var(--gk-space-2) !important;
  line-height: 1.2 !important;
}
.gk-ilan-form .gk-business-fields > .gk-help:first-of-type,
.gk-edit-listing-form .gk-business-fields > .gk-help:first-of-type {
  margin-top: var(--gk-space-2) !important;
  margin-bottom: var(--gk-space-3) !important;
}

/* Idle'da disabled atanmıyor (buton her zaman aktif). Sadece submit-sırasında
   geçici loading state için disabled gerçekleşir — cursor 'wait' semantik. */
.gk-ilan-form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* Faz 6+ : .gk-alert (alerts.css) ile birleştirildi.
   Boş ise gizli; class='gk-alert gk-alert-{success|danger}' eklendiğinde alert görünür. */
#gk-form-message:empty {
  display: none !important;
}

@media (max-width: 640px) {
  .gk-ilan-form .gk-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Quality checklist — başlık ve açıklama altı kalite kuralları.
   States: is-pending (gri başlangıç) → is-failed (kırmızı/sarı) → is-passed (yeşil).
   Soft kurallar (is-soft): sağlanmazsa sarı uyarı, submit'i engellemez.
   ============================================================ */
.gk-quality-rules {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: var(--gk-color-bg-alt, #f9fafb);
  border: 1px solid var(--gk-color-border, #e5e7eb);
  border-radius: 6px;
  font-size: 0.85em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gk-quality-rules .gk-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gk-color-fg-muted, #6b7280);
  transition: color 0.15s ease;
}

.gk-quality-rules .gk-rule-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  background: #e5e7eb;
  color: #9ca3af;
}

/* Pending = henüz yazılmamış (default state, gri) */
.gk-quality-rules .gk-rule.is-pending .gk-rule-icon::before {
  content: "○";
}

/* Hard rule başarılı = yeşil ✓ */
.gk-quality-rules .gk-rule.is-passed {
  color: var(--gk-color-success, #10b981);
}
.gk-quality-rules .gk-rule.is-passed .gk-rule-icon {
  background: var(--gk-color-success, #10b981);
  color: #fff;
}
.gk-quality-rules .gk-rule.is-passed .gk-rule-icon::before {
  content: "✓";
}

/* Hard rule başarısız (yazıldıktan sonra) = kırmızı ✗ */
.gk-quality-rules .gk-rule.is-failed {
  color: var(--gk-color-danger, #ef4444);
}
.gk-quality-rules .gk-rule.is-failed .gk-rule-icon {
  background: var(--gk-color-danger, #ef4444);
  color: #fff;
}
.gk-quality-rules .gk-rule.is-failed .gk-rule-icon::before {
  content: "✗";
}

/* Soft rule başarısız = sarı uyarı (blocking değil) */
.gk-quality-rules .gk-rule.is-soft.is-failed {
  color: #b45309;
}
.gk-quality-rules .gk-rule.is-soft.is-failed .gk-rule-icon {
  background: var(--gk-color-warning, #f59e0b);
  color: #fff;
}
.gk-quality-rules .gk-rule.is-soft.is-failed .gk-rule-icon::before {
  content: "!";
}

/* Soft rule pending'de italic (önerim ipucu) */
.gk-quality-rules .gk-rule.is-soft.is-pending {
  font-style: italic;
}

/* ============================================================
   Aranabilir tek-select component
   Kullanım: meslek seçimi (60+ term arasından arama).
   HTML kontratı için form.js başındaki yorum bloğuna bakın.
   ============================================================ */
.gk-searchable-select {
  position: relative;
}

/* Chevron — pseudo-element. Tema'nın input shorthand background'ı override etmesin
   diye SVG yerine CSS border ile çiziyoruz. */
.gk-searchable-select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gk-color-fg-muted, #727687);
  border-bottom: 2px solid var(--gk-color-fg-muted, #727687);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.gk-searchable-select.is-open::after {
  border-color: var(--gk-color-primary-strong, #0066ff);
  transform: translateY(-25%) rotate(-135deg);
}

.gk-searchable-select__input {
  width: 100%;
  cursor: text;
  padding-right: 36px !important;
  /* Browser autofill / password manager / spell-check overlay'ini engelle */
  background-image: none !important;
  text-decoration: none !important;
  animation: none !important;
}

/* Chrome/Safari autofill highlight'ı (sarı/mavi zigzag dahil) sıfırla */
.gk-searchable-select__input:-webkit-autofill,
.gk-searchable-select__input:-webkit-autofill:hover,
.gk-searchable-select__input:-webkit-autofill:focus,
.gk-searchable-select__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--gk-color-bg, #ffffff) inset !important;
  -webkit-text-fill-color: var(--gk-color-fg, #151c27) !important;
  caret-color: var(--gk-color-fg, #151c27);
  transition: background-color 9999s ease-in-out 0s;
}

.gk-searchable-select__hidden {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.gk-searchable-select__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--gk-color-border, #c2c6d8);
  border-radius: var(--gk-radius-md, 8px);
  box-shadow: 0 8px 24px rgba(21, 28, 39, 0.12);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 100;
  display: none;
}

.gk-searchable-select__list.is-open {
  display: block;
}

.gk-searchable-select__list li {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.95em;
  color: var(--gk-color-fg, #151c27);
  border: 0;
  background: transparent;
  user-select: none;
}

.gk-searchable-select__list li:hover,
.gk-searchable-select__list li:focus {
  background: var(--gk-color-bg-alt, #f0f3ff);
  color: var(--gk-color-primary, #0050cb);
}

.gk-searchable-select__list:empty::before {
  content: "—";
  display: block;
  padding: 12px 14px;
  color: var(--gk-color-fg-muted, #727687);
  font-style: italic;
}

@media (max-width: 640px) {
  .gk-searchable-select__input {
    min-height: 44px;
  }
  .gk-searchable-select__list {
    max-height: 50vh;
  }
  .gk-searchable-select__list li {
    padding: 12px 14px;
    min-height: 44px;
  }
}

/* ============================================================
   Toast bildirim — submit anında eksik alanlar veya server hatası.
   Form üstünde fixed-position; otomatik kapanır + manuel kapatılabilir.
   ============================================================ */
.gk-toast {
  position: fixed;
  top: calc(var(--gk-header-height, 64px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 280px;
  max-width: 460px;
  padding: 12px 36px 12px 16px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.95em;
  line-height: 1.4;
  cursor: pointer;
  animation: gkToastIn 0.22s ease-out;
}

.gk-toast--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.gk-toast--success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.gk-toast__title {
  font-weight: 600;
  margin-bottom: 4px;
}

.gk-toast__list {
  margin: 4px 0 0;
  padding-left: 18px;
}

.gk-toast__list li {
  margin: 2px 0;
}

.gk-toast__close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  padding: 2px 6px;
}

.gk-toast__close:hover,
.gk-toast__close:focus {
  opacity: 1;
}

@keyframes gkToastIn {
  from { transform: translate(-50%, -16px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}

@media (max-width: 480px) {
  .gk-toast {
    top: calc(var(--gk-header-height-mobile, 56px) + 8px);
    left: 8px;
    right: 8px;
    max-width: none;
    transform: none;
    animation: gkToastInMobile 0.22s ease-out;
  }
  @keyframes gkToastInMobile {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
}