/* css/program.css: haftalık canlı ders programı bileşeni. Eğitim Portalı (22.10.2026):
   anasayfa-vakar.css'ten ayrıldı; medrese süs katmanı kapalıyken de program biçimli kalsın. */

/* =====================================================================
 * Haftalık canlı ders programı: "AKŞAM ÇİZELGESİ" (28 Eylül 2026)
 * Markup ve gerekçe: anasayfa/bolum-program.php; davranış js/aksam-cizelgesi.js.
 * Gece kartı; gerçek zaman ölçekli eksen alacakaranlıktan geceye koyulaşır;
 * dersler süresiyle orantılı blok, rengi alanından (--rol, markup'tan).
 * Renkler kurumsal.css gece jetonlarından (--kb-*), tema değişince uyar.
 * ===================================================================== */
.ana-kapi .kp-aksam {
  --gunkol: 150px;
  /* Alan renkleri: gece kartı her temada koyu, bu yüzden temanın anlamsal
     jetonları (camgöbeği, dikkat) yerine koyu zeminde birbirinden ayrılan
     sabit bir takım. Bazı temalarda --dikkat ile --vurgu aynı renk; o zaman
     Ahlak ile Tarih aynı görünüyordu. Ahlak kurumun lamba rengi kalır. */
  --alan-kuran: #57B9CF; --alan-akaid: #8EA2FF; --alan-ahlak: var(--kb-lamba);
  --alan-fikih: #5FCF8E; --alan-tarih: #EE8C78; --alan-diger: #B9B1A4;
}
.ana-kapi .kp-aksam__sahne {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(22px, 3.2vw, 46px); border-radius: 28px; color: var(--kb-fil);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 27% 8%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 14%, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(1px 1px at 63% 6%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 71% 22%, rgba(255, 255, 255, .3), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 30%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(55% 70% at 0% 0%, color-mix(in srgb, var(--kb-lamba) 22%, transparent), transparent 70%),
    radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--birincil) 55%, transparent), transparent 72%),
    var(--kb-gece);
  box-shadow: 0 30px 60px -38px color-mix(in srgb, var(--kb-gece) 90%, transparent);
}
.ana-kapi .kp-aksam__sahne::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--kb-girih); background-size: 96px 96px; opacity: .035;
}
/* Hilal: gölgeyle oyulmuş bir daire; lamba ışığıyla parlar. */
.ana-kapi .kp-aksam__hilal {
  position: absolute; top: clamp(18px, 2.6vw, 34px); right: clamp(18px, 3vw, 44px); z-index: -1;
  width: 54px; height: 54px; border-radius: 50%; transform: rotate(-24deg);
  box-shadow: inset -11px 7px 0 0 var(--kb-lamba-acik);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--kb-lamba) 55%, transparent));
}

/* --- Baş --- */
.ana-kapi .kp-aksam__bas {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px;
  padding-right: 70px;
}
.ana-kapi .kp-aksam__etiket {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--kb-lamba-acik);
}
.ana-kapi .kp-aksam__etiket::before {
  content: ""; width: 11px; height: 11px; background: var(--kb-lamba);
  -webkit-mask: var(--kb-yildiz) center / contain no-repeat; mask: var(--kb-yildiz) center / contain no-repeat;
}
.ana-kapi .kp-aksam__baslik {
  margin: 0; font-family: var(--vk-serif, var(--yz-kitap)); font-weight: 500;
  font-size: clamp(28px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -.02em; color: var(--kb-fil); text-wrap: balance;
}
.ana-kapi .kp-aksam__not { margin: 10px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.55; color: var(--kb-fil-2); }
.ana-kapi .kp-aksam__tumu {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--kb-hat); color: var(--kb-fil); font-size: 14px; font-weight: 600; text-decoration: none;
}
.ana-kapi .kp-aksam__tumu svg { width: 16px; height: 16px; }
.ana-kapi .kp-aksam__tumu:hover { background: rgba(243, 236, 223, .08); }

/* --- Sıradaki ders --- */
.ana-kapi .kp-aksam__siradaki {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px 32px;
  margin: clamp(22px, 2.6vw, 34px) 0 20px; padding: 20px 24px; border-radius: 22px;
  background: linear-gradient(120deg, rgba(243, 236, 223, .08), rgba(243, 236, 223, .025));
  box-shadow: inset 0 0 0 1px var(--kb-hat);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ana-kapi .kp-aksam__durum {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--kb-lamba) 18%, transparent); color: var(--kb-lamba-acik);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ana-kapi .kp-aksam__durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ana-kapi .kp-aksam__siradaki.is-canli .kp-aksam__durum { background: color-mix(in srgb, #3fd08a 20%, transparent); color: #7fe3b0; }
.ana-kapi .kp-aksam__siradaki.is-canli .kp-aksam__durum::before { animation: kp-aksam-nabiz 1.6s ease-out infinite; }
@keyframes kp-aksam-nabiz {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}
.ana-kapi .kp-aksam__sir-ad {
  margin: 10px 0 2px; font-family: var(--vk-serif, var(--yz-kitap)); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15; color: var(--kb-fil);
}
.ana-kapi .kp-aksam__sir-meta { margin: 0; font-size: 14.5px; color: var(--kb-fil-2); }
.ana-kapi .kp-aksam__sayac { display: grid; gap: 6px; justify-items: start; }
.ana-kapi .kp-aksam__sayac[hidden] { display: none; }
.ana-kapi .kp-aksam__sayac-ust { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kb-fil-2); }
.ana-kapi .kp-aksam__rakamlar { display: flex; gap: 6px; }
.ana-kapi .kp-aksam__birim {
  display: grid; justify-items: center; min-width: 58px; padding: 8px 6px 6px; border-radius: 12px;
  background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--kb-hat);
}
.ana-kapi .kp-aksam__birim b {
  font-family: var(--vk-serif, var(--yz-kitap)); font-weight: 500; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums; color: var(--kb-lamba-acik);
}
.ana-kapi .kp-aksam__birim small { margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kb-fil-2); }
.ana-kapi .kp-aksam__ilerleme { display: block; width: 100%; height: 4px; border-radius: 999px; background: rgba(243, 236, 223, .12); overflow: hidden; }
.ana-kapi .kp-aksam__ilerleme[hidden] { display: none; }
.ana-kapi .kp-aksam__ilerleme i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--kb-lamba), #7fe3b0); transition: width 1s linear; }
.ana-kapi .kp-aksam__eylem { display: flex; flex-direction: column; gap: 8px; }
.ana-kapi .kp-aksam__dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--kb-lamba); color: #1c1000; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  /* Gölge altın değil (1 Ekim 2026, kullanıcı: "derse git yazısı glowluyor"):
     düğmenin kendi rengindeki gölge koyu bantta hale gibi parlıyordu. */
  box-shadow: none;
  transition: transform .15s ease-out, background-color .15s ease-out;
}
.ana-kapi .kp-aksam__dugme svg { width: 17px; height: 17px; }
.ana-kapi .kp-aksam__dugme:hover { background: color-mix(in srgb, var(--kb-lamba) 85%, #fff); transform: translateY(-1px); }
.ana-kapi .kp-aksam__dugme--ikincil { background: transparent; color: var(--kb-fil); box-shadow: inset 0 0 0 1px var(--kb-hat); font-weight: 600; }
.ana-kapi .kp-aksam__dugme--ikincil:hover { background: rgba(243, 236, 223, .08); }
.ana-kapi .kp-aksam__dugme[hidden] { display: none; }

/* --- Araç çubuğu: süzgeç + takvim --- */
.ana-kapi .kp-aksam__arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.ana-kapi .kp-aksam__arac[hidden] { display: none; }
.ana-kapi .kp-aksam__suzgec { display: inline-flex; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--kb-hat); background: rgba(0, 0, 0, .18); }
.ana-kapi .kp-aksam__suzgec button {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--kb-fil-2); font: inherit; font-size: 14px; font-weight: 600;
}
.ana-kapi .kp-aksam__suzgec button[aria-pressed="true"] { background: var(--kb-fil); color: var(--kb-gece); }
.ana-kapi .kp-aksam__takvim {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin-left: auto; padding: 0 16px; border: 0;
  border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--kb-hat); cursor: pointer;
  color: var(--kb-fil); font: inherit; font-size: 14px; font-weight: 600;
}
.ana-kapi .kp-aksam__takvim:hover { background: rgba(243, 236, 223, .08); }
.ana-kapi .kp-aksam__takvim svg { color: var(--kb-lamba-acik); }

/* --- Sekmeler (yalnız telefonda) --- */
.ana-kapi .kp-aksam__sekmeler { display: none; }

/* --- Çizelge --- */
.ana-kapi .kp-aksam__cizelge { position: relative; }
.ana-kapi .kp-aksam__eksen { display: grid; grid-template-columns: var(--gunkol) minmax(0, 1fr); margin-bottom: 6px; }
/* Eksen şeridi alacakaranlıktan (lamba) geceye koyulaşır: 20:00 ile 22:30
   arası gerçekten gün batımından geceye geçiştir. */
.ana-kapi .kp-aksam__eksen-serit {
  position: relative; height: 34px; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--kb-lamba) 46%, var(--kb-gece)) 0%,
    color-mix(in srgb, var(--birincil) 50%, var(--kb-gece)) 48%,
    color-mix(in srgb, var(--kb-gece-2) 80%, #000) 100%);
  box-shadow: inset 0 0 0 1px var(--kb-hat);
}
.ana-kapi .kp-aksam__tik {
  position: absolute; top: 50%; left: calc(var(--k) / var(--dilim) * 100%); transform: translate(-50%, -50%);
  font-family: var(--yz-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--kb-fil) 70%, transparent);
}
.ana-kapi .kp-aksam__tik--saat { color: var(--kb-fil); font-weight: 600; }
.ana-kapi .kp-aksam__tik:first-child { transform: translate(10px, -50%); }
.ana-kapi .kp-aksam__tik:last-child { transform: translate(calc(-100% - 10px), -50%); }

.ana-kapi .kp-aksam__gunler { list-style: none; margin: 0; padding: 0; }
.ana-kapi .kp-aksam__gun {
  display: grid; grid-template-columns: var(--gunkol) minmax(0, 1fr); align-items: stretch;
  padding: 10px 0; border-top: 1px solid var(--kb-hat); border-radius: 14px;
}
.ana-kapi .kp-aksam__gun:first-child { border-top: 0; }
.ana-kapi .kp-aksam__gun[hidden] { display: none; }
.ana-kapi .kp-aksam__gun.is-bugun {
  background: linear-gradient(90deg, color-mix(in srgb, var(--kb-lamba) 13%, transparent), transparent 55%);
  border-top-color: transparent;
}
.ana-kapi .kp-aksam__gun.is-bugun + .kp-aksam__gun { border-top-color: transparent; }
.ana-kapi .kp-aksam__gun-ad { display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 0 12px; }
.ana-kapi .kp-aksam__gun-uzun { font-family: var(--vk-serif, var(--yz-kitap)); font-weight: 600; font-size: 18px; color: var(--kb-fil); }
.ana-kapi .kp-aksam__gun-ad small { font-family: var(--yz-mono); font-size: 11.5px; color: var(--kb-fil-2); }
.ana-kapi .kp-aksam__gun-ad small b { color: var(--kb-lamba-acik); font-weight: 700; }
.ana-kapi .kp-aksam__gun.is-bugun .kp-aksam__gun-uzun { color: var(--kb-lamba-acik); }
.ana-kapi .kp-aksam__gun:not(.is-bugun) .kp-aksam__bugun-yazi { display: none; }

/* Şerit: 5 dakikalık dilimler; yarım saat çizgileri zeminde. */
.ana-kapi .kp-aksam__serit {
  display: grid; grid-template-columns: repeat(var(--dilim), minmax(0, 1fr));
  grid-template-rows: repeat(var(--kulvar-say, 1), auto); row-gap: 6px; align-content: center;
  background-image: linear-gradient(90deg, var(--kb-hat) 1px, transparent 1px);
  background-size: calc(100% * 6 / var(--dilim)) 100%;
}
.ana-kapi .kp-aksam__ders {
  --acik: color-mix(in srgb, var(--rol, var(--birincil)) 82%, #fff);
  position: relative; grid-column: var(--bas) / var(--bit); grid-row: var(--kulvar, 1);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: 6px; padding: 10px 12px 11px 14px;
  border-radius: 12px; color: var(--kb-fil);
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--rol, var(--birincil)) 30%, var(--kb-gece-2)),
    color-mix(in srgb, var(--rol, var(--birincil)) 12%, var(--kb-gece)));
  box-shadow: inset 3px 0 0 var(--acik), inset 0 0 0 1px color-mix(in srgb, var(--acik) 26%, transparent);
  transition: transform .18s ease-out, box-shadow .18s ease-out, opacity .3s;
}
.ana-kapi .kp-aksam__ders[hidden] { display: none; }
.ana-kapi .kp-aksam__ders:hover { transform: translateY(-2px); box-shadow: inset 3px 0 0 var(--acik), inset 0 0 0 1px color-mix(in srgb, var(--acik) 50%, transparent), 0 14px 26px -16px #000; }
.ana-kapi .kp-aksam__saat { font-family: var(--yz-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--acik); }
.ana-kapi .kp-aksam__saat span { color: color-mix(in srgb, var(--kb-fil-2) 80%, transparent); }
.ana-kapi .kp-aksam__ders-ad { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ana-kapi .kp-aksam__hoca { font-size: 13px; line-height: 1.35; color: var(--kb-fil-2); }
.ana-kapi .kp-aksam__hoca a { color: inherit; text-decoration: none; }
.ana-kapi .kp-aksam__hoca a:hover { color: var(--kb-fil); text-decoration: underline; text-underline-offset: 3px; }
.ana-kapi .kp-aksam__ders-not { font-size: 12.5px; font-style: italic; color: var(--kb-fil-2); }
.ana-kapi .kp-aksam__grup {
  align-self: flex-start; margin-top: 4px; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
/* Durumlar (betik işaretler). */
.ana-kapi .kp-aksam__ders.is-gecti { opacity: .45; }
.ana-kapi .kp-aksam__ders.is-siradaki,
.ana-kapi .kp-aksam__ders.is-canli { box-shadow: inset 3px 0 0 var(--acik), 0 0 0 2px var(--kb-lamba-acik), 0 12px 30px -14px color-mix(in srgb, var(--kb-lamba) 70%, transparent); }
.ana-kapi .kp-aksam__ders.is-canli { box-shadow: inset 3px 0 0 var(--acik), 0 0 0 2px #7fe3b0, 0 0 28px -6px color-mix(in srgb, #3fd08a 60%, transparent); }
.ana-kapi .kp-aksam__ders.is-siradaki::after,
.ana-kapi .kp-aksam__ders.is-canli::after {
  content: "Sıradaki"; position: absolute; top: -9px; right: 10px; padding: 1px 8px; border-radius: 999px;
  background: var(--kb-lamba); color: #1c1000; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ana-kapi .kp-aksam__ders.is-canli::after { content: "Canlı"; background: #7fe3b0; color: #04311d; }

/* Şimdi çizgisi */
.ana-kapi .kp-aksam__simdi {
  position: absolute; z-index: 2; width: 2px; margin-left: -1px; pointer-events: none; border-radius: 2px;
  background: var(--kb-lamba-acik); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--kb-lamba) 80%, transparent);
}
.ana-kapi .kp-aksam__simdi[hidden] { display: none; }
.ana-kapi .kp-aksam__simdi span {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px;
  background: var(--kb-lamba-acik); color: #1c1000; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}

/* Renk anahtarı */
.ana-kapi .kp-aksam__anahtar { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--kb-hat); }
.ana-kapi .kp-aksam__anahtar li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kb-fil-2); }
.ana-kapi .kp-aksam__anahtar li::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--rol, var(--birincil));
}

/* --- Orta genişlik --- */
@media (max-width: 1040px) { .ana-kapi .kp-aksam { --gunkol: 112px; } .ana-kapi .kp-aksam__ders .kp-aksam__saat span { display: none; } }
@media (max-width: 1040px) and (min-width: 761px) {
  .ana-kapi .kp-aksam__siradaki { grid-template-columns: minmax(0, 1fr) auto; }
  .ana-kapi .kp-aksam__eylem { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* --- Liste düzeni: eksen 6 saatten uzunsa masaüstünde de; telefonda her zaman --- */
.ana-kapi .kp-aksam--liste .kp-aksam__eksen { display: none; }
.ana-kapi .kp-aksam--liste .kp-aksam__gunler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ana-kapi .kp-aksam--liste .kp-aksam__gun { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 0; background: rgba(243, 236, 223, .04); }
.ana-kapi .kp-aksam--liste .kp-aksam__gun-ad { padding: 0; }
.ana-kapi .kp-aksam--liste .kp-aksam__serit { display: flex; flex-direction: column; gap: 8px; background: none; }
.ana-kapi .kp-aksam--liste .kp-aksam__ders { margin: 0; }

@media (max-width: 760px) {
  .ana-kapi .kp-aksam__sahne { padding: 22px 16px 20px; border-radius: 22px; margin-inline: -4px; }
  .ana-kapi .kp-aksam__hilal { width: 40px; height: 40px; box-shadow: inset -8px 5px 0 0 var(--kb-lamba-acik); }
  .ana-kapi .kp-aksam__bas { padding-right: 44px; }
  .ana-kapi .kp-aksam__tumu { min-height: 40px; }
  .ana-kapi .kp-aksam__siradaki { grid-template-columns: 1fr; gap: 16px; padding: 18px 16px; margin-bottom: 16px; }
  .ana-kapi .kp-aksam__birim { min-width: 0; flex: 1 1 0; }
  .ana-kapi .kp-aksam__rakamlar { width: 100%; }
  .ana-kapi .kp-aksam__sayac { justify-items: stretch; }
  .ana-kapi .kp-aksam__birim b { font-size: 26px; }
  .ana-kapi .kp-aksam__eylem { flex-direction: row; }
  .ana-kapi .kp-aksam__eylem > * { flex: 1 1 0; padding: 0 12px; }
  .ana-kapi .kp-aksam__arac { gap: 10px; }
  .ana-kapi .kp-aksam__suzgec { width: 100%; }
  .ana-kapi .kp-aksam__suzgec button { flex: 1 1 0; padding: 0 8px; }
  .ana-kapi .kp-aksam__takvim { width: 100%; justify-content: center; margin: 0; }

  .ana-kapi .kp-aksam.is-sekmeli .kp-aksam__sekmeler:not([hidden]) {
    display: flex; gap: 6px; margin: 0 -16px 14px; padding: 2px 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .ana-kapi .kp-aksam__sekmeler::-webkit-scrollbar { display: none; }
  .ana-kapi .kp-aksam__sekmeler button {
    flex: 1 0 58px; display: grid; justify-items: center; gap: 1px; min-height: 56px; padding: 6px 8px; border: 0; border-radius: 14px;
    scroll-snap-align: start; cursor: pointer; font: inherit; color: var(--kb-fil-2);
    background: rgba(243, 236, 223, .05); box-shadow: inset 0 0 0 1px var(--kb-hat);
  }
  .ana-kapi .kp-aksam__sekmeler button[hidden] { display: none; }
  .ana-kapi .kp-aksam__sekmeler b { font-size: 15px; font-weight: 700; color: var(--kb-fil); }
  .ana-kapi .kp-aksam__sekmeler small { font-family: var(--yz-mono); font-size: 11px; }
  .ana-kapi .kp-aksam__sekmeler button[aria-pressed="true"] { background: var(--kb-fil); box-shadow: none; }
  .ana-kapi .kp-aksam__sekmeler button[aria-pressed="true"] b,
  .ana-kapi .kp-aksam__sekmeler button[aria-pressed="true"] small { color: var(--kb-gece); }

  .ana-kapi .kp-aksam__eksen, .ana-kapi .kp-aksam__simdi { display: none !important; }
  .ana-kapi .kp-aksam__gunler { display: grid; gap: 14px; }
  .ana-kapi .kp-aksam__gun { display: block; padding: 0; border: 0; background: none !important; }
  .ana-kapi .kp-aksam.is-sekmeli .kp-aksam__gun:not(.is-secili) { display: none; }
  .ana-kapi .kp-aksam.is-sekmeli .kp-aksam__gun-ad { display: none; }
  .ana-kapi .kp-aksam__gun-ad { flex-direction: row; align-items: baseline; gap: 10px; padding: 0 0 8px; }
  /* Dikey şerit: sol kenardaki çizgi alacakaranlıktan geceye koyulaşır. */
  .ana-kapi .kp-aksam__serit {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 18px; background: none;
  }
  .ana-kapi .kp-aksam__serit::before {
    content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, var(--kb-lamba), color-mix(in srgb, var(--birincil) 70%, var(--kb-fil-2)) 55%, rgba(243, 236, 223, .15));
  }
  .ana-kapi .kp-aksam__ders { margin: 0; padding: 12px 14px 13px 16px; }
  .ana-kapi .kp-aksam__ders::before {
    content: ""; position: absolute; left: -18px; top: 16px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--kb-gece); box-shadow: inset 0 0 0 2px var(--acik);
  }
  .ana-kapi .kp-aksam__ders .kp-aksam__saat span { display: inline; }
  .ana-kapi .kp-aksam__ders-ad { font-size: 16px; }
  .ana-kapi .kp-aksam__anahtar { gap: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ana-kapi .kp-aksam__siradaki.is-canli .kp-aksam__durum::before { animation: none; }
  .ana-kapi .kp-aksam__ders, .ana-kapi .kp-aksam__dugme { transition: none; }
  .ana-kapi .kp-aksam__ders:hover, .ana-kapi .kp-aksam__dugme:hover { transform: none; }
  .ana-kapi .kp-aksam__ilerleme i { transition: none; }
}

/* =====================================================================
 * Besmele (geçiş 165) — sayfanın ilk satırı. Hemen altındaki koyu sahneyle
 * aynı zeminde, altın harfle; iki yanında altın cetvel ve hâtem.
 * ===================================================================== */
.ana-kapi .kp-besmele {
  position: relative; padding-block: 18px 6px;
  /* Tam genişlik: .kp-serit ile aynı hile (anasayfa.css §TAM GENİŞLİK BANT). */
  margin: 0 calc(50% - 50vw); padding-inline: calc(50vw - 50%);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: var(--birincil-koyu); color: var(--vk-altin);
}
.ana-kapi .kp-besmele span {
  font-family: var(--vk-arap); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.6; font-weight: 400;
}
.ana-kapi .kp-besmele::before,
.ana-kapi .kp-besmele::after {
  content: ""; flex: 0 1 120px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vk-altin-ince));
}
.ana-kapi .kp-besmele::after { background: linear-gradient(90deg, var(--vk-altin-ince), transparent); }

/* Sesli Kitap bandı (anasayfa/bolum-sesli.php): stili css/sesli.css'te
   ("ANA SAYFA BANDI"), sesli kitap sayfalarıyla aynı dil — 25 Eylül 2026. */

/* =====================================================================
 * 25 EYLÜL 2026 — PANELLE AYNI GECE ZEMİNİ
 * Kullanıcı: "Panelimiz çok iyi oldu. Ana sayfamızı ve diğer sayfaları da
 * baştan gözden geçirip tasarımda bütünlük sağlayalım."
 * Koyu bantlar kurum yeşilinin düz tonundaydı; panel karşılaması, iç
 * sayfaların başlık bandı ve altbilgi gece zemininde (css/kurumsal.css
 * --kb-gece-zemin). Ana sayfanın koyu bantları da aynı zemine geçti:
 * yeşil artık zemin değil, gecenin içindeki ışıma.
 * ===================================================================== */
.ana-kapi .kp-serit--koyu { background: var(--kb-gece-zemin); }
/* Slaytın hemen altındaki rakam şeridi aynı gecenin devamı: ışıma yok,
   ince saç teliyle ayrılır (panel karşılamasının gösterge şeridi gibi). */
.ana-kapi .kp-serit--koyu + .kp-serit--rakam { background: color-mix(in srgb, var(--kb-gece) 88%, #000); border-top-color: var(--kb-hat); }
.ana-kapi .kp-rakam__govde b { font-family: var(--vk-serif); font-weight: 500; font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -.01em; }
.ana-kapi .kp-rakam__ikon { background: rgba(243, 236, 223, .06); box-shadow: inset 0 0 0 1px var(--kb-hat); }
/* İletişim şeridi ve program kutusu: düz yeşil blok yerine gece kartı. */
.ana-kapi .kp-iletisim { background: var(--kb-gece-zemin); }
/* Kapanış bandı altbilgiye yapışsın: arada kâğıt rengi şerit kalmasın. */
main.ana-kapi { padding-bottom: 0; }
/* Besmele şeridi gecenin kendisinde; altındaki sahneden ince bir saç teliyle
   ayrılır (sahnenin ışıması şeridin içine taşmasın, dikiş görünmesin). */
.ana-kapi .kp-besmele { background: var(--kb-gece); padding-block: 14px 12px; border-bottom: 1px solid var(--kb-hat); }

/* =====================================================================
 * 29 EYLÜL 2026 — AÇILIŞ SLAYTI TELEFONDA
 * Kullanıcı (telefon ekran görüntüsüyle): "Slider banner mobile uygun değil."
 * 412 px'te ölçülen: bölüm 780 px boyundaydı; kumanda üç satıra dağılıyordu
 * (noktalar, altında duraklat, en altta oklar); 430 px'lik madalyon ve
 * üstüne binen iki rakam kartı, hemen alttaki rakam şeridinin tekrarıydı;
 * slaytların boyu farklı olduğu için her geçişte sayfa zıplıyordu; besmele
 * iki satıra, künye satırı da iki satıra bölünüyordu.
 * ===================================================================== */
@media (max-width: 719px) {
  /* Besmele tek satır: yan cetveller kısalır, harf küçülür. */
  .ana-kapi .kp-besmele { gap: 10px; padding-block: 10px 8px; }
  .ana-kapi .kp-besmele span { font-size: 22px; line-height: 1.5; white-space: nowrap; }
  .ana-kapi .kp-besmele::before,
  .ana-kapi .kp-besmele::after { flex-basis: 44px; }

  .ana-kapi .kp-slider { padding-top: 28px; }
  .ana-kapi .kp-slayt { gap: 22px; }
  .ana-kapi .kp-slayt__etiket { font-size: 11.5px; letter-spacing: .12em; gap: 8px; margin-bottom: 12px; }
  .ana-kapi .kp-slayt__etiket::before { width: 10px; height: 10px; }
  .ana-kapi .kp-slayt__baslik { font-size: clamp(29px, 8.2vw, 36px); line-height: 1.12; }
  .ana-kapi .kp-slayt__alt { font-size: 16px; line-height: 1.6; margin-top: 12px; }
  .ana-kapi .kp-serit--koyu .kp-slayt__dugme { margin-top: 20px; min-height: 50px; }

  /* Görsel telefonda da büyük (5 Ekim 2026, kurum isteği: 250 → 320 px). */
  .ana-kapi .kp-slayt__gorsel { padding: 0; }
  .ana-kapi .kp-slayt__gorsel--daire img,
  .ana-kapi .kp-slayt__gorsel--kare img { max-width: min(320px, 78vw); }
  .ana-kapi .kp-slayt__gorsel--afis img { max-width: min(250px, 62vw); }
  .ana-kapi .kp-slayt__gorsel--daire .kp-sahne__halka { width: min(362px, 88vw); }
}

/* Tek sütunlu düzen 1023 px'e kadar sürüyor (anasayfa.css §23): sabit boy ve
   tek satır kumanda tablette de geçerli. 768 px'te ok, görselin üstündeki
   rakam kartına biniyordu. */
@media (max-width: 1023px) {
  /* Alt dolgu kumanda şeridine yer açar (en çok 52 px ok + 20 px kenar + 12 px nefes). */
  .ana-kapi .kp-slider { padding-bottom: 84px; }
  /* SABİT BOY: betik varken slaytlar aynı ızgara hücresine yığılır, gizli
     olanlar yer kaplamaya devam eder (görünmez); şerit en uzun slayt
     boyunda sabit kalır ve geçişte alttaki içerik zıplamaz. Betiksiz
     tarayıcıda ray eskisi gibi yatay kaydırılır (.kp-slider--js yok). */
  .ana-kapi .kp-slider--js .kp-slider__ray { display: grid; overflow: visible; }
  .ana-kapi .kp-slider--js .kp-slayt { grid-area: 1 / 1; align-content: start; }
  .ana-kapi .kp-slider--js .kp-slayt[hidden] { display: grid; visibility: hidden; }

  /* KUMANDA TEK SATIR, bölümün dibinde: ‹  • • •  ›
     Seçiciler `.kp-slider >` ile: `.kp-blok > :not(.kp-dekor)` konum kuralını
     ancak böyle ezer (anasayfa.css §8'deki not). */
  .ana-kapi .kp-slider > .kp-slider__ok { top: auto; bottom: 20px; }
  .ana-kapi .kp-slider > .kp-slider__ok--geri { left: 16px; }
  .ana-kapi .kp-slider > .kp-slider__ok--ileri { right: 16px; }
  .ana-kapi .kp-slider > .kp-slider__noktalar {
    position: absolute; z-index: 3; left: 50%; bottom: 33px; transform: translateX(-50%); margin: 0;
  }
}

/* =====================================================================
 * TELEFONDA KISA ANA SAYFA (29 Eylül 2026)
 *
 * 375 px'te sayfa 19.031 px idi (23 ekran). En uzun üç bölüm kartlarını tek
 * sütunda alt alta diziyordu: kurslar 3.885, hocalar 2.235, yol haritası
 * 1.334 px. 640 px altında üçü de YATAY RAYA döner (sözler bölümündeki
 * .kp-kaydir diliyle aynı): kart ekranın %80'i, bir sonrakinin ucu görünür,
 * parmakla kayar, scroll-snap ile oturur. İçerik kaybolmaz, yalnız yön değişir.
 *
 * Ray içerik hizasında durur, sayfa kenarına TAŞMAZ: taşırıldığında
 * scroll-padding yüzdesi rayın kendi genişliğine göre hesaplanıyor ve ilk
 * kart ekranın soluna yapışıyordu; iç içe kaplardan gelen kenar boşluğu
 * CSS'te tek bir değişkene bağlanamıyor.
 * Kaydırma çubuğu ince ve görünür kalır: betik yokken kaydırılabildiğinin
 * işaretlerinden biri (bkz. §15 .kp-kaydir).
 * ===================================================================== */
@media (max-width: 639px) {
  .ana-kapi :is(.kp-kurslar, .kp-hocalar) .kp-dizi,
  .ana-kapi .dizin {
    display: flex; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 16px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--murekkep) 24%, transparent) transparent;
  }
  .ana-kapi :is(.kp-kurslar, .kp-hocalar) .kp-dizi > li {
    flex: 0 0 80%; min-width: 0; scroll-snap-align: start; display: flex;
  }
  .ana-kapi :is(.kp-kurslar, .kp-hocalar) .kp-dizi > li > * { width: 100%; }

  /* Yol haritası: tek çerçeveli liste beş ayrı adım kartına ayrılır. */
  .ana-kapi .dizin {
    background: none; border: 0; border-radius: 0; box-shadow: none; overflow-y: hidden;
  }
  .ana-kapi .dizin .dizin-satir {
    flex: 0 0 80%; min-width: 0; scroll-snap-align: start;
    display: flex; flex-direction: column;
    border: 1px solid var(--cizgi); border-radius: 14px; background: var(--yuzey);
  }
  .ana-kapi .dizin .dizin-satir p { flex: 1; margin-bottom: 12px; }

  /* Tanıtımın ikinci, uzun paragrafı (üniversitenin kuruluşu, lisans
     süreçleri) telefonda ~350 px tutuyordu. Özet cümle başlığın altında
     kalır, ayrıntı bir dokunuş ötede: "Hakkımızda" düğmesi. */
  .ana-kapi .kp-tanitim__metin { display: none; }

  /* OKULLAR: ana giriş kapısı olduğu için raya dönmez, sekiz okul ilk
     bakışta görünür kalır. Kartlar (anasayfa.css §10) telefonda iki
     sütun ve kısa şeritli; açıklama cümlesi gizli (başlık ve "Hepsini gör" yeter). */
  .ana-kapi .kp-okullar .kp-bas__alt { display: none; }
  .ana-kapi .kp-okullar .kp-okul-grup + .kp-okul-grup { margin-top: 22px; }

  /* Bölüm nefesi telefonda biraz daralır: 16 bölüm × iki kenar. */
  .ana-kapi { --kp-nefes-orta: 40px; --kp-nefes-genis: 56px; }
}

/* ---------- Rakam şeridi tek satırda (30 Eylül 2026) ----------
   Kullanıcı: "bu altta yazan istatistikleri mobilde tek satıra al". Şerit
   telefonda 2 sütunlu ızgaraya dökülüyor, beş sayı üç satır (~700 px)
   tutuyordu; 5. sayı da tek başına kalıyordu. Artık her genişlikte tek satır:
   sayı kadar eşit sütun (sayaç sayısı veriden, 4 ya da 5 olabilir). Tablet
   genişliğinde simge kalır; telefonda simge düşer, sayı ile etiket alt alta
   ortalanır, sütunları altın saç teli ayırır. */
@media (max-width: 1119px) {
  .ana-kapi .kp-rakamlar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  /* Tablette beş hücre ~142 px: simge ve boşluklar daralır ki "2.142 ünite" sığsın. */
  .ana-kapi .kp-rakam { gap: 10px; padding-inline: 12px; }
  .ana-kapi .kp-rakam:first-child { padding-left: 0; }
  .ana-kapi .kp-rakam__ikon { width: 36px; height: 36px; }
  .ana-kapi .kp-rakam__ikon svg { width: 19px; height: 19px; }
}
@media (max-width: 719px) {
  .ana-kapi .kp-rakam,
  .ana-kapi .kp-rakam + .kp-rakam {
    flex-direction: column; justify-content: flex-start; gap: 0; min-width: 0;
    margin-top: 0; padding: 2px 4px; text-align: center;
    border-top: 0; border-left: 1px solid var(--vk-altin-ince);
  }
  .ana-kapi .kp-rakam:first-child { border-left: 0; }
  .ana-kapi .kp-rakam__ikon { display: none; }
  .ana-kapi .kp-rakam__govde { min-width: 0; }
  .ana-kapi .kp-rakam__govde b { font-size: clamp(17px, 5.4vw, 23px); letter-spacing: -.02em; white-space: nowrap; }
  .ana-kapi .kp-rakam__govde > span { margin-top: 2px; font-size: 11.5px; letter-spacing: .02em; }
}