/* ============================================================
   TAoA tasarım sistemi — tema değişkenleri temalar/<tema>.css'te
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-govde, "Avenir Next", Avenir, "Segoe UI", Inter, system-ui, -apple-system, sans-serif);
  background: var(--zemin);
  color: var(--metin);
  line-height: 1.65;
  font-size: calc(16.5px * var(--yazi-olcek, 1));
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--baglanti); text-decoration: none; }
a:hover { color: var(--vurgu); }
h1, h2, h3, h4 { font-family: var(--font-baslik, inherit); line-height: 1.25; color: var(--baslik); font-weight: 700; margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
::selection { background: var(--vurgu); color: var(--zemin); }

.kap { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }
.kap-dar { max-width: 820px; margin: 0 auto; padding: 0 1.25rem; }

/* --- Sektör aksanları ------------------------------------- */
[data-sektor="akademi"] { --sektor: var(--akademi); --sektor-yum: color-mix(in srgb, var(--akademi) 14%, transparent); }
[data-sektor="saglik"]  { --sektor: var(--saglik);  --sektor-yum: color-mix(in srgb, var(--saglik) 14%, transparent); }
[data-sektor="bilisim"] { --sektor: var(--bilisim); --sektor-yum: color-mix(in srgb, var(--bilisim) 14%, transparent); }
:root, [data-sektor=""] { --sektor: var(--vurgu); --sektor-yum: color-mix(in srgb, var(--vurgu) 12%, transparent); }

/* --- Duyuru şeridi (tüm sayfalar) --------------------------- */
.duyuru-serit { background: linear-gradient(90deg, var(--vurgu), color-mix(in srgb, var(--vurgu) 70%, var(--zemin))); color: var(--dugme-metin); font-size: .9rem; }
.serit-ic { display: flex; align-items: center; gap: .8rem; padding-top: .5rem; padding-bottom: .5rem; flex-wrap: wrap; }
.serit-rozet { background: color-mix(in srgb, var(--dugme-metin) 18%, transparent); border: 1px solid color-mix(in srgb, var(--dugme-metin) 35%, transparent); border-radius: 99px; padding: .1rem .6rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; flex-shrink: 0; }
.serit-metin { flex: 1; min-width: 200px; }
.serit-baglanti { color: var(--dugme-metin); font-weight: 800; text-decoration: underline; flex-shrink: 0; }
.serit-baglanti:hover { color: var(--dugme-metin); opacity: .8; }
.serit-kapat { background: none; border: none; color: var(--dugme-metin); cursor: pointer; font-size: 1rem; padding: .2rem .4rem; opacity: .7; flex-shrink: 0; }
.serit-kapat:hover { opacity: 1; }

/* --- Duyuru panosu (anasayfa vitrin) -------------------------- */
.duyuru-pano {
  border: 1px solid color-mix(in srgb, var(--vurgu) 55%, var(--cizgi));
  background: linear-gradient(115deg, color-mix(in srgb, var(--vurgu) 14%, var(--zemin-2)), var(--zemin-2) 55%);
  border-radius: 18px; padding: 2rem; margin-bottom: 1.2rem;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--vurgu) 10%, transparent);
}
.duyuru-pano.gorselli { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.8rem; align-items: center; }
@media (max-width: 820px) { .duyuru-pano.gorselli { grid-template-columns: 1fr; } }
.pano-gorsel img { border-radius: 12px; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.pano-rozet { display: inline-flex; align-items: center; gap: .45rem; background: var(--vurgu); color: var(--dugme-metin); border-radius: 99px; padding: .28rem .85rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; }
.canli-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--dugme-metin); animation: canli-atim 1.6s ease-in-out infinite; }
@keyframes canli-atim { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.duyuru-pano h2 { margin-bottom: .5rem; }
.duyuru-pano p { color: var(--metin-soluk); max-width: 46rem; }

/* --- Üst menü ---------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--zemin) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; gap: 1.2rem; min-height: 68px; }
.marka { display: flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.25rem; color: var(--baslik); letter-spacing: .02em; flex-shrink: 0; }
.marka img { height: 40px; width: auto; }
.marka small { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .14em; color: var(--metin-soluk); text-transform: uppercase; white-space: nowrap; }
.menu { display: flex; gap: .1rem; margin-left: auto; align-items: center; flex-wrap: nowrap; }
.menu a { padding: .4rem .6rem; border-radius: 8px; color: var(--metin); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.menu a:hover { background: var(--zemin-2); color: var(--baslik); }
.menu a.etkin { color: var(--vurgu); }
.menu a.akademi.etkin { color: var(--akademi); }
.menu a.saglik.etkin  { color: var(--saglik); }
.menu a.bilisim.etkin { color: var(--bilisim); }
.menu .ayrik { border: 1px solid var(--cizgi); }
.rozet-sepet { background: var(--vurgu); color: var(--zemin); border-radius: 99px; font-size: .72rem; padding: 0 .45rem; margin-left: .3rem; font-weight: 800; }
.menu-dugme { display: none; margin-left: auto; background: none; border: 1px solid var(--cizgi); color: var(--baslik); border-radius: 8px; padding: .45rem .7rem; font-size: 1.05rem; cursor: pointer; }

@media (max-width: 1200px) {
  .menu-dugme { display: block; }
  .menu { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 1rem; }
  .menu.acik { display: flex; }
  .menu a { font-size: .95rem; padding: .55rem .8rem; }
  .ust-ic { flex-wrap: wrap; }
}

/* --- Kahraman (hero) --------------------------------------- */
.kahraman { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem); position: relative; overflow: hidden; }
.kahraman::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60rem 30rem at 85% -20%, color-mix(in srgb, var(--bilisim) 14%, transparent), transparent 60%),
    radial-gradient(50rem 26rem at -10% 110%, color-mix(in srgb, var(--saglik) 12%, transparent), transparent 60%),
    radial-gradient(40rem 22rem at 50% 130%, color-mix(in srgb, var(--akademi) 10%, transparent), transparent 60%);
  pointer-events: none;
}
.kahraman .kap { position: relative; }
.ust-baslik { font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sektor, var(--vurgu)); margin-bottom: 1rem; }
.kahraman p.genis { max-width: 46rem; font-size: 1.12rem; color: var(--metin-soluk); }

/* --- Hero logo kompozisyonu ---------------------------------- */
.hero-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .hero-izgara { grid-template-columns: 1fr; } .hero-logo { display: none; } }
.hero-logo {
  position: relative; justify-self: center;
  width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform .25s ease-out;
}
.hero-logo img {
  position: relative; z-index: 3; max-height: 230px; width: auto;
  filter: drop-shadow(0 14px 26px color-mix(in srgb, #5fd39a 24%, transparent))
          drop-shadow(0 0 16px rgba(255,255,255,.22));
  animation: logo-suzul 5.5s ease-in-out infinite;
}
/* İlahi hâle: beyaz çekirdek → açık yeşil → şeffaf (altın-sarı boğuculuğu kaldırıldı) */
.hero-logo .aura {
  position: absolute; inset: 8%; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle,
    rgba(255,255,255,.42),
    color-mix(in srgb, #7ce8b0 30%, transparent) 42%,
    color-mix(in srgb, #b9f5d6 12%, transparent) 60%,
    transparent 72%);
  animation: aura-nefes 5.5s ease-in-out infinite;
}
.hero-logo svg.meridyen {
  position: absolute; inset: -14%; width: 128%; height: 128%; z-index: 2; pointer-events: none;
  overflow: visible;
}
/* --- Dönen çemberler (ilk kompozisyon) --- */
.hero-logo .halka { position: absolute; border-radius: 50%; z-index: 2; pointer-events: none; }
.hero-logo .halka-1 {
  inset: 0;
  border: 1.5px solid transparent;
  background: conic-gradient(from 0deg, var(--akademi), transparent 30%, var(--saglik) 50%, transparent 70%, var(--bilisim) 90%, var(--akademi)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: halka-don 26s linear infinite;
  opacity: .8;
}
.hero-logo .halka-2 {
  inset: 9%;
  border: 1px dashed color-mix(in srgb, var(--vurgu) 45%, transparent);
  animation: halka-don 40s linear infinite reverse;
}

/* --- Çember harfleri: dışta ا ل م ر, içte ب --- */
.hero-logo svg.harfler {
  position: absolute; inset: -13%; width: 126%; height: 126%; z-index: 2; pointer-events: none;
  overflow: visible;
}

/* --- Menzil halkası: 28 konak, üç parlaklık katmanı (Kronos hesabıyla) --- */
.menzil-h {
  font-size: 16px;
  font-family: "Geeza Pro", "Segoe UI", "Noto Naskh Arabic", "Traditional Arabic", serif;
  fill: var(--metin-soluk);
  opacity: .28;                                   /* sabit gök takvimi: çok soluk */
}
.menzil-h.menzil-hafta { opacity: .62; fill: var(--metin); }   /* bu haftanın yolu */
.menzil-h.menzil-gun {                                          /* şu anki menzil */
  opacity: 1; fill: var(--vurgu); font-size: 24px; font-weight: 700;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vurgu) 75%, transparent));
}
/* Günün harfi — ب'nin tam karşısında, altın */
.harf-gun {
  font-size: 38px;
  fill: var(--vurgu);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vurgu) 70%, transparent));
}
.harf {
  font-size: 34px;
  font-family: "Geeza Pro", "Segoe UI", "Noto Naskh Arabic", "Traditional Arabic", serif;
  fill: var(--vurgu);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--vurgu) 55%, transparent));
}
.harf-dis, .harf-ic { transform-origin: 320px 320px; }
.harf-dis { animation: halka-don 26s linear infinite; }          /* dış halkayla aynı ritim */
.harf-ic  { animation: halka-don 40s linear infinite reverse; }  /* iç halkayla aynı ritim  */
.harf-be {
  font-size: 40px;
  fill: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 1.5px rgba(20,30,50,.5));
}
@keyframes halka-don { to { rotate: 360deg; } }
@keyframes logo-suzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes aura-nefes { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-logo img, .hero-logo .aura, .hero-logo .halka, .harf-dis, .harf-ic { animation: none; }
}

/* --- Kartlar ------------------------------------------------ */
.izgara { display: grid; gap: 1.4rem; }
.izgara.s2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.izgara.s3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.izgara.s4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.kart {
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform .18s ease, border-color .18s ease;
}
.kart:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sektor, var(--vurgu)) 45%, var(--cizgi)); }
.kart h3 a { color: var(--baslik); }
.kart .ipucu { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sektor, var(--vurgu)); margin-bottom: .5rem; }
.kart p { color: var(--metin-soluk); font-size: .95rem; margin-bottom: .4rem; }

.sektor-kapi { position: relative; overflow: hidden; padding-top: 1.8rem; }
.sektor-kapi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--sektor); }
.sektor-kapi .buyuk-ikon { font-size: 1.9rem; margin-bottom: .8rem; }

/* --- Bölümler ------------------------------------------------ */
.bolum { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.bolum.dolgulu { background: var(--zemin-2); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.bolum-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.bolum-baslik .tumu { font-size: .9rem; font-weight: 700; }

/* --- Düğmeler ------------------------------------------------ */
.dugme {
  display: inline-block; padding: .65rem 1.4rem; border-radius: 10px;
  background: var(--sektor, var(--vurgu)); color: var(--dugme-metin);
  font-weight: 700; font-size: .95rem; border: none; cursor: pointer;
  transition: filter .15s ease;
}
.dugme:hover { filter: brightness(1.12); color: var(--dugme-metin); }
.dugme.dis { background: transparent; color: var(--baslik); border: 1.5px solid var(--cizgi); }
.dugme.dis:hover { border-color: var(--sektor, var(--vurgu)); color: var(--sektor, var(--vurgu)); }
.dugme.kucuk { padding: .4rem .9rem; font-size: .85rem; }

/* --- Formlar -------------------------------------------------- */
.form-alan { margin-bottom: 1.1rem; }
.form-alan label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--baslik); }
.form-alan input[type=text], .form-alan input[type=email], .form-alan input[type=password],
.form-alan input[type=tel], .form-alan input[type=number], .form-alan select, .form-alan textarea {
  width: 100%; padding: .65rem .85rem; border-radius: 10px;
  border: 1.5px solid var(--cizgi); background: var(--zemin);
  color: var(--metin); font: inherit; font-size: .95rem;
}
.form-alan input:focus, .form-alan textarea:focus, .form-alan select:focus {
  outline: none; border-color: var(--sektor, var(--vurgu));
}
.form-alan textarea { min-height: 130px; resize: vertical; }
.onay-satir { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--metin-soluk); }
.onay-satir input { margin-top: .3rem; }

/* --- Bildirimler ---------------------------------------------- */
.bildirim { padding: .9rem 1.2rem; border-radius: 10px; margin: 1rem 0; font-weight: 600; font-size: .95rem; border: 1px solid; }
.bildirim.tamam { background: color-mix(in srgb, #16a34a 12%, transparent); border-color: #16a34a; color: var(--baslik); }
.bildirim.hata  { background: color-mix(in srgb, #dc2626 12%, transparent); border-color: #dc2626; color: var(--baslik); }
.bildirim.bilgi { background: color-mix(in srgb, #2563eb 12%, transparent); border-color: #2563eb; color: var(--baslik); }

/* --- Tablolar --------------------------------------------------- */
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 12px; }
table.veri { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.veri th { text-align: left; padding: .8rem 1rem; background: var(--zemin-2); color: var(--baslik); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
table.veri td { padding: .75rem 1rem; border-top: 1px solid var(--cizgi); color: var(--metin); }
table.veri tr:hover td { background: color-mix(in srgb, var(--zemin-2) 60%, transparent); }

/* --- İçerik gövdesi (zengin metin) ------------------------------- */
.icerik-govde { color: var(--metin); }
.icerik-govde h2, .icerik-govde h3 { margin-top: 1.6em; }
.icerik-govde ul, .icerik-govde ol { padding-left: 1.4rem; color: var(--metin); }
.icerik-govde li { margin-bottom: .35rem; }
.icerik-govde img { border-radius: 12px; margin: 1rem 0; }
.icerik-govde blockquote { border-left: 3px solid var(--vurgu); margin: 1.2rem 0; padding: .3rem 1.2rem; color: var(--metin-soluk); }
.icerik-govde table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.icerik-govde td, .icerik-govde th { border: 1px solid var(--cizgi); padding: .5rem .8rem; }

/* --- Fiyat paketleri ---------------------------------------------- */
.paket { display: flex; flex-direction: column; }
.paket .fiyat { font-size: 1.5rem; font-weight: 800; color: var(--sektor, var(--vurgu)); margin: .4rem 0 1rem; }
.paket ul { list-style: none; padding: 0; margin: 0 0 1.2rem; flex: 1; }
.paket li { padding: .38rem 0 .38rem 1.5rem; position: relative; font-size: .92rem; color: var(--metin-soluk); border-bottom: 1px dashed var(--cizgi); }
.paket li::before { content: "✓"; position: absolute; left: 0; color: var(--sektor, var(--vurgu)); font-weight: 800; }
.paket.one-cikan { border-color: var(--sektor, var(--vurgu)); box-shadow: 0 0 0 1px var(--sektor, var(--vurgu)); }
.paket .etiket { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--sektor-yum); color: var(--sektor, var(--vurgu)); border-radius: 99px; padding: .25rem .7rem; margin-bottom: .6rem; }

/* --- Mağaza --------------------------------------------------------- */
.urun-kart img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; margin-bottom: .9rem; background: var(--zemin-3); }
.urun-kart .fiyat { font-weight: 800; color: var(--vurgu); font-size: 1.1rem; }
.adet-kutu { width: 70px !important; text-align: center; }

/* --- SaaS uygulama kartları ---------------------------------------------- */
.uygulama-kart { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.6rem; align-items: center; border-left: 4px solid var(--sektor, var(--vurgu)); }
.uygulama-kart:not(:has(.uygulama-gorsel)) { grid-template-columns: 1fr; }
@media (max-width: 820px) { .uygulama-kart { grid-template-columns: 1fr; } }
.uygulama-gorsel img { border-radius: 10px; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.uygulama-ozellikler { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: .35rem .9rem; }
.uygulama-ozellikler li { position: relative; padding-left: 1.3rem; font-size: .88rem; color: var(--metin-soluk); }
.uygulama-ozellikler li::before { content: "▸"; position: absolute; left: 0; color: var(--sektor, var(--vurgu)); }

/* --- Kadro ------------------------------------------------------------ */
.kadro-kart .bas-harf {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--sektor-yum); color: var(--sektor, var(--vurgu)); font-weight: 800; font-size: 1.3rem; margin-bottom: .9rem;
}
.kadro-kart img.foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: .9rem; }
.kadro-kart .unvan { font-size: .85rem; color: var(--sektor, var(--vurgu)); font-weight: 700; margin-bottom: .6rem; }
.kadro-kart details { font-size: .9rem; color: var(--metin-soluk); }
.kadro-kart summary { cursor: pointer; font-weight: 600; color: var(--baglanti); }

/* --- Alt bilgi ---------------------------------------------------------- */
.alt { border-top: 1px solid var(--cizgi); margin-top: 3rem; padding: 2.5rem 0 2rem; background: var(--zemin-2); font-size: .9rem; }
.alt .izgara { gap: 2rem; }
.alt h4 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-soluk); }
.alt a { display: block; padding: .18rem 0; color: var(--metin); }
.alt a:hover { color: var(--vurgu); }
.alt .imza { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--cizgi); color: var(--metin-soluk); font-size: .82rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* --- Rakamlar bandı ---------------------------------------------------- */
.rakamlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; }
.rakam { background: var(--zemin-2); padding: 1.4rem 1.2rem; text-align: center; }
.rakam .deger { font-size: 2rem; font-weight: 800; color: var(--vurgu); letter-spacing: -.02em; }
.rakam .ad { font-size: .82rem; color: var(--metin-soluk); font-weight: 600; margin-top: .2rem; }

/* --- Detay sayfası: içerik + yapışkan yan kutu ---------------------------- */
.detay-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; align-items: start; }
@media (max-width: 980px) { .detay-izgara { grid-template-columns: 1fr; } }
.yan-kutu { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.2rem; }
.bilgi-kutusu { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 14px; padding: 1.4rem; }
.bilgi-kutusu h3 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 1rem; }
.bilgi-satir { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--cizgi); font-size: .92rem; }
.bilgi-satir:last-of-type { border-bottom: none; }
.bilgi-satir .anahtar-ad { color: var(--metin-soluk); flex-shrink: 0; }
.bilgi-satir .deger { color: var(--baslik); font-weight: 600; text-align: right; }

/* --- Eğitim tarihi kartları ------------------------------------------------ */
.tarih-kart { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 14px; padding: 1.1rem 1.3rem; }
.tarih-kart .gun-kutu { flex-shrink: 0; width: 64px; text-align: center; background: var(--sektor-yum); border-radius: 10px; padding: .5rem 0; }
.tarih-kart .gun-kutu .gun { font-size: 1.5rem; font-weight: 800; color: var(--sektor, var(--vurgu)); line-height: 1.1; }
.tarih-kart .gun-kutu .ay { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sektor, var(--vurgu)); }
.tarih-kart .tarih-govde { flex: 1; min-width: 0; }
.tarih-kart h4 { margin: 0 0 .25rem; font-size: 1rem; }
.tarih-kart .tarih-meta { font-size: .85rem; color: var(--metin-soluk); display: flex; gap: 1rem; flex-wrap: wrap; }
.tarih-kart .durum-rozet { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 99px; }
.durum-rozet.acik { background: color-mix(in srgb, #16a34a 16%, transparent); color: #4ade80; }
.durum-rozet.dolu { background: color-mix(in srgb, #d97706 16%, transparent); color: #fbbf24; }
.durum-rozet.kapandi { background: var(--zemin-3); color: var(--metin-soluk); }

/* --- Kazanım listesi -------------------------------------------------------- */
.kazanim-listesi { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.kazanim-listesi li { position: relative; padding: .55rem .8rem .55rem 2.2rem; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 10px; font-size: .93rem; color: var(--metin); }
.kazanim-listesi li::before { content: "✓"; position: absolute; left: .85rem; color: var(--sektor, var(--vurgu)); font-weight: 800; }

/* --- Süreç adımları ---------------------------------------------------------- */
.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; counter-reset: adim; }
.adim { position: relative; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 14px; padding: 1.6rem 1.3rem 1.2rem; counter-increment: adim; }
.adim::before { content: counter(adim, decimal-leading-zero); position: absolute; top: -0.85rem; left: 1.1rem; background: var(--sektor, var(--vurgu)); color: var(--dugme-metin); font-weight: 800; font-size: .85rem; border-radius: 8px; padding: .15rem .55rem; }
.adim h4 { margin: 0 0 .4rem; font-size: 1rem; }
.adim p { color: var(--metin-soluk); font-size: .88rem; margin: 0; }

/* --- CTA bandı ----------------------------------------------------------------- */
.cta-bant { border: 1px solid color-mix(in srgb, var(--sektor, var(--vurgu)) 45%, var(--cizgi)); background: linear-gradient(120deg, var(--sektor-yum), transparent 60%); border-radius: 16px; padding: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-bant h3 { margin: 0 0 .3rem; }
.cta-bant p { margin: 0; color: var(--metin-soluk); }

/* --- Kırıntı (breadcrumb) -------------------------------------------------------- */
.kirinti { font-size: .82rem; font-weight: 600; color: var(--metin-soluk); margin-bottom: 1rem; }
.kirinti a { color: var(--metin-soluk); }
.kirinti a:hover { color: var(--sektor, var(--vurgu)); }

/* --- Gök Durumu şeridi -------------------------------------------------------- */
.gok-serit { border-block: 1px solid var(--cizgi); background: color-mix(in srgb, var(--zemin-2) 70%, transparent); }
.gok-ic { display: flex; align-items: center; justify-content: center; gap: 1.4rem; padding: .8rem 1.25rem; flex-wrap: wrap; }
.gok-oge { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.gok-simge { color: var(--vurgu); display: flex; align-items: center; }
.gok-glif { font-size: 1.5rem; line-height: 1; }
.gok-harf { font-size: 1.6rem; font-family: "Geeza Pro", "Segoe UI", "Noto Naskh Arabic", serif; }
.gok-metin { display: flex; flex-direction: column; line-height: 1.25; }
.gok-metin strong { color: var(--baslik); font-size: .92rem; }
.gok-metin small { color: var(--metin-soluk); font-size: .74rem; }
.gok-ayrac { width: 1px; height: 28px; background: var(--cizgi); }
@media (max-width: 640px) { .gok-ayrac { display: none; } .gok-ic { gap: 1rem; } }

/* --- Mobil incelikleri ------------------------------------------------------ */
@media (max-width: 980px) {
  .yan-kutu { position: static; }
}
@media (max-width: 640px) {
  .tarih-kart { flex-wrap: wrap; }
  .tarih-kart > div:last-child { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .duyuru-pano { padding: 1.3rem; }
  .cta-bant { padding: 1.4rem; }
  .kart { padding: 1.2rem; }
  .bolum { padding: 2rem 0; }
}
@media (max-width: 480px) {
  .marka { font-size: 1.05rem; }
  .marka img { max-height: 34px !important; }
  .rakam .deger { font-size: 1.5rem; }
  h1 { font-size: 1.65rem; }
  .dugme { padding: .6rem 1.05rem; font-size: .9rem; }
  .serit-ic { font-size: .82rem; }
}

/* --- Yardımcılar ---------------------------------------------------------- */
.soluk { color: var(--metin-soluk); }
.orta { text-align: center; }
.rozet { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 99px; background: var(--sektor-yum); color: var(--sektor, var(--vurgu)); }
.bosluk { height: 1.5rem; }
.satir-ara { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }

/* --- SVG ikonlar ------------------------------------------------------------ */
svg.ikn { vertical-align: -0.18em; flex-shrink: 0; }
.buyuk-ikon { color: var(--sektor, var(--vurgu)); margin-bottom: .8rem; }
.tarih-meta svg.ikn { color: var(--sektor, var(--vurgu)); }

/* --- Külliye zenginleştirme --- */
.ilerleme-cubuk { height: 7px; background: var(--zemin-3); border-radius: 99px; overflow: hidden; }
.ilerleme-cubuk span { display: block; height: 100%; background: linear-gradient(90deg, var(--vurgu), var(--sektor, var(--vurgu))); border-radius: 99px; }
.bolum-listesi { display: grid; gap: .3rem; }
.bolum-atla { text-align: left; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 8px; padding: .5rem .8rem; color: var(--metin); cursor: pointer; font: inherit; font-size: .9rem; }
.bolum-atla:hover { border-color: var(--vurgu); color: var(--baslik); }
.bolum-zaman { color: var(--vurgu); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .5rem; }
.filigran { position: absolute; top: 10%; left: 8%; color: rgba(255,255,255,.28); font-size: .8rem; font-weight: 600; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); transition: top 2s ease, left 2s ease; z-index: 4; }

/* --- Kişisel notlar / yer imleri --- */
.not-oge { display: flex; align-items: flex-start; gap: .6rem; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 8px; padding: .5rem .7rem; }
.an-atla { flex-shrink: 0; background: var(--sektor-yum); color: var(--sektor, var(--vurgu)); border: none; border-radius: 6px; padding: .15rem .5rem; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .82rem; cursor: pointer; }
.an-atla:hover { filter: brightness(1.1); }
.not-metin { flex: 1; min-width: 0; font-size: .9rem; color: var(--metin); }
.not-sil { background: none; border: none; color: var(--metin-soluk); cursor: pointer; font-size: .8rem; padding: 0 .2rem; }
.not-sil:hover { color: #ef4444; }

/* --- SSS akordeon --- */
.sss-oge { border: 1px solid var(--cizgi); border-radius: 12px; margin-bottom: .7rem; background: var(--zemin-2); overflow: hidden; }
.sss-oge summary { cursor: pointer; padding: 1rem 1.3rem; font-weight: 600; color: var(--baslik); list-style: none; }
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::before { content: "+"; color: var(--vurgu); font-weight: 800; margin-right: .6rem; }
.sss-oge[open] summary::before { content: "−"; }
.sss-oge .icerik-govde { padding: 0 1.3rem 1.1rem; color: var(--metin-soluk); }

/* --- Sunucu durum --- */
.durum-nokta { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }

/* --- Randevu slotları --- */
.randevu-gun { margin-bottom: 1.4rem; }
.slot-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin-top: .5rem; }
.slot { padding: .55rem; border: 1.5px solid var(--cizgi); border-radius: 9px; background: var(--zemin-2); color: var(--metin); font: inherit; font-weight: 600; cursor: pointer; }
.slot:hover { border-color: var(--sektor, var(--vurgu)); }
.slot.secili { background: var(--sektor, var(--vurgu)); color: var(--dugme-metin); border-color: var(--sektor, var(--vurgu)); }

/* --- Yüzen hızlı iletişim --- */
.yuzen-iletisim { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 80; display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; }
.yuzen-dugme { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); color: #fff; }
.yuzen-dugme.wa { background: #25d366; }
.yuzen-dugme.ga { background: var(--vurgu); color: var(--dugme-metin); }
.geri-arama-kutu { display: none; position: absolute; right: 0; bottom: 60px; width: 240px; background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 12px; padding: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.geri-arama-kutu.acik { display: block; }

/* --- Duyuru panosu: tıklanabilir kart --- */
a.duyuru-pano.tiklanir { display: block; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.duyuru-pano.tiklanir:hover { transform: translateY(-2px); box-shadow: 0 12px 40px color-mix(in srgb, var(--vurgu) 18%, transparent); }
a.duyuru-pano.tiklanir h2 { color: var(--baslik); }
a.duyuru-pano.tiklanir.gorselli { display: grid; }
.duyuru-pano .dugme { pointer-events: none; }

/* --- Modüler eğitim listesi --- */
.modul-liste { margin: .6rem 0 0; display: grid; gap: .25rem; }
.modul-satir { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .3rem .6rem; background: var(--sektor-yum); border-radius: 7px; }
.modul-ad { font-weight: 700; color: var(--sektor, var(--vurgu)); }
.modul-tarih { color: var(--metin-soluk); font-variant-numeric: tabular-nums; }

/* --- Haftalık Ders Programı (astroloji seri dersleri — göksel stil) --- */
.ders-programi {
  border: 1px solid color-mix(in srgb, #7c6cff 40%, var(--cizgi));
  border-radius: 16px; padding: 1.6rem; margin-top: 1rem;
  background:
    radial-gradient(30rem 16rem at 90% -10%, color-mix(in srgb,#7c6cff 12%,transparent), transparent 60%),
    radial-gradient(24rem 14rem at 0% 120%, color-mix(in srgb,#e0b93f 10%,transparent), transparent 60%),
    var(--zemin-2);
}
.dp-baslik { display: flex; align-items: center; gap: .6rem; color: var(--baslik); }
.dp-yildiz { color: #e0b93f; font-size: 1.4rem; filter: drop-shadow(0 0 6px color-mix(in srgb,#e0b93f 60%,transparent)); }
.dp-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .7rem 0 1.2rem; color: var(--metin-soluk); font-size: .9rem; }
.dp-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.dp-meta svg { color: #9b8cff; }
.dp-ay { margin-bottom: 1.1rem; }
.dp-ay-baslik { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9b8cff; padding-bottom: .4rem; border-bottom: 1px solid var(--cizgi); margin-bottom: .5rem; }
.dp-ders { display: flex; align-items: center; gap: .9rem; padding: .5rem .4rem; border-radius: 8px; }
.dp-ders + .dp-ders { border-top: 1px dashed color-mix(in srgb,var(--cizgi) 60%,transparent); }
.dp-ders:hover { background: color-mix(in srgb,#7c6cff 8%,transparent); }
.dp-tarih { flex-shrink: 0; width: 48px; text-align: center; }
.dp-gun { display: block; font-size: 1.25rem; font-weight: 800; color: var(--baslik); line-height: 1; }
.dp-gunad { display: block; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-soluk); }
.dp-konu { flex: 1; font-size: .95rem; color: var(--metin); }
.dp-ozel { background: color-mix(in srgb,#e0b93f 12%,transparent); }
.dp-ozel .dp-konu { font-weight: 700; color: var(--baslik); }
.dp-aktif { box-shadow: inset 0 0 0 1.5px #7c6cff; }
.dp-rozet { display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: #7c6cff; color: #fff; border-radius: 99px; padding: .1rem .5rem; margin-left: .4rem; }