/* Kaynak Kampüs — "Eğitim Sürecini Görün" ekran galerisi (yeniden kullanılabilir).
   Yalnız .surec-* sınıflarını tanımlar; token'lar assets/site-tema.css'ten gelir.
   Davranış: assets/surec-galeri.js */

.surec-bas { max-width: 760px; margin: 0 auto var(--bosluk-48); text-align: center; }
.surec-bas .bolum-alt { margin-left: auto; margin-right: auto; }
.surec-bas .bolum-alt + .bolum-alt { margin-top: var(--bosluk-12); }

.surec-galeri { position: relative; }

.surec-yol {
  display: flex; gap: var(--bosluk-24);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--duman) transparent;
  padding-bottom: var(--bosluk-16);
}
.surec-yol:focus-visible { outline-offset: 4px; border-radius: var(--radius-md); }

.surec-oge { flex: 0 0 min(560px, 82%); scroll-snap-align: start; min-width: 0; }

.surec-cerceve {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: var(--sis); border: 1px solid var(--duman);
  border-radius: var(--radius-md); overflow: hidden;
  font: inherit; color: inherit; text-align: center;
}
.surec-cerceve img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
button.surec-cerceve { cursor: zoom-in; transition: box-shadow .2s ease; }
button.surec-cerceve:hover { box-shadow: var(--golge-yumusak); }

/* Görsel henüz eklenmemişse: kesik çizgili boş alan */
.surec-bos {
  position: absolute; inset: 12px; display: grid; place-items: center;
  border: 1px dashed var(--bordo-ac); border-radius: var(--radius-sm);
  font-size: var(--text-small); color: var(--kursun); padding: var(--bosluk-16);
}

.surec-baslik {
  margin-top: var(--bosluk-12);
  font-family: var(--font-baslik); font-weight: var(--agirlik-kalin);
  font-size: var(--text-body); line-height: 1.35; color: var(--murekkep);
}

.surec-denetim { display: flex; justify-content: flex-end; gap: var(--bosluk-8); margin-top: var(--bosluk-8); }
.surec-ok {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--beyaz); color: var(--murekkep);
  border: 1px solid var(--duman); border-radius: var(--radius-sm);
  font-size: 18px; line-height: 1;
}
.surec-ok:hover:not(:disabled) { border-color: var(--murekkep); }
.surec-ok:disabled { opacity: .4; cursor: default; }

/* Büyük görünüm — dialog (genel "* { margin:0 }" sıfırlaması nedeniyle açık ortalama) */
.surec-kip {
  position: fixed; inset: 0; margin: auto; padding: 0;
  width: min(1100px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 32px);
  background: var(--beyaz); color: var(--murekkep);
  border: 0; border-radius: var(--radius-lg); overflow: hidden;
}
.surec-kip::backdrop { background: rgba(31, 20, 26, .72); }
.surec-kip-ic { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.surec-kip-bas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-16);
  padding: var(--bosluk-12) var(--bosluk-16) var(--bosluk-12) var(--bosluk-24);
  border-bottom: 1px solid var(--duman);
  font-family: var(--font-baslik); font-weight: var(--agirlik-kalin);
}
.surec-kip-kapat {
  width: 44px; height: 44px; flex-shrink: 0; cursor: pointer; font-size: 20px;
  background: var(--beyaz); color: var(--murekkep);
  border: 1px solid var(--duman); border-radius: var(--radius-sm);
}
.surec-kip-kapat:hover { border-color: var(--murekkep); }
.surec-kip-govde { overflow: auto; background: var(--sis); }
.surec-kip-govde img { display: block; width: 100%; height: auto; }
.surec-not { margin: var(--bosluk-16) 0 0; text-align: center; font-size: var(--text-small); color: var(--kursun); }

@media (max-width: 640px) {
  .surec-oge { flex-basis: 88%; }
  .surec-yol { gap: var(--bosluk-16); }
  .surec-denetim { display: none; } /* mobilde parmakla kaydırılır */
}