* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Arial, sans-serif; background: #f5f4ef; color: #2c2c2a; margin: 0; }
a { color: #185fa5; text-decoration: none; }
.sayfa { max-width: 1400px; margin: 0 auto; padding: 24px 16px 60px; }
.form-kutu { max-width: 360px; margin: 0 auto; padding: 24px 16px; }
.ust-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
h1 { font-size: 20px; font-weight: 500; }
.hata { color: #a32d2d; font-size: 14px; }
.hata-kutu { background: #fde8e8; border: 1px solid #a32d2d; color: #7a1f1f; padding: 10px 12px;
  border-radius: 8px; margin: 10px 0; font-size: 13px; white-space: pre-wrap; }
input, textarea, select { width: 100%; padding: 8px 10px; border: 1px solid #d3d1c7;
  border-radius: 8px; font-size: 14px; background: #fff; font-family: inherit; }
.form-kutu input { margin-bottom: 8px; }
button { padding: 8px 14px; border-radius: 8px; border: 1px solid #b4b2a9; background: #fff;
  cursor: pointer; font-size: 14px; color: #2c2c2a; font-family: inherit; }
button:hover { background: #efeee8; }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.3; cursor: default; }
button.birincil { background: #2c2c2a; color: #fff; border-color: #2c2c2a; }
button.birincil:hover { background: #444440; }
button.tehlike { color: #a32d2d; border-color: #d9a5a5; }
button.tehlike:hover { background: #fdeaea; }

.kart-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.sulale-karti { display: block; padding: 12px 14px; border: 1px solid #d3d1c7; border-radius: 10px; background: #fff; }
.sulale-karti .baslik { font-weight: 500; }
.sulale-karti .alt-bilgi { font-size: 12px; color: #5f5e5a; margin-top: 2px; }
.form-satir { display: flex; flex-direction: column; gap: 12px; }
.form-satir form { display: flex; gap: 8px; }

/* ---------- ağaç tuvali ---------- */
.agac-arac { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.agac-arac button { padding: 5px 11px; font-size: 14px; line-height: 1; }
.zoom-oran { font-size: 13px; color: #5f5e5a; min-width: 46px; text-align: center;
  font-variant-numeric: tabular-nums; }
.arac-ipucu { font-size: 12px; color: #8d8a7d; margin-left: 4px; }
.daire, .yon, .ac-kapat { cursor: pointer; }

/* Kaydırma alanı: her iki yönde de çubuk çıkar */
.agac-alan { overflow: auto; border: 1px solid #e2e0d6; border-radius: 12px;
  background: #fbfaf6; height: 68vh; min-height: 340px;
  overscroll-behavior: contain; cursor: grab; }
.agac-alan.suruklerken { cursor: grabbing; user-select: none; }
.agac-alan.suruklerken .daire { pointer-events: none; }
.agac-alan::-webkit-scrollbar { width: 12px; height: 12px; }
.agac-alan::-webkit-scrollbar-track { background: #f3f1e9; border-radius: 8px; }
.agac-alan::-webkit-scrollbar-thumb { background: #c9c6b8; border-radius: 8px;
  border: 3px solid #f3f1e9; }
.agac-alan::-webkit-scrollbar-thumb:hover { background: #aeab9c; }

.agac-sizer { position: relative; }
.agac-tuval { position: absolute; transform-origin: 0 0; }
.agac-cizgi { position: absolute; left: 0; top: 0; pointer-events: none; }
.cizgi { stroke: #b9b6a8; stroke-width: 2; }
.cizgi.es { stroke: #8d8a7d; stroke-width: 3; }

.dugum { position: absolute; }
.daire { width: 100%; height: 100%; border-radius: 50%; padding: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; line-height: 1.15; overflow: hidden; }
.daire.erkek { background: #e6f1fb; border: 3px solid #185fa5; }
.daire.erkek:hover { background: #d5e7f8; }
.daire.kadin { background: #fbeaf0; border: 3px solid #993556; }
.daire.kadin:hover { background: #f7dbe4; }
.daire.secili { box-shadow: 0 0 0 4px #2c2c2a30; }
.daire-ad { font-size: 11.5px; font-weight: 600; word-break: break-word; }
.daire.erkek .daire-ad { color: #0c447c; }
.daire.kadin .daire-ad { color: #72243e; }
.daire-alt { font-size: 10px; color: #5f5e5a; }

/* dört yöndeki ekleme butonları — daire üzerine gelince belirginleşir */
.yon { position: absolute; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #b4b2a9; color: #5f5e5a; z-index: 3;
  opacity: 0.35; transition: opacity 0.12s; }
.dugum:hover .yon { opacity: 1; }
.yon:hover:not(:disabled) { background: #2c2c2a; color: #fff; border-color: #2c2c2a; }
.yon-ust { top: -11px; left: 50%; transform: translateX(-50%); }
.yon-alt { bottom: -11px; left: 50%; transform: translateX(-50%); }
.yon-sol { left: -11px; top: 50%; transform: translateY(-50%); }
.yon-sag { right: -11px; top: 50%; transform: translateY(-50%); }

.rozet-kutu { position: absolute; display: flex; align-items: center; gap: 4px; z-index: 2; }
.rozet-kutu polygon { fill: #f1efe8; stroke: #8d8a7d; stroke-width: 1.5; }
.ac-kapat { padding: 0 6px; height: 20px; min-width: 22px; font-size: 12px; border-radius: 6px; color: #5f5e5a; }

.bos-mesaj { color: #5f5e5a; max-width: 460px; }
.alt-arac { margin-top: 14px; }

.duzenle-panel { margin-top: 16px; padding: 16px; border: 1px solid #d3d1c7;
  border-radius: 12px; background: #fff; box-shadow: 0 2px 10px #0000000d; }
.panel-baslik { font-weight: 600; margin-bottom: 12px; }
.alan-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.duzenle-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5f5e5a; }
.duzenle-panel label.tam { margin-top: 10px; }
.duzenle-panel textarea { min-height: 54px; resize: vertical; }
.alan-hata { color: #a32d2d; font-size: 13px; margin-top: 6px; }
.panel-butonlar { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .agac-alan { height: 58vh; }
  .arac-ipucu { display: none; }
}

.cizgi.kardes { stroke: #c9c6b8; stroke-width: 2; stroke-dasharray: 5 4; }