/* =====================================================================
 * css/tema-varyant.css — tema varyantları (Faz 2, 22.10.2026; tema_lib.php).
 *
 * Yalnız ana sayfada ve yalnız varsayılan dışı bir varyant seçilince yüklenir
 * (tema_varyant_css_gerek); eski yapıda sayfa bu dosyayı hiç görmez.
 * Ham hex yok: renk token'dan. Seçiciler anasayfa.css'teki koyu bant
 * kurallarından bir sınıf fazla taşır ki onları ezsin.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * AÇILIŞ · AÇIK ZEMİN (tm-acilis--acik) ve ORTALI SADE (tm-acilis--sade)
 * Açılış kabı ve içindeki rakam şeridi koyu bant olarak basılır; burada
 * zemin açılır, beyaz yazan her şey mürekkebe döner. Kontrast: mürekkep
 * birincil-açık zeminde 14,5-16,4 (yedi tema).
 * ------------------------------------------------------------------- */
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade){
  background:linear-gradient(180deg, var(--birincil-acik) 0%, var(--zemin) 100%);
  color:var(--murekkep);border-bottom:1px solid var(--cizgi)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade)::after{content:none}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) :focus-visible{outline-color:var(--birincil)}

.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade)
  :is(.hero-zincir, .hero h1, .hero-giris, .kp-slayt__etiket, .kp-slayt__baslik, .kp-slayt__alt,
      .kp-rakam b, .kp-rakam__govde > span, .kp-bas__baslik, .kp-bas__alt){color:var(--murekkep)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) :is(.hero-zincir, .kp-slayt__etiket){color:var(--birincil)}

/* Cam yüzeyler (arama kutusu, oklar, rakam ikonu) koyu zeminde beyazın %10'uydu; açıkta yüzey olur. */
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-ara{
  background:var(--yuzey);border-color:var(--cizgi);box-shadow:var(--kp-golge)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-ara input{color:var(--murekkep)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-ara input::placeholder{color:var(--murekkep-2)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-ara:focus-within{border-color:var(--birincil)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-ara button{color:var(--birincil);border-left-color:var(--cizgi)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-ara button:hover{background:var(--birincil);color:var(--yuzey)}

.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .hero-eylem .btn.sec{
  color:var(--birincil);border-color:var(--birincil);background:transparent}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-slayt__dugme{
  background:var(--birincil);border-color:var(--birincil);color:var(--yuzey)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-slayt__dugme:hover{
  background:var(--birincil-koyu);border-color:var(--birincil-koyu);color:var(--yuzey)}

.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-slider > .kp-slider__ok{
  background:var(--yuzey);border-color:var(--cizgi);color:var(--murekkep);box-shadow:var(--kp-golge)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-slider > .kp-slider__ok:hover{
  background:var(--birincil);border-color:var(--birincil);color:var(--yuzey)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-slider__nokta::before{
  background:color-mix(in srgb, var(--murekkep) 28%, transparent)}

.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-rakam{border-left-color:var(--cizgi)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-rakam + .kp-rakam{border-top-color:var(--cizgi)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-rakam__ikon{
  background:var(--yuzey);color:var(--birincil);box-shadow:var(--kp-golge)}
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) .kp-serit--rakam{border-top:1px solid var(--cizgi)}

/* Hero'nun yan süsleri (halka, eğik şerit) koyu sahnenin parçası; açıkta yok. */
.ana-kapi .kp-acilis:is(.tm-acilis--acik, .tm-acilis--sade) :is(.kp-sahne__halka, .kp-sahne__serit){display:none}

/* ---------------------------------------------------------------------
 * AÇILIŞ · ORTALI SADE: tek sütun, görsel ve yan kart yok.
 * ------------------------------------------------------------------- */
.ana-kapi .tm-acilis--sade .kp-sahne .hero{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.ana-kapi .tm-acilis--sade .hero-yan,
.ana-kapi .tm-acilis--sade .kp-slayt__gorsel{display:none}
.ana-kapi .tm-acilis--sade :is(.hero h1, .hero-giris, .kp-slayt__baslik, .kp-slayt__alt){margin-inline:auto}
.ana-kapi .tm-acilis--sade .hero h1{max-width:22ch}
.ana-kapi .tm-acilis--sade .kp-ara{margin-inline:auto;max-width:560px}
.ana-kapi .tm-acilis--sade .hero-eylem{justify-content:center}
.ana-kapi .tm-acilis--sade .kp-slayt{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.ana-kapi .tm-acilis--sade .kp-slayt__metin{max-width:44rem}

/* ---------------------------------------------------------------------
 * KURSLAR · YATAY KARTLAR (tm-v-liste): görsel solda, metin ve düğme
 * sağda; masaüstünde iki sütun, telefonda (560 px altı) dikey karta döner.
 * ------------------------------------------------------------------- */
.ana-kapi .kp-kurslar.tm-v-liste .kp-dizi--4{grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr))}
@media (min-width:1120px){ .ana-kapi .kp-kurslar.tm-v-liste .kp-dizi--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:560px){
  .ana-kapi .kp-kurslar.tm-v-liste .kp-kart{display:grid;grid-template-columns:minmax(150px,40%) minmax(0,1fr);
    grid-template-rows:1fr auto;column-gap:18px}
  .ana-kapi .kp-kurslar.tm-v-liste .kp-kart__kapak{grid-row:1 / span 2;align-self:stretch}
  .ana-kapi .kp-kurslar.tm-v-liste .kp-kart__kapak img,
  .ana-kapi .kp-kurslar.tm-v-liste .kp-kart__kapak--bos{height:100%;aspect-ratio:auto;min-height:150px}
  .ana-kapi .kp-kurslar.tm-v-liste .kp-kart__govde{padding-top:6px}
  .ana-kapi .kp-kurslar.tm-v-liste .kp-kurs__ad{min-height:0}
  .ana-kapi .kp-kurslar.tm-v-liste .kp-kart__alt{padding-bottom:4px}
}

/* ---------------------------------------------------------------------
 * ÖĞRETMENLER · SADE LİSTE (tm-v-liste): küçük kare fotoğraf solda, ad ve
 * unvan sağda; fotoğrafsızda özet. Yuvarlak çerçeve yok (tasarım kuralı).
 * ------------------------------------------------------------------- */
.ana-kapi .kp-hocalar.tm-v-liste .kp-dizi--4{--kp-dizi-min:300px;gap:12px}
@media (min-width:1120px){ .ana-kapi .kp-hocalar.tm-v-liste .kp-dizi--4{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ana-kapi .kp-hocalar.tm-v-liste .kp-kart{display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"foto bilgi" "foto kunye";align-items:center;column-gap:14px;text-align:left;padding:10px}
.ana-kapi .kp-hocalar.tm-v-liste .kp-hoca__bilgi{grid-area:bilgi}
.ana-kapi .kp-hocalar.tm-v-liste .kp-hoca__foto{grid-area:foto;width:72px;margin:0;border-radius:var(--kp-r-ic)}
.ana-kapi .kp-hocalar.tm-v-liste .kp-hoca__foto img{aspect-ratio:1;border-radius:var(--kp-r-ic)}
.ana-kapi .kp-hocalar.tm-v-liste .kp-hoca__ozet{grid-column:1 / -1;margin:6px 0 0;text-align:left}
.ana-kapi .kp-hocalar.tm-v-liste .kp-hoca--fotosuz .kp-kart{grid-template-columns:minmax(0,1fr);grid-template-areas:"bilgi" "kunye"}
.ana-kapi .kp-hocalar.tm-v-liste .kp-hoca__kunye{grid-area:kunye;margin:2px 0 0}


/* Telefonda liste varyantları alt alta (program.css 639 px altında kurs ve öğretmen
   ızgarasını yatay kaydırılan şeride çeviriyor; liste görünümünde istenmez). */
@media (max-width:639px){
  .ana-kapi :is(.kp-kurslar, .kp-hocalar).tm-v-liste .kp-dizi{display:grid;overflow:visible;scroll-snap-type:none;padding:0}
  .ana-kapi :is(.kp-kurslar, .kp-hocalar).tm-v-liste .kp-dizi > li{flex:none}
}