/* Bileşen: Yazı geri bildirimi ("Bu içerik yararlı oldu mu?")
   Yazının yan sütununda durur; okumayı bölmeden görünür olması gerekir. */

.ar-gb {
  padding: var(--ar-space-md);
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-lg);
  box-shadow: var(--ar-shadow-sm);
}

.ar-gb__baslik {
  margin: 0;
  font-family: var(--ar-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ar-navy);
}

.ar-gb__alt {
  margin: 4px 0 var(--ar-space-sm);
  font-size: 0.8125rem;
  color: var(--ar-muted);
}

.ar-gb__dugmeler {
  display: flex;
  gap: var(--ar-space-xs);
}

.ar-gb__dugme {
  display: inline-flex;
  flex: 1;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-family: var(--ar-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ar-ink);
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-full);
  transition: all var(--ar-transition);
}

.ar-gb__dugme:hover {
  border-color: var(--ar-navy);
}

.ar-gb__dugme svg {
  color: #2f8f6b;
}

.ar-gb__dugme--hayir svg {
  color: #c0563f;
}

.ar-gb__dugme.is-secili {
  color: #fff;
  background: var(--ar-navy);
  border-color: var(--ar-navy);
}

.ar-gb__dugme.is-secili svg {
  color: currentcolor;
}

/* --- İkinci adım --- */

.ar-gb__form[hidden] {
  display: none;
}

.ar-gb__form {
  margin-top: var(--ar-space-sm);
}

.ar-gb__etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--ar-space-xs);
}

.ar-gb__etiket {
  padding: 6px 12px;
  font-family: var(--ar-font-body);
  font-size: 0.75rem;
  color: var(--ar-muted);
  cursor: pointer;
  background: var(--ar-bg);
  border: 1px solid transparent;
  border-radius: var(--ar-radius-full);
  transition: all var(--ar-transition);
}

.ar-gb__etiket:hover {
  border-color: var(--ar-border);
}

.ar-gb__etiket.is-secili {
  color: var(--ar-navy);
  background: var(--ar-mint);
  border-color: #2f8f6b;
}

.ar-gb__not,
.ar-gb__iletisim input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--ar-font-body);
  font-size: 0.875rem;
  color: var(--ar-ink);
  background: var(--ar-bg);
  border: 1px solid transparent;
  border-radius: var(--ar-radius-md);
}

.ar-gb__not:focus,
.ar-gb__iletisim input:focus {
  background: #fff;
  border-color: var(--ar-navy);
  outline: none;
}

.ar-gb__iletisim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.ar-gb__gonder {
  width: 100%;
  padding: 11px 16px;
  margin-top: var(--ar-space-xs);
  font-family: var(--ar-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--ar-navy);
  border: 0;
  border-radius: var(--ar-radius-md);
  transition: background-color var(--ar-transition);
}

.ar-gb__gonder:hover {
  background: var(--ar-midnight);
}

.ar-gb__tesekkur {
  margin: var(--ar-space-sm) 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #2f8f6b;
}

.ar-gb__tesekkur[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ar-gb__dugme,
  .ar-gb__etiket,
  .ar-gb__gonder {
    transition: none;
  }
}

/* =========================================================================
   AYRINTILI GERİ BİLDİRİM PENCERESİ
   ========================================================================= */

.ar-gbm {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--ar-gutter);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ar-gbm[hidden] {
  display: none;
}

.ar-gbm.is-acik {
  opacity: 1;
}

.ar-gbm__perde {
  position: absolute;
  inset: 0;
  background: rgb(15 27 70 / 45%);
  backdrop-filter: blur(3px);
}

.ar-gbm__kutu {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 2 * var(--ar-gutter));
  overflow-y: auto;
  padding: clamp(22px, 3.4vw, 34px);
  background: #fff;
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 30px 70px rgb(15 27 70 / 28%);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ar-gbm.is-acik .ar-gbm__kutu {
  transform: none;
}

.ar-gbm__kapat {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--ar-muted);
  cursor: pointer;
  background: var(--ar-bg);
  border: 0;
  border-radius: 50%;
  transition: all var(--ar-transition);
}

.ar-gbm__kapat:hover {
  color: var(--ar-ink);
  background: var(--ar-silver-soft);
}

.ar-gbm__baslik {
  margin: 0;
  padding-right: 40px;
  font-family: var(--ar-font-heading);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: var(--ar-navy);
}

.ar-gbm__alt {
  margin: 6px 0 20px;
  font-size: 0.9375rem;
  color: var(--ar-muted);
}

.ar-gbm__etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ar-gbm__etiket {
  padding: 10px 18px;
  font-family: var(--ar-font-body);
  font-size: 0.875rem;
  color: var(--ar-ink);
  cursor: pointer;
  background: var(--ar-bg);
  border: 1px solid transparent;
  border-radius: var(--ar-radius-full);
  transition: all var(--ar-transition);
}

.ar-gbm__etiket[hidden] {
  display: none;
}

.ar-gbm__etiket:hover {
  border-color: var(--ar-border);
}

.ar-gbm__etiket.is-secili {
  color: var(--ar-green-deep);
  background: var(--ar-mint);
  border-color: var(--ar-green);
}

.ar-gbm__not,
.ar-gbm__iletisim input {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--ar-font-body);
  font-size: 0.9375rem;
  color: var(--ar-ink);
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-md);
}

.ar-gbm__not:focus,
.ar-gbm__iletisim input:focus {
  border-color: var(--ar-green);
  outline: none;
}

.ar-gbm__iletisim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.ar-gbm__onay {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ar-muted);
  cursor: pointer;
}

.ar-gbm__onay input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--ar-green);
}

.ar-gbm__onay a {
  color: var(--ar-green-deep);
  font-weight: 600;
}

.ar-gbm__gonder {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  font-family: var(--ar-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--ar-green);
  border: 0;
  border-radius: var(--ar-radius-full);
  transition: filter var(--ar-transition), background-color var(--ar-transition);
}

.ar-gbm__gonder:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* Onay verilmeden gönderilemez — kişisel veri açık rıza ister. */
.ar-gbm__gonder:disabled {
  background: var(--ar-silver);
  cursor: not-allowed;
}

/* --- Yan sütun formu --- */

.ar-yan-form {
  padding: var(--ar-space-md);
  background: #fff;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-lg);
  box-shadow: var(--ar-shadow-sm);
}

.ar-yan-form__baslik {
  margin: 0;
  font-family: var(--ar-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ar-navy);
}

.ar-yan-form__metin {
  margin: 6px 0 14px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ar-muted);
}

.ar-yan-form input,
.ar-yan-form textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--ar-font-body);
  font-size: 0.875rem;
  background: var(--ar-bg);
  border: 1px solid transparent;
  border-radius: var(--ar-radius-md);
}

.ar-yan-form input:focus,
.ar-yan-form textarea:focus {
  background: #fff;
  border-color: var(--ar-green);
  outline: none;
}

.ar-yan-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  color: var(--ar-muted);
}

.ar-yan-form button {
  width: 100%;
  padding: 12px 18px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--ar-navy);
  border: 0;
  border-radius: var(--ar-radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .ar-gbm,
  .ar-gbm__kutu {
    transition: none;
  }
}