/* ============================================================
   Paandaa Marka Kokpiti — tasarım tokenları PAANDAA_TASARIM_SISTEMI.md'den
   Panelin KENDİ kimliği Paandaa (navy #233a54 + gül #f43f5e).
   Önizleme alanı seçili markanın renklerini --pv-* değişkenleriyle giyer.
   ============================================================ */
:root {
  --zemin: #F7F4EE;
  --yuzey: #FFFFFF;
  --birincil: #233A54;
  --vurgu: #F43F5E;
  --metin: #1A2530;
  --metin-soluk: #5C6B78;
  --cizgi: #E4DFD5;
  --basari: #2E7D5B;
  --uyari: #B7791F;
  --hata: #C0392B;
  --f-baslik: 'MuseoModerno', 'Space Grotesk', sans-serif;
  --f-govde: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
  --r: 14px;
  --golge: 0 1px 2px rgba(35,58,84,.06), 0 8px 24px rgba(35,58,84,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--f-govde);
  color: var(--metin);
  background: var(--zemin);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-baslik); line-height: 1.2; margin: 0; }

/* ---- topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px;
  background: var(--birincil); color: #fff;
  box-shadow: var(--golge);
}
.topbar__brand { display: flex; align-items: center; gap: 14px; }
.topbar__panda { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.topbar__title { font-family: var(--f-baslik); font-weight: 700; font-size: 19px; }
.topbar__sub { font-size: 12.5px; color: #c7d0da; }

/* ---- buttons ---- */
.btn {
  font-family: var(--f-govde); font-weight: 600; font-size: 14px;
  border: 1px solid transparent; border-radius: 10px;
  padding: 10px 16px; min-height: 40px; cursor: pointer;
  transition: filter .15s, background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--vurgu); color: #fff; }
.btn--accent:hover { filter: brightness(.94); }
.btn--danger { background: #fff; color: var(--hata); border-color: var(--hata); }
.btn--danger:hover { background: var(--hata); color: #fff; }
.btn--ghost { background: transparent; color: var(--metin); border-color: var(--cizgi); }

/* ---- layout ---- */
.layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 400px;
  gap: 20px; padding: 20px 24px; align-items: start;
  max-width: 1440px; margin: 0 auto;
}
.col { min-width: 0; }
.col--form, .col--empty { grid-column: 2; }
.col__h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--metin-soluk); margin: 18px 0 10px; }

/* ---- özet ---- */
.ozet { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.ozet__l { white-space: normal; }
.ozet__k {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 14px; box-shadow: var(--golge);
}
.ozet__n { font-family: var(--f-baslik); font-weight: 700; font-size: 26px; color: var(--birincil); }
.ozet__l { font-size: 12.5px; color: var(--metin-soluk); }

/* ---- liste ---- */
.liste { display: flex; flex-direction: column; gap: 8px; }
.brand-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px;
  padding: 12px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.brand-row:hover { border-color: var(--birincil); box-shadow: var(--golge); }
.brand-row.on { border-color: var(--vurgu); box-shadow: 0 0 0 2px rgba(244,63,94,.18); }
.brand-row__mono {
  width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; font-family: var(--f-baslik); font-weight: 700; color: #fff; font-size: 16px;
}
.brand-row__body { min-width: 0; flex: 1; }
.brand-row__ad { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-row__meta { font-size: 12px; color: var(--metin-soluk); display: flex; gap: 8px; align-items: center; }
.chip { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--cizgi); }
.chip--korumali { color: var(--birincil); border-color: var(--birincil); }
.chip--taslak { color: var(--uyari); border-color: var(--uyari); }
.chip--provizyonlu { color: var(--basari); border-color: var(--basari); }

/* ---- empty ---- */
.col--empty {
  background: var(--yuzey); border: 1px dashed var(--cizgi); border-radius: 18px;
  padding: 48px 32px; text-align: center;
}
.empty__panda { width: 110px; height: 110px; object-fit: contain; opacity: .95; margin-bottom: 8px; }
.col--empty p { color: var(--metin-soluk); max-width: 420px; margin: 8px auto 20px; }

/* ---- form ---- */
.col--form {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px;
  padding: 20px 22px 26px; box-shadow: var(--golge);
}
.form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.form-head h2 { font-size: 20px; }
.form-head__actions { display: flex; gap: 8px; }
.fs { border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px 16px 16px; margin: 14px 0 0; }
.fs legend { font-family: var(--f-baslik); font-weight: 600; font-size: 13.5px; padding: 0 8px; color: var(--birincil); }
.fs legend .hint { font-family: var(--f-govde); font-weight: 400; color: var(--metin-soluk); }
.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.grid2 + .grid2 { margin-top: 12px; }
.fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--metin-soluk); }
.fld input {
  font: inherit; font-weight: 500; color: var(--metin); width: 100%; min-width: 0;
  border: 1px solid var(--cizgi); border-radius: 9px; padding: 9px 11px; min-height: 40px; background: #fff;
}
.fld input:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px rgba(244,63,94,.14); }
.req { color: var(--hata); }
.hint { font-weight: 400; font-size: 11.5px; color: var(--metin-soluk); }
.fld--color .clr { display: flex; align-items: center; gap: 6px; }
.fld--color input[type=color] { width: 40px; height: 40px; padding: 2px; border: 1px solid var(--cizgi); border-radius: 9px; background: #fff; cursor: pointer; }
.fld--color .hex { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 12.5px; text-transform: uppercase; }

/* modüller */
.mods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.mod {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--cizgi); border-radius: 11px; cursor: pointer; font-weight: 600; font-size: 13.5px;
}
.mod input { width: 18px; height: 18px; accent-color: var(--vurgu); }
.mod--zorunlu { background: #f4f1ea; cursor: default; color: var(--birincil); }
.mod small { font-weight: 400; color: var(--metin-soluk); font-size: 11px; }

/* mesaj */
.mesaj { border-radius: 11px; padding: 10px 14px; font-size: 13px; margin: 8px 0; }
.mesaj--hata { background: #fdecea; color: var(--hata); border: 1px solid #f3c2bd; }
.mesaj--uyari { background: #fdf6e3; color: #8a6100; border: 1px solid #ecd9a8; }

/* ============ ÖNİZLEME (marka renkleriyle boyanır) ============ */
.col--preview {
  position: sticky; top: 84px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px;
  box-shadow: var(--golge); overflow: hidden;
}
.tabs { display: flex; border-bottom: 1px solid var(--cizgi); background: #faf8f3; }
.tab { flex: 1; font: inherit; font-weight: 600; font-size: 13.5px; padding: 12px; border: none; background: none; color: var(--metin-soluk); cursor: pointer; border-bottom: 2px solid transparent; }
.tab--on { color: var(--birincil); border-bottom-color: var(--vurgu); }
.tabpane { padding: 16px; }

/* preview inner — --pv-* değişkenleri JS ile set edilir */
.pv {
  --pv-birincil: #233A54; --pv-vurgu: #F43F5E; --pv-zemin: #F7F4EE; --pv-metin: #1A2530;
  --pv-fbaslik: sans-serif; --pv-fgovde: sans-serif;
  background: var(--pv-zemin); color: var(--pv-metin);
  border-radius: 14px; overflow: hidden; border: 1px solid var(--cizgi);
}
.pv__chrome { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--pv-birincil); color: #fff; }
.pv__mono { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--pv-fbaslik); font-weight: 700; background: var(--pv-vurgu); color: #fff; }
.pv__name { font-family: var(--pv-fbaslik); font-weight: 700; font-size: 15px; }
.pv__hero { padding: 18px 16px; }
.pv__hero h3 { font-family: var(--pv-fbaslik); color: var(--pv-birincil); font-size: 22px; margin-bottom: 4px; }
.pv__hero p { color: var(--pv-metin); opacity: .8; font-size: 13px; margin: 0 0 14px; }
.pv__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pv__btn { font-family: var(--pv-fgovde); font-weight: 600; font-size: 13px; border-radius: 9px; padding: 9px 14px; border: 1px solid transparent; cursor: default; }
.pv__btn--primary { background: var(--pv-birincil); color: #fff; }
.pv__btn--accent { background: var(--pv-vurgu); color: var(--pv-vurgu-fg, #fff); }
.pv__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 14px; }
.pv__card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; padding: 10px 12px; }
.pv__card b { font-family: var(--pv-fbaslik); color: var(--pv-birincil); font-size: 13px; display: block; }
.pv__card small { font-size: 11px; color: var(--pv-metin); opacity: .7; }
.pv__card .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--pv-vurgu); margin-right: 5px; }
.pv__palette { display: flex; gap: 8px; padding: 0 16px 14px; }
.pv__sw { flex: 1; height: 40px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); position: relative; }
.pv__sw span { position: absolute; bottom: 2px; left: 4px; font-family: var(--f-mono); font-size: 9px; }
.pv__font { padding: 0 16px 14px; }
.pv__font-h { font-family: var(--pv-fbaslik); font-weight: 700; font-size: 18px; color: var(--pv-birincil); }
.pv__font-b { font-family: var(--pv-fgovde); font-size: 13px; color: var(--pv-metin); }
.pv__wcag { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.pv__wcag .w { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.pv__wcag .w b { font-weight: 700; }
.w--ok { color: var(--basari); } .w--kotu { color: var(--hata); }

/* ============ PROVİZYON ============ */
.prov__head { margin-bottom: 12px; }
.prov__head h3 { font-size: 17px; color: var(--birincil); }
.prov__durum { font-size: 12px; color: var(--metin-soluk); margin-top: 4px; }
.prov__urls { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.prov__url { display: flex; align-items: center; gap: 8px; background: #faf8f3; border: 1px solid var(--cizgi); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; }
.prov__url code { font-family: var(--f-mono); font-size: 12px; color: var(--birincil); word-break: break-all; }
.prov__url .tag { margin-left: auto; font-size: 10.5px; color: var(--metin-soluk); white-space: nowrap; }
.prov__sec { margin-top: 14px; }
.prov__sec h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--metin-soluk); margin: 0 0 6px; }
.prov__steps { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--metin); }
.prov__steps li { margin: 4px 0; }
.prov__env { display: flex; flex-wrap: wrap; gap: 6px; }
.prov__env code { font-family: var(--f-mono); font-size: 11px; background: #f4f1ea; border: 1px solid var(--cizgi); border-radius: 6px; padding: 3px 7px; color: var(--birincil); }
.prov__json { margin-top: 12px; }
.prov__json summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--metin-soluk); }
.prov__json pre { background: #1a2530; color: #d7e0ea; border-radius: 10px; padding: 12px; font-family: var(--f-mono); font-size: 11px; overflow: auto; max-height: 320px; }

/* toast */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--birincil); color: #fff; padding: 12px 20px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--golge); z-index: 50;
}
.toast--hata { background: var(--hata); }
.toast--ok { background: var(--basari); }

/* skeletons */
.skel { background: linear-gradient(90deg, #efeae0 25%, #f6f2ea 50%, #efeae0 75%); background-size: 200% 100%; animation: sh 1.2s infinite; border-radius: 12px; }
.skel--ozet { height: 78px; grid-column: 1 / -1; }
.skel--row { height: 60px; }
@keyframes sh { to { background-position: -200% 0; } }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .col--list, .col--form, .col--empty, .col--preview { grid-column: 1; }
  .col--preview { position: static; }
}
@media (max-width: 560px) {
  .topbar { padding: 12px 14px; gap: 10px; }
  .topbar__sub { display: none; }
  .topbar__title { font-size: 17px; }
  .btn { padding: 9px 12px; font-size: 13px; }
  .layout { padding: 14px 14px; gap: 16px; }
  .grid2, .grid3, .grid4, .mods { grid-template-columns: 1fr; }
  .ozet__n { font-size: 22px; }
  .ozet__l { font-size: 11.5px; }
  .brand-row__meta { flex-wrap: wrap; }
  .col--form { padding: 16px 14px 20px; }
  .form-head { flex-wrap: wrap; }
  .fld--color .clr { flex-wrap: wrap; }
  .pv__cards { grid-template-columns: 1fr; }
}