/* Reklam metni aracı (/araclar/reklam-metni-araci/): yalnızca bu sayfada yüklenir. İşaretleme .claude/uretici/arac_arayuz.py,
   davranış .claude/site-arac/reklam-metni/. Sitenin tasarım değişkenleriyle; kurallar .ra altında kalır, başka bileşene sızmaz. */

/* ---------- Açılış: araç ilk ekranda görünsün diye kısa ---------- */
.arac-giris {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-block: clamp(28px, 4vw, 56px) clamp(20px, 2.6vw, 32px);
  border-top: 0;
}
.arac-giris::before, .arac-giris::after { display: none; }
.arac-giris .page-title { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); }
.arac-giris .lead { max-width: 46em; }
.arac-alani { padding-block: clamp(16px, 2.4vw, 28px) clamp(48px, 6vw, 88px); }
.editorial .sources h3 { margin-bottom: 12px; font-size: var(--fs-h3); font-weight: 500; }

/* ---------- Araç ---------- */
.ra {
  /* Durum ve seviye renkleri: beyaz ve açık zemin üstünde AA kontrast */
  --ra-uyari: #7A4F00;
  --ra-uyari-zemin: #FFF4DE;
  --ra-hata-zemin: #FDECEA;
  --ra-tamam: #1B6E44;
  --ra-tamam-zemin: #E7F5EC;
  --ra-orta: #9A5B00;
  --ra-link: #1A0DAB;
  display: grid;
  gap: 20px;
  font-size: var(--fs-small);
  line-height: 1.45;
}
.ra h3 { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.ra small { color: var(--muted); font-size: var(--fs-micro); font-weight: 400; }
.ra-not, .ra-alt { color: var(--muted); font-size: var(--fs-micro); }
.ra-alt { margin-top: 14px; padding-inline: 4px; }
.ra-uyari { padding: 12px 14px; border-radius: var(--r-sm); background: var(--ra-uyari-zemin); color: var(--ra-uyari); }

/* Alanlar: sitenin .input diliyle, daha sık */
.ra input:not([type="radio"]):not([type="checkbox"]), .ra select, .ra textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px altı iOS'ta dokununca sayfayı yakınlaştırır */
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ra textarea { min-height: 64px; line-height: 1.45; resize: vertical; }
.ra input::placeholder, .ra textarea::placeholder { color: var(--muted-2); }
.ra input:focus-visible, .ra select:focus-visible, .ra textarea:focus-visible {
  outline: none;
  border-color: var(--akin-plum);
  box-shadow: 0 0 0 4px rgba(129, 28, 98, .12);
}
.ra select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23756C77' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ---------- Düğmeler ---------- */
.ra-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, box-shadow .25s, transform .2s var(--ease-out), opacity .2s;
}
.ra-btn svg { width: 16px; height: 16px; flex: none; }
.ra-btn:active:not(:disabled) { transform: scale(.98); }
.ra-btn:disabled { opacity: .55; cursor: not-allowed; }
.ra-btn--ana { background: var(--ink); color: var(--on-dark); }
.ra-btn--ana:hover:not(:disabled) { background: var(--ink-2); }
.ra--yz #ra-olustur { background: var(--grad-brand); box-shadow: 0 10px 28px -12px rgba(129, 28, 98, .55); }
.ra--yz #ra-olustur:hover:not(:disabled) { box-shadow: 0 14px 34px -12px rgba(129, 28, 98, .7); }
.ra-btn--ikinci { background: var(--bg); border-color: var(--line-strong); color: var(--ink); }
.ra-btn--ikinci:hover:not(:disabled) { background: var(--surface); }
.ra-btn--sade { background: none; color: var(--akin-plum); padding-inline: 12px; }
.ra-btn--sade:hover:not(:disabled) { background: rgba(129, 28, 98, .06); }
.ra-btn--yz { background: rgba(129, 28, 98, .08); color: var(--akin-plum); }
.ra-btn--yz:hover:not(:disabled) { background: rgba(129, 28, 98, .14); }
.ra-btn--kucuk { min-height: 40px; padding: 0 16px; font-size: var(--fs-micro); }
/* Bekleme: yazı soluklaşır, ortada dönen halka */
.ra-btn[aria-busy="true"] { color: transparent !important; }
.ra-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #FFFFFF;
  animation: ra-don .8s linear infinite;
}
.ra-btn--ikinci[aria-busy="true"]::after, .ra-btn--yz[aria-busy="true"]::after, .ra-yz[aria-busy="true"]::after {
  border-color: rgba(129, 28, 98, .25);
  border-top-color: var(--akin-plum);
}
@keyframes ra-don { to { transform: rotate(360deg); } }

/* ---------- 1. Brief ---------- */
.ra-brief {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(120deg, rgba(249, 126, 41, .55), rgba(167, 57, 108, .45), rgba(129, 28, 98, .55)) border-box;
  box-shadow: var(--shadow-float);
}
.ra-brief__soru { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.ra-brief textarea[name="aciklama"] { min-height: 84px; padding: 14px 16px; border-radius: var(--r-md); font-size: 1.0625rem; }
.ra-brief__alanlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ra-brief__alanlar label { display: grid; gap: 6px; align-content: start; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.ra-brief__alanlar label > span { display: flex; align-items: baseline; gap: 6px; }
.ra-brief__alanlar .ra-genis { grid-column: span 2; }
.ra-ayrinti > summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--akin-plum);
  font-weight: 500;
}
.ra-ayrinti > summary::-webkit-details-marker { display: none; }
.ra-ayrinti > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(129, 28, 98, .08); font-weight: 600; }
.ra-ayrinti[open] > summary::before { content: "\2212"; }
.ra-ayrinti[open] > summary { margin-bottom: 12px; }
.ra-hitap { display: grid; gap: 6px; }
.ra-hitap legend { margin-bottom: 6px; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.ra-hitap label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: 16px; font-weight: 400; }
.ra-hitap input, .ra-riza input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--akin-plum); }
.ra-brief__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ra-hak { margin-left: auto; color: var(--muted); font-size: var(--fs-micro); }
.ra-hak:empty { display: none; }
/* Rıza satırı yer kaplar ama yapay zekâ etkin olana dek görünmez: sonradan belirince sayfa kaymaz */
.ra-brief__alt { display: grid; gap: 6px; min-height: 48px; }
.ra-riza { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-micro); color: var(--muted); visibility: hidden; cursor: pointer; }
.ra-riza a { color: var(--akin-plum); text-decoration: underline; text-underline-offset: 3px; }
.ra--yz .ra-riza { visibility: visible; }
.ra-durum { min-height: 1.4em; font-size: var(--fs-micro); color: var(--ra-tamam); }
.ra-durum.hatali { color: var(--error); }

/* ---------- 2. Sonuç: sekmeler ve alanlar ---------- */
.ra-sonuc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 20px; align-items: start; transition: opacity .2s; }
.ra[aria-busy] .ra-sonuc { opacity: .6; }
.ra-ana { display: grid; gap: 14px; min-width: 0; }
.ra-sekmeler {
  display: inline-flex;
  justify-self: start;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.ra-sekmeler [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.ra-sekmeler [role="tab"]:hover { color: var(--ink); }
.ra-sekmeler [aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 15, 23, .08), 0 4px 12px -6px rgba(54, 25, 57, .25); }
.ra-sekme__guc { padding: 2px 8px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 500; background: var(--surface-2); color: var(--muted); }
.ra-sekme__guc:empty { display: none; }
.ra-sekme__guc[data-seviye="hata"] { background: var(--ra-hata-zemin); color: var(--error); }
.ra-sekme__guc[data-seviye="zayif"] { background: var(--ra-hata-zemin); color: var(--error); }
.ra-sekme__guc[data-seviye="ortalama"] { background: var(--ra-uyari-zemin); color: var(--ra-uyari); }
.ra-sekme__guc[data-seviye="iyi"], .ra-sekme__guc[data-seviye="mukemmel"] { background: var(--ra-tamam-zemin); color: var(--ra-tamam); }

.ra-panel { display: grid; gap: 26px; padding: clamp(16px, 2vw, 24px); border-radius: var(--r-xl); background: var(--bg); border: 1px solid var(--line); }
.ra-grup { display: grid; gap: 10px; min-width: 0; }
.ra-grup__ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ra-grup__sayi { padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.ra-grup__ipucu { margin-top: -4px; color: var(--muted); font-size: var(--fs-micro); }
.ra-alanlar { display: grid; gap: 8px; }
.ra-alanlar--ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ra-alan { display: grid; gap: 4px; min-width: 0; }
/* Dördüncü sütun yapay zekâ düğmesine ayrılır: düğme sonradan belirince satır kaymaz */
.ra-alan__satir { display: grid; grid-template-columns: 22px minmax(0, 1fr) 50px 34px; gap: 8px; align-items: center; }
.ra-alan__no, .ra-sayac { color: var(--muted); font-size: var(--fs-micro); text-align: right; font-variant-numeric: tabular-nums; }
.ra-sayac.asim { color: var(--error); font-weight: 600; }
.ra-alan.hatali input, .ra-alan.hatali textarea { border-color: var(--error); background: #FFFBFA; }
.ra-notlar { display: grid; gap: 2px; margin-left: 30px; font-size: var(--fs-micro); }

/* Kopyala: kutunun içinde sağ üstte; alan boşken görünmez ve odaklanamaz, basınca kısa süre onay işareti */
.ra-giris { position: relative; display: block; min-width: 0; }
.ra .ra-giris input[data-yol], .ra .ra-giris textarea[data-yol] { padding-right: 42px; }
.ra-kopya {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--muted-2);
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s, background-color .15s, color .15s;
}
.ra-alan.dolu .ra-kopya { visibility: visible; opacity: 1; }
.ra-kopya:hover { background: var(--surface); color: var(--ink); }
.ra-kopya svg { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity .15s, transform .2s var(--ease-out); }
.ra-kopya__onay { opacity: 0; transform: scale(.6); }
.ra-kopya.tamam { color: var(--ra-tamam); }
.ra-kopya.tamam .ra-kopya__simge { opacity: 0; transform: scale(.6); }
.ra-kopya.tamam .ra-kopya__onay { opacity: 1; transform: none; }
.ra-notlar:empty { display: none; }
.ra-notlar li.hata { color: var(--error); }
.ra-notlar li.uyari { color: var(--ra-uyari); }
.ra-yz {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--akin-plum);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out);
}
.ra-yz svg { width: 15px; height: 15px; }
.ra-yz:hover:not(:disabled) { background: var(--grad-brand); border-color: transparent; color: #FFFFFF; transform: scale(1.06); }
.ra-yz:disabled { opacity: .5; cursor: wait; }
.ra-yz[aria-busy="true"] svg { opacity: 0; }
.ra-yz[aria-busy="true"]::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid; animation: ra-don .8s linear infinite; }

.ra-siteler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ra-site { position: relative; padding: 12px 10px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.ra-site__no { position: absolute; top: -9px; left: 12px; padding: 0 8px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.ra-site .ra-alan__satir { grid-template-columns: 0 minmax(0, 1fr) 44px 34px; gap: 6px; }
.ra-site .ra-notlar { margin-left: 0; }
.ra-secim { display: grid; gap: 6px; max-width: 320px; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.ra-gorseller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ra-gorseller li { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.ra-gorseller b { font-weight: 500; }
.ra-gorseller span { color: var(--muted); font-size: var(--fs-micro); }

/* ---------- 3. Yan sütun: reklam gücü, önizleme, dışa aktarma ---------- */
/* Düzenlerken ekranda kalır; uzarsa kendi içinde kayar. Alt boşluk sağ alttaki soru balonu düğmeleri örtmesin diye. */
.ra-yan {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: grid;
  gap: 14px;
  max-height: calc(100vh - var(--header-h) - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  min-width: 0;
}
.ra-kart { padding: 18px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); }
.ra-kart__ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }

.ra-guc { display: grid; gap: 12px; background: linear-gradient(180deg, var(--surface), var(--bg) 70%); }
.ra-guc__ust { display: flex; align-items: center; gap: 14px; }
.ra-guc__halka {
  --renk: var(--muted-2);
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--renk) calc(var(--puan) * 1%), var(--surface-2) 0);
  transition: background .4s var(--ease-out);
}
.ra-guc__halka::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg); }
.ra-guc__halka span { position: relative; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ra-guc__halka[data-seviye="zayif"] { --renk: var(--error); }
.ra-guc__halka[data-seviye="ortalama"] { --renk: var(--ra-orta); }
.ra-guc__halka[data-seviye="iyi"] { --renk: #2F9E62; }
.ra-guc__halka[data-seviye="mukemmel"] { --renk: var(--ra-tamam); }
.ra-guc h3 small { display: block; margin-top: 2px; }
.ra-guc__etiket { margin-top: 4px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; color: var(--muted); }
.ra-guc__etiket[data-seviye="zayif"] { color: var(--error); }
.ra-guc__etiket[data-seviye="ortalama"] { color: var(--ra-orta); }
.ra-guc__etiket[data-seviye="iyi"], .ra-guc__etiket[data-seviye="mukemmel"] { color: var(--ra-tamam); }
.ra-guc__oneriler { display: grid; gap: 6px; }
.ra-guc__oneriler li { position: relative; padding-left: 18px; font-size: var(--fs-micro); color: var(--ink-2); }
.ra-guc__oneriler li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--akin-orange); }

/* Önizleme Google arama sonucunu andırır: bu yüzden sitenin yazı tipi yerine Arial */
.ra-serp { margin-bottom: 8px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); font-family: Arial, var(--font-sans); }
.ra-serp__etiket { margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--ink); }
.ra-serp__adres { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; color: #202124; overflow-wrap: anywhere; }
.ra-serp__simge { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--grad-brand); }
.ra-serp__baslik { margin-bottom: 4px; font-size: 18px; line-height: 1.3; color: var(--ra-link); overflow-wrap: anywhere; }
.ra-serp__aciklama, .ra-serp__ogeler { font-size: 13px; line-height: 1.45; color: #4D5156; overflow-wrap: anywhere; }
.ra-serp__ogeler { margin-top: 4px; }
.ra-serp__siteler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 10px; }
.ra-serp__siteler li { display: grid; gap: 1px; font-size: 12px; color: #4D5156; overflow-wrap: anywhere; }
.ra-serp__siteler b { color: var(--ra-link); font-size: 14px; font-weight: 400; }
.ra-banner { margin-bottom: 8px; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg); }
.ra-banner__gorsel {
  display: grid;
  place-items: center;
  aspect-ratio: 1.91 / 1;
  background: var(--grain-soft) 0 0 / 300px, var(--grad-brand);
  background-blend-mode: soft-light, normal;
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-micro);
}
.ra-banner__metin { display: grid; gap: 6px; padding: 12px 14px 14px; }
.ra-banner__baslik { font-size: 1rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ra-banner__aciklama { color: var(--muted); font-size: var(--fs-micro); overflow-wrap: anywhere; }
.ra-banner__alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: var(--fs-micro); color: var(--ink-2); }
.ra-banner__dugme { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ra-link); color: #FFFFFF; }
.ra-banner__dugme svg { width: 16px; height: 16px; }

.ra-disa { display: grid; gap: 10px; }
.ra-disa__dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.ra-disa__alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ra-disa__alanlar label { display: grid; gap: 4px; font-size: var(--fs-micro); color: var(--ink-2); }

@media (max-width: 1000px) {
  .ra-sonuc { grid-template-columns: minmax(0, 1fr); }
  .ra-yan { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .ra-brief__alanlar, .ra-siteler, .ra-gorseller, .ra-alanlar--ikili { grid-template-columns: minmax(0, 1fr); }
  .ra-brief__alanlar .ra-genis { grid-column: auto; }
  .ra-hak { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .arac-giris { gap: 10px; padding-top: 20px; }
  .arac-giris .lead { font-size: 1rem; }
  .ra-brief, .ra-panel { border-radius: var(--r-lg); }
  /* Sekmeler eşit genişlikte; seviye rozeti yazı yerine renkli nokta (yazısı ekran okuyucuda sekme adıyla okunmaya devam eder) */
  .ra-sekmeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; overflow: visible; }
  .ra-sekmeler [role="tab"] { justify-content: center; gap: 6px; padding: 0 8px; }
  .ra-sekme__guc { width: 8px; height: 8px; padding: 0; overflow: hidden; font-size: 0; }
  .ra-sekme__guc[data-seviye] { background: currentColor; }
  .ra-btn { flex: 1 1 auto; }
  .ra-alan__satir { grid-template-columns: 18px minmax(0, 1fr) 44px 34px; gap: 6px; }
  .ra-notlar { margin-left: 24px; }
  .ra-disa__alanlar { grid-template-columns: minmax(0, 1fr); }
}