/* ==========================================================================
   CSKEDPEDIA — cskedpedia.css
   Çatı sayfası (sitenin ana sayfası).
   Bu sayfa aydınlık: marka kılavuzu CSKEDPEDIA için lacivert–turkuaz–beyaz diyor.
   base.css'teki koyu değerleri burada eziyoruz.
   ========================================================================== */

:root{
  --bg:            #FFFFFF;
  --bg-grad:       radial-gradient(120% 70% at 50% -12%, #F0FAFB 0%, #FFFFFF 55%);
  --panel:         #F7F9FB;
  --panel-solid:   #F2F6F8;
  --ink:           #0C1730;
  --ink-2:         #56637E;
  --ink-3:         #8894AB;
  --line:          #E2E8EF;
  --line-soft:     #EEF2F6;
  --vurgu:         var(--turkuaz);
  --vurgu-dim:     rgba(0,152,162,.12);
}

.cati{ max-width: 660px; margin: 0 auto; padding: 0 22px calc(64px + var(--safe-b)) }

/* --- üst --- */
.cati-giris{ padding: calc(58px + var(--safe-t)) 0 0; text-align: center }
.cati-giris .marka{ font-size: clamp(28px, 7.6vw, 44px) }
.slogan{
  font-family: var(--font-marka); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 16px 0 0;
}
.cati-giris h1{
  font-family: var(--font-marka); font-weight: 300;
  font-size: clamp(28px, 6.4vw, 40px); line-height: 1.15;
  margin: 30px 0 0; letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.cati-giris h1 em{ font-style: normal; color: var(--turkuaz); font-weight: 500 }
.cati-giris .ozet{
  font-size: 14.5px; line-height: 1.72; color: var(--ink-2);
  margin: 18px auto 0; max-width: 46ch; text-wrap: balance;
}
.ayrac{ height: 1px; background: var(--line); margin: 48px 0 }

/* --- bölüm başlığı --- */
.bolum-baslik{
  font-family: var(--font-marka);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--turkuaz); font-weight: 700; margin: 0 0 8px;
}
.bolum-ozet{ font-size: 13.5px; color: var(--ink-2); margin: 0 0 22px; line-height: 1.7 }

/* --- marka kartları --- */
.markalar{ display: flex; flex-direction: column; gap: 10px }
.mk{
  display: flex; align-items: flex-start; gap: 15px;
  padding: 18px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .18s, transform .18s;
}
a.mk:hover{ border-color: var(--turkuaz); transform: translateY(-1px) }
.mk .marka-nokta{
  flex: 0 0 10px; width: 10px; height: 10px; border-radius: 3px; margin-top: 6px;
}
.mk .icerik{ flex: 1; min-width: 0 }
.mk .ad{
  font-family: var(--font-marka); font-size: 15px; font-weight: 600;
  letter-spacing: .04em; display: block; color: var(--ink);
}
.mk .rol{ font-size: 11px; color: var(--ink-3); margin: 2px 0 0; font-weight: 600 }
.mk p{ margin: 8px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2) }
.rozet{
  display: inline-block; margin-top: 11px;
  font-family: var(--font-marka);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 4px 9px; border-radius: 6px;
  background: #EAEFF4; color: var(--ink-3);
}
.rozet.simdi{ background: var(--turkuaz); color: #FFFFFF }
.mk .git{
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--turkuaz);
}

/* --- hizmet kutusu (hayat kitabı) --- */
.hizmet{
  padding: 22px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(160deg, #F3FAFB 0%, #FFFFFF 70%);
}
.hizmet h3{
  font-family: var(--font-baslik); font-weight: 400; font-size: 26px;
  margin: 0 0 8px; letter-spacing: -.01em; color: var(--ink);
}
.hizmet p{ margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-2) }
.hizmet .rozet{ margin: 14px 0 0 }

/* --- sınıflar --- */
.siniflar{ display: grid; gap: 10px }
@media (min-width: 560px){ .siniflar{ grid-template-columns: repeat(3, 1fr) } }
.sinif{ padding: 17px; border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--line) }
.sinif b{
  font-family: var(--font-marka); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; display: block; color: var(--lacivert);
}
.sinif p{ margin: 8px 0 0; font-size: 12px; line-height: 1.65; color: var(--ink-2) }

/* --- ilke --- */
.ilke{
  margin-top: 14px; padding: 28px 24px; border-radius: 20px; text-align: center;
  background: var(--lacivert); color: #E9EEF8;
}
.ilke p{
  margin: 0; font-family: var(--font-baslik); font-style: italic;
  font-size: 20px; line-height: 1.5; text-wrap: balance;
}
.ilke small{
  display: block; margin-top: 16px; font-family: var(--font-marka);
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #7F92B0;
}

/* --- alt --- */
.cati-alt{
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line);
  text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.8;
}
.cati-alt .marka{ font-size: 13px }