/* İç sayfalar: kurslar, kurs, programlar, program, duyurular, duyuru, eğitmenler, eğitmen, hakkında, iletişim, başvuru, yasal metinler.
   Aynı kâğıt ve mürekkep; başlık büyük, metin dar sütunda. Başlık üstü etiket yok. */

.sayfa { padding: 0 var(--kenar); }
.sayfa-bas { padding: clamp(40px, 9vh, 104px) 0 clamp(32px, 6vh, 64px); }
.sayfa-bas h1 { font-size: clamp(52px, 8.4vw, 128px); font-weight: 800; letter-spacing: -.035em; line-height: .9; }
.sayfa-giris { max-width: 40ch; margin-top: 22px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -.01em; }
.sayfa h2 { font-size: clamp(30px, 3.6vw, 52px); }
.sayfa section + section { padding-top: clamp(64px, 10vh, 120px); }
.bulunamadi { padding: 40px 0 80px; font-size: 20px; }
.bulunamadi a, .metin a, .kunye-dl a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bulunamadi a:hover, .metin a:hover, .kunye-dl a:hover { color: var(--vurgu); }

/* düğmeler */
.eylemler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px;
  border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--cizgi); background: none;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s;
}
.dugme:hover { box-shadow: inset 0 0 0 1px var(--vurgu); color: var(--vurgu); }
.dugme.dolu { background: var(--murekkep); color: var(--kagit); box-shadow: none; }
.dugme.dolu:hover { background: var(--vurgu); color: var(--kagit); }

/* düz metin: yasal sayfalar, duyuru, hakkında */
.metin { max-width: 68ch; font-size: 18px; line-height: 1.6; }
.metin p + p, .metin ul, .metin ol { margin-top: 14px; }
.metin h2 { margin: 48px 0 14px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.metin ul, .metin ol { padding-left: 1.2em; }
.metin li + li { margin-top: 6px; }
.taslak { max-width: 68ch; margin-bottom: 36px; padding: 2px 0 2px 16px; border-left: 3px solid var(--vurgu); color: var(--soluk); font-size: 16px; }
.eklenecek { color: var(--soluk); font-style: italic; }

/* kart ızgarası (program, eğitmen, ilgili kurslar): şeritteki kartın aynısı */
.kart-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

/* ---------- Kurs sayfası ---------- */
.kurs-sayfa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: clamp(32px, 6vh, 72px); }
.kurs-gorsel { position: sticky; top: 24px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: #e7eded; }
.kurs-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.kurs-gorsel.mercek { --r: 150px; cursor: crosshair; }
.kurs-sayfa h1 { font-size: clamp(44px, 5.6vw, 88px); font-weight: 800; letter-spacing: -.035em; line-height: .95; }
.kunye-dl { display: grid; grid-template-columns: auto 1fr; margin: 28px 0 0; border-top: 1px solid var(--cizgi); max-width: 560px; }
.kunye-dl dt, .kunye-dl dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--cizgi); font-size: 16px; }
.kunye-dl dt { color: var(--soluk); padding-right: 28px; }
.kunye-dl dd { font-variant-numeric: lining-nums; }
.kunye-dl .bedava { color: var(--vurgu); font-weight: 600; }
.kurs-ayrinti { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px 40px; }
.kurs-ayrinti h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.kurs-ayrinti p + p { margin-top: 12px; }
.kurs-ayrinti ul { margin: 0; padding-left: 1.1em; }
.kurs-ayrinti li + li { margin-top: 6px; }
.gunler { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.gunler li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-variant-numeric: lining-nums tabular-nums; }
.gunler li span:last-child { color: var(--soluk); }
.kisi { display: flex; align-items: center; gap: 14px; }
.kisi img { width: 64px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.kisi b { display: block; font-weight: 650; }
.kisi span { color: var(--soluk); font-size: 15px; }
.kisi:hover b { color: var(--vurgu); }

/* ---------- Eğitmenler ---------- */
.egitmen-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; }
.egitmen-izgara li { border-top: 1px solid var(--cizgi); }
.egitmen-kart { display: grid; grid-template-columns: 76px 1fr; gap: 6px 16px; align-items: center; padding: 18px 0 22px; }
.egitmen-kart img { grid-row: span 3; width: 76px; height: 76px; object-fit: contain; mix-blend-mode: multiply; transition: translate .5s var(--yay); }
.egitmen-kart:hover img { translate: 0 -3px; }
.egitmen-kart .ad { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.egitmen-kart .unvan { color: var(--soluk); font-size: 15px; }
.egitmen-kart .ders { font-size: 14px; }
.egitmen-kart:hover .ad { color: var(--vurgu); }
.egitmen-bas { display: grid; grid-template-columns: auto 1fr; gap: 12px 32px; align-items: end; }
.egitmen-bas .avatar { width: clamp(120px, 14vw, 200px); aspect-ratio: 1; position: relative; }
.egitmen-bas .avatar img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.egitmen-bas .avatar.mercek { --r: 90px; cursor: crosshair; }

/* ---------- Hakkında: taştaki haber ---------- */
.tas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; margin-top: 28px; }
.tas .mercek { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; background: #f4f4f1; --r: 160px; cursor: crosshair; }
.tas .mercek img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 45%; mix-blend-mode: multiply; }
.bes { margin: 0; border-top: 1px solid var(--cizgi); }
.bes > div { display: grid; grid-template-columns: 8.5em 1fr auto; gap: 16px; align-items: baseline; padding: 14px 6px; border-bottom: 1px solid var(--cizgi); border-radius: 8px; transition: background .25s; }
.bes > div:hover, .bes > div.on { background: rgba(223, 103, 85, .07); }
.bes dt { font-weight: 650; font-size: 18px; }
.bes dd { margin: 0; font-size: 17px; }
.bes .durum { font-size: 13px; color: var(--soluk); white-space: nowrap; }
.bes .yok dd { color: var(--soluk); }
.bes .yok .durum { color: var(--vurgu); font-weight: 600; }
.lede { margin-top: 28px; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.32; letter-spacing: -.015em; max-width: 34ch; }
.lede span { border-radius: 4px; transition: background .25s, color .25s; }
.lede span.on { background: rgba(223, 103, 85, .14); color: var(--vurgu); }
.kaynak { margin-top: 18px; font-size: 13px; color: var(--soluk); max-width: 60ch; }
.adimlar { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; counter-reset: adim; }
.adimlar li { border-top: 1px solid var(--cizgi); padding: 16px 0; counter-increment: adim; }
.adimlar li::before { content: counter(adim, decimal-leading-zero); display: block; font-size: 13px; color: var(--soluk); font-variant-numeric: lining-nums; }
.adimlar b { display: block; margin: 8px 0 4px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.adimlar span { color: var(--soluk); }

/* ---------- İletişim ---------- */
.iletisim-dl { max-width: 720px; }
.iletisim-dl dd { font-size: 20px; }

/* ---------- Başvuru formu: e-posta uygulamasında açılır, sunucuya gitmez ---------- */
.form { display: grid; gap: 18px; max-width: 640px; }
.form label { display: grid; gap: 6px; font-size: 15px; color: var(--soluk); }
.form input, .form select, .form textarea {
  font: inherit; font-size: 18px; color: var(--murekkep);
  padding: 12px 14px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--cizgi);
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--vurgu); }
.form .not { font-size: 14px; color: var(--soluk); }
.form .not a { text-decoration: underline; text-underline-offset: 3px; }
.form-durum { min-height: 1.4em; font-size: 15px; color: var(--soluk); }

@media (max-width: 900px) {
  .kurs-sayfa, .tas { grid-template-columns: 1fr; }
  .kurs-gorsel { position: relative; top: 0; }
  .tas .mercek { width: min(100%, 340px); margin: 0 auto; }   /* dikey kalır: kapı ortada görünür */
  .adimlar { grid-template-columns: 1fr; }
  .egitmen-bas { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sayfa-bas { padding-top: 28px; }
  .metin { font-size: 17px; }
  .bes > div { grid-template-columns: 6.5em 1fr; }
  .bes .durum { grid-column: 2; }
}

/* ---------- 25.10: ana sayfanın dili ----------
   Gravür kalktı: kurs görselleri açılıştaki siyah-beyaz set (KURS.foto), programlar ve eğitmenler setteki Cycles araçları (KURS.arac).
   Köşeler logodaki gibi çapraz; program adı, rejideki alt yazı bandı gibi fotoğrafın altında koyu bir bantta. */
.kart { border-radius: 18px 0 18px 0; }
.kart-gorsel { background: #24323a; }
.kart-gorsel img, .kurs-gorsel img { mix-blend-mode: normal; }
.kurs-gorsel { margin: 0; border-radius: 22px 0 22px 0; background: #24323a; }
.kurs-gorsel .bant { position: absolute; left: 4%; bottom: 6%; padding: 6px 13px 7px; border-radius: 8px 0 8px 0; background: #24323a; color: #fff;
  font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: -.01em; }
/* araç render'ları saydam zeminde, pişmiş gölgesiyle durur */
.kisi img, .egitmen-kart img, .egitmen-bas .avatar img { object-fit: contain; mix-blend-mode: normal; }
.egitmen-kart img { width: 92px; height: 70px; }
.kisi img { width: 76px; height: 58px; }
/* programlar: her programın aracı kartın başında; program sayfasında başlığın yanında */
.program .arac { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin: 0 0 4px; transition: translate .6s var(--yay); }
.program:hover .arac { translate: 0 -4px; }
.program-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.program-bas .arac { width: clamp(200px, 26vw, 380px); aspect-ratio: 4 / 3; object-fit: contain; }
/* Hakkında: beş program, beş araç */
.arac-serit { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.arac-serit a { display: grid; gap: 2px; }
.arac-serit img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; transition: translate .6s var(--yay); }
.arac-serit a:hover img { translate: 0 -4px; }
.arac-serit b { font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.arac-serit span { font-size: 14px; color: var(--soluk); }
.arac-serit a:hover b { color: var(--vurgu); }
/* eğitmen fotoğrafı gelince (yönetim paneli) render yerine kırpılmış portre */
.egitmen-kart img.foto, .kisi img.foto, .egitmen-bas .avatar img.foto { object-fit: cover; border-radius: 14px 0 14px 0; }
/* başvurusu kapanmış ya da dolmuş kurs */
.dugme.pasif { opacity: .55; cursor: default; pointer-events: none; }
/* metinden sonra gelen bölüm (Hakkında: Nasıl işler) nefes alsın */
.sayfa .metin + section { padding-top: clamp(56px, 9vh, 104px); }
/* başvuru: genel "Başvur"dan gelindiyse kurs seçilene kadar özetin tarih/ders/ücret satırları yok */
.bv-ozet.bv-bos dl { display: none; }
.bv-ozet.bv-bos .bv-ad { color: rgba(255, 255, 255, .78); font-weight: 600; }
/* küçük künye yazıları 13 → 14 px: tarih rozeti, program etiketi, sıra numarası */
.kart-prog, .rozet, .program .no, .adimlar li::before { font-size: 14px; }
/* masaüstünde alttaki yüzen kapsül yok: üst çubuk zaten orada (telefonda kalır) */
@media (min-width: 861px) { .dok { display: none; } }
@media (max-width: 860px) {
  .arac-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .program-bas { grid-template-columns: 1fr; }
  .program-bas .arac { width: 72%; justify-self: center; }
}

/* 25.10: kurs fotoğrafı da ana sayfadaki gibi çok yavaş yaklaşır (%6 / 20 sn) */
.kurs-gorsel img { animation: yavasYaklas 20s linear both; transform-origin: 50% 40%; }
@keyframes yavasYaklas { from { scale: 1; } to { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .kurs-gorsel img, .bv-foto { animation: none; } }