:root{
  --bg:#f8f8f2;
  --primary:#233b7f;
  --primary-light:#3c4f99;
  --white:#ffffff;
  --danger:#b22222;
  --card-bg:#c6dbf2;/*d3e3f4*/
}

/* ---------- Genel ---------- */
*{box-sizing:border-box;font-family:"Helvetica Neue",sans-serif;}
body{margin:0;background:var(--bg);color:#333;display:flex;justify-content:center;}
.container{max-width:900px;width:100%;padding:2rem;}
.title{color:var(--primary);text-align:center;margin-bottom:2rem;}

/* ---------- Form ---------- */
form{display:flex;flex-direction:column;gap:1rem;}
.field{display:flex;flex-direction:column;gap:.25rem;}
.field span{font-weight:600;color:#222;}
.field input,.field select{
  padding:.75rem 1rem;border:1px solid #d0d7e2;border-radius:6px;background:#e8efff3b;
}


/* ---------- Slot başlık + grid ---------- */
.legend{font-size:1.7rem;font-weight:700;color:var(--primary);margin:1.5rem 0 .75rem;}
.legend1{font-size:1.7rem;font-weight:700;color:#bea170;margin:1.5rem 0 .75rem;}
.slot-instruction-1 {font-size:1rem;font-weight:400;color:var(--primary);margin:1rem;}
.slot-instruction-2 {font-size:1rem;font-weight:400;color:#bea170;margin:1rem;}
.slot-instruction-3 {font-size:1rem;font-weight:400;color:var(--primary);margin:1rem;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;}

/* ---------- Kart ---------- */
.card{
  position:relative;
  background:var(--card-bg);
  border:2px solid transparent;
  border-radius:8px;
  padding:1rem;
  display:flex;flex-direction:column;align-items:center;
  gap:.3rem;cursor:pointer;transition:border-color .2s;
  width:100%;
  max-width: 360px;margin:1rem auto;
  height: auto;  /* veya hiç height vermeyin */
  min-height: 400px;
  text-align:center;
}

.card:hover{border-color:var(--primary-light);}
.card.selected{border-color:var(--primary);}
.card.disabled{opacity:.45;cursor:not-allowed;}

.card .id{font-weight:700;font-size:1.2rem;color:var(--primary-light);align-self:center;text-align:center;}
.card .title{font-size:1.2rem;font-weight:700;color:var(--primary);margin:.4rem 0 .2rem;align-self:center;text-align:center; min-height: 92px;padding: 0rem;width: 100%;}
.card .meta1{font-size:1.1rem;font-weight:700;color:var(--primary);margin:.12rem 0;align-self:center;text-align:center;padding: 0.3rem;}
.card .meta{font-size:.9rem;font-weight:700;color:#333;margin:.3rem 0;word-break: break-word;overflow-wrap: anywhere;}
.card .yurutucu,
.card .mekan,
.card .yas,
.card .brans{font-size:.85rem;color:#333;margin:.3rem 0;}
.card .desc-short{font-size:.85rem;color:#444;text-align:left;margin:.4rem 0 .3rem;}
.card .meta2{font-size:.82rem;margin-top:auto;text-align:left;}
.card .meta2:before{content:"Mekân: ";font-weight:700;}
.card .meta3{font-size:.82rem;margin-top:.3rem;text-align:left;}
.card .meta3:before{content:"Hitap Eden Yaş Grubu: ";font-weight:700;}
.card .meta4{font-size:.82rem;margin-top:.3rem;text-align:left;}
.card .meta4:before{content:"Hitap Eden Branş: ";font-weight:700;}
.card .cap1{font-size:.85rem;font-weight:700;margin-top:.4rem;text-align:center;}
.card .cap1:before{content:"Kontenjan: ";}
.card .mekan,
.card .yas,
.card .brans{
  text-align:left;
  align-self:flex-start;
}

.card.disabled .desc-short{color:#999;}
.info-text {display: flex;justify-content: center;padding-top: 10px;padding-bottom: 4px;}
.icon-with-text { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;}
.circle-img-icon { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 1px rgba(0,0,0,0.2);margin-top:.4rem; }
.icon-caption { font-size: 0.9rem; color:#bea170; font-weight: 500; }


/* ---------- Flip kart ---------- */
label.card{perspective:1000px;}
.card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .6s;
}
.card.flipped .card-inner{transform:rotateY(180deg);overflow: visible;}
.card-front,
.card-back{
  position:absolute;inset:0;width:100%;height:100%;z-index: 1;
  backface-visibility:hidden;overflow: visible;
  display:flex;flex-direction:column;text-align:left;word-break: break-word;
}
.card-back{transform:rotateY(180deg);}
.card-front .desc-short{
  overflow:hidden;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.card-back .desc-full{font-size:.9rem;color:#555;margin:1rem;margin-top:.3rem ;;text-align:justify;word-break: break-word;overflow-wrap: anywhere;}

/* ---------- Seçim dairesi ---------- */
.tick-wrap{position:absolute;top:8px;right:8px;width:24px;height:24px;z-index: 10;}
.tick-wrap input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.tick-circle{
  width:100%;height:100%;border:2px solid #a8caba;border-radius:50%;
  background:#f3f4fa;transition:.25s;
}
.tick-wrap input:checked + .tick-circle{
  background:#2ecc71;border-color:#2ecc71;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10"><polyline points="1 5 4 8 11 1" fill="none" stroke="white" stroke-width="2"/></svg>');
  background-repeat:no-repeat;background-position:center;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;top:1rem;right:1rem;
  background:var(--primary);color:#fff;
  padding:1rem 1.5rem;border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  animation:fade 3s ease forwards;
}
@keyframes fade{0%,90%{opacity:1;}100%{opacity:0;}}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;z-index:999;
}
.modal-content{
  background:#fff;border-radius:10px;padding:1.5rem;
  max-width:400px;width:90%;max-height:80vh;overflow:auto;
}
.modal-content h2{margin-top:0;color:var(--primary);}
.modal-content .close{
  margin-top:1rem;background:var(--primary);color:#fff;
  border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;
}

/* ---------- Tablo (Admin) ---------- */
.table-wrapper { width: 100%; display: flex; justify-content: center; margin-top: 1rem; }
table { border-collapse: collapse; width: 100%; max-width: 1200px; min-width: 1228px; }
th, td { border: 1px solid #d3d7e8; padding: .6rem; font-size: .9rem; text-align: left; }
th { background: #e6e9f7; color: #111; }

.final-instruction { font-size: 1rem; font-weight: 400; color: var(--primary); margin: 0.5rem; text-align: justify; }
.support-note { font-size: 1rem; font-weight: 400; color: var(--primary); margin: 0.5rem; text-align: justify; }
.support-note a { word-break: break-word; }

.support-button { display: inline-block; padding: 0.5rem 1.25rem; background: var(--primary); color: white; text-decoration: none; font-weight: 500; border-radius: 0.5rem; font-size: 1rem; transition: background 0.3s ease; }
.support-button:hover { background: #1a3e8a; }

/* === EVRENSEL FİLTRE PANELİ =================================== */
#filterBox,
#filterBoxWorkshop {
  display: grid;                     /* iki–satır esnek ızgara */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem 0.8rem;                /* satır–sütun aralığı   */
  margin-bottom: 1rem;
  align-items: center;
}

/* input-lar & select-ler */
#filterBox  input,
#filterBox  select,
#filterBoxWorkshop input,
#filterBoxWorkshop select{
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid #bfc3d3;
  border-radius: 6px;
}

/* butonlar */
#filterBox  button,
#filterBoxWorkshop button{
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: background .18s;
}

#applyFilter,
#applyWorkshopFilter{
  background:#1c2d84; color:#fff;
}
#applyFilter:hover,
#applyWorkshopFilter:hover{
  background:#15226a;
}

#resetFilter,
#resetWorkshopFilter{
  background:#eeeeee; color:#333;
}
#resetFilter:hover,
#resetWorkshopFilter:hover{
  background:#d9d9d9;
}

/* kayıt sayacı  (satırın en sağına yaslanır) */
#filterCount,
#filterCountWorkshop{
  grid-column: 1 / -1;               /* ızgaranın tamamını kapla */
  text-align:right;
  font-size:.9rem;
  color:#555;
}





/* ---------- KAYIT (Submit) Butonu ---------- */
.btn.submit{
  display:inline-block;
  padding:.9rem 2.2rem;
  font-size:1.05rem;
  font-weight:600;
  color:var(--white);
  background:var(--primary);
  border:none;
  border-radius:8px;             /* tam kapsül form */
  box-shadow:0 4px 8px rgba(35,59,127,.25);
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}

.btn.submit:hover{
  background:var(--primary-light);
  transform:translateY(-2px);     /* hafif yükselme */
}

.btn.submit:active{
  transform:translateY(0);        /* tıklamada geri iner */
  box-shadow:0 3px 6px rgba(35,59,127,.2);
}