/* === DARK-LIGHT TEMA DESTEĞİ === */
:root {
  --main-bg: #e0e7ff;
  --panel-bg: #fff;
  --panel-blur: rgba(255,255,255,0.92);
  --border-soft: #dbeafe;
  --accent: #37e0fc;
  --accent-grad: linear-gradient(90deg, #4cc6ff 0%, #37e0fc 100%);
  --accent-2: #b38bfc;
  --text-main: #22263a;
  --text-muted: #7b8bb5;
  --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
  --radius: 1.5rem;
  --soft-radius: 1.1rem;
  --trans: .21s cubic-bezier(.65,.18,.36,1.1);
}
body {
  background: linear-gradient(120deg, #e0e7ff 0%, #f8fafc 100%) !important;
  color: var(--text-main) !important;
}
<style>
.header-desc {
  margin: 0 auto 30px;
  max-width: 600px;
  color: #2d3a5a;
  opacity: .98;
  font-weight: 500;
  font-family: <?= htmlspecialchars($headerDescFont) ?>, Arial, sans-serif;
  font-size: <?= htmlspecialchars($headerDescSize) ?>;
  line-height: 1.5;
  text-align: center;
}
.header-desc p,
.header-desc ul,
.header-desc ol,
.header-desc li,
.header-desc h1,
.header-desc h2,
.header-desc h3,
.header-desc h4,
.header-desc h5,
.header-desc h6 {
  margin-top: 0.25em !important;
  margin-bottom: 0.25em !important;
  padding: 0 !important;
}
.header-desc ul,
.header-desc ol {
  padding-left: 1.5em !important;
  margin-bottom: 0.5em !important;
}
.header-desc li {
  margin-bottom: 0.15em !important;
}
</style>


html, body {
  background: var(--main-bg) !important;
  color: var(--text-main) !important;
}

.navbar {
  background: #22263a !important;
  border-bottom: 2.5px solid var(--border-soft);
  box-shadow: 0 8px 36px #57e4ff18;
  backdrop-filter: blur(12px);
}
.navbar .navbar-brand {
  color: #fff !important;
  font-weight: 900;
  font-family: 'Sora', 'Inter', Arial, sans-serif;
  font-size: 2.3rem;
  letter-spacing: 1.2px;
  text-shadow: 0 3px 20px #71f8ff52, 0 2px 8px #7fc8ff18;
  transition: color .17s;
}
.navbar .btn-outline-light {
  background: var(--accent-grad);
  color: #151d2b !important;
  font-weight: 700;
  font-size: 1.08rem;
  border: none;
  border-radius: 2.3rem;
  padding: 8px 30px;
  box-shadow: 0 2px 15px #49dcff38;
  letter-spacing: .4px;
  transition: background .23s, color .14s, box-shadow .21s;
}
.navbar .btn-outline-light:hover {
  background: linear-gradient(90deg,#23aaff 0,#c1eeff 100%);
  color: #202a44 !important;
  box-shadow: 0 7px 28px #19b6ff29;
  transform: translateY(-1.5px) scale(1.09);
}

.hero {
  background: linear-gradient(120deg, #282b69 60%, #1cd3fc 100%);
  color: #fff;
  padding: 100px 0 72px 0;
  text-align: center;
  border-radius: 0 0 65px 65px;
  box-shadow: 0 20px 52px #36e1ff1a;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.hero:after {
  content: "";
  position: absolute;
  left:50%; top:0;
  transform:translateX(-50%);
  width: 260px; height: 200px;
  background: radial-gradient(ellipse at 50% 25%,#fff9 40%,#0000 80%);
  opacity:.17; z-index:0;
  filter: blur(13px);
}
.hero h1 {
  font-family: 'Sora', Arial, sans-serif;
  font-size: 3.1rem; font-weight: 900;
  margin-bottom: 1.4rem; letter-spacing: 1.2px;
  text-shadow: 0 6px 26px #0b1583b0;
  animation: fadeInDown 1.1s cubic-bezier(.38,1.4,.39,.97);
}
.hero p {
  font-size: 1.19rem;
  opacity:.98; max-width:600px;
  margin:0 auto 30px; font-weight:500;
  text-shadow:0 2px 18px #1850b755;
}
.hero .btn {
  font-weight: 800;
  border-radius: 2rem; padding: 18px 44px;
  background: var(--accent-grad);
  color: #16345c; border:none; font-size:1.14rem;
  box-shadow: 0 2px 16px #41f4ff29;
  transition:.19s cubic-bezier(.67,1.58,.41,.91);
  font-family: 'Sora', Arial, sans-serif;
  letter-spacing:.4px;
  outline: none;
}
.hero .btn:hover {
  background: linear-gradient(90deg,#23d4ff 0,#e7fcff 100%);
  color: #1d2240;
  transform: scale(1.08) translateY(-2px);
  box-shadow:0 10px 36px #00fff933;
}
@keyframes fadeInDown {0%{opacity:0;transform:translateY(-70px);} 100%{opacity:1;transform:translateY(0);}}

.main-content { margin-top: 50px !important; position: relative; z-index: 2;} /* DUYURULAR ve HABERLER için yukarıdan daha fazla boşluk */

.row-equal {
  display: flex;
  flex-wrap: wrap;
  gap: 2.3rem;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 2rem;
}
.col-equal {
  flex: 1 1 355px;
  min-width: 325px;
  max-width: 570px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* --- Duyurular & Haberler Kartları --- */
.card-equal {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 240px;
  background: rgba(255,255,255,0.85) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12) !important;
  padding:2.2rem 2rem 1.4rem 2rem;
  border: 2px solid #3df0fc0e;
  backdrop-filter: blur(11px) saturate(110%);
  transition: .18s;
  position: relative;
  overflow: hidden;
}
.card-equal .card-title {
  font-weight: 700 !important;
  color: #2d3a5a !important;
  letter-spacing:0.2px;
  font-size:1.24rem;
  font-family: 'Sora', Arial, sans-serif;
  z-index: 2;
  position: relative;
  margin-bottom: 0.7rem !important;
  text-shadow: 0 1.5px 5px #17e3ff2e;
}
.card-equal .card-icon {
  font-size: 2.2rem !important;
  color: #4df8ff !important;
  margin-bottom: 0.5rem !important;
  filter: drop-shadow(0 2px 6px #79f4ff44);
  z-index: 2; position: relative;
  animation: pop 0.7s cubic-bezier(.57,1.63,.42,.93) .03s both;
}
@keyframes pop { 0% {transform:scale(0.8);} 100%{transform:scale(1);} }
.card-equal .badgelist {
  flex: 1 1 auto;
  min-height: 85px;
  max-height: 200px;
  overflow-y: auto;
  gap: 0.65rem;
  padding: 0;
  list-style: none;
  margin-bottom: 0;
  scrollbar-width: thin;
  scrollbar-color: #54eaff #232746;
}
.card-equal .badgelist::-webkit-scrollbar {
  width: 7px;
  background: #2a304d;
  border-radius: 8px;
}
.card-equal .badgelist::-webkit-scrollbar-thumb {
  background: #37dfffad;
  border-radius: 12px;
}
.card-equal .badgelist li {
  background:linear-gradient(90deg,#e0e7ff 0%,#f8fafc 100%) !important;
  color: #22263a !important;
  border-radius:1.18rem; 
  padding:1.07rem 1.2rem 1.1rem 1.2rem; /* spacing arttı */
  font-size:1.02rem; font-weight:500;
  box-shadow:0 2px 10px #2fd8ff18;
  border-left: 4px solid #4df8ff80 !important;
  transition:.12s;
  margin-bottom: 12px; /* kartlar arasında mesafe arttı */
  position: relative;
  z-index: 1;
  word-break: break-word;
  cursor:pointer; /* tıklanabilir */
}
.card-equal .badgelist li:hover {
  border-left-color:#47deff;
  background:#202f4c38;
  box-shadow: 0 2px 20px #00b3ff19;
  filter: brightness(1.1);
}
.card-equal .badge-date {
  display: inline-block;
  background: linear-gradient(90deg, #f8fdff 40%, #c9ebff 100%);
  color: #1c448a !important;
  border-radius: 1.1rem;
  font-size: .98rem;
  font-weight: 700;
  margin-left: .70rem;
  margin-bottom: 5px;
  padding: 3px 16px 3px 16px;
  box-shadow: 0 1.5px 7px #00b2ff17;
  border: 1.2px solid #e5f4ff;
  letter-spacing: 0.02em;
  position: relative;
  top: -1.5px;
}
.card-equal .badgelist li b {
  display: block;
  margin-bottom: 8px; /* başlık ile tarih arası */
  font-size: 1.10em;
}
.card-equal .badgelist li > div {
  margin-top: 10px; /* içerik ile tarih arası */
  line-height: 1.63;
  font-weight: 400;
}
.card-equal .text-muted {
  color: var(--text-muted) !important;
  opacity: .83;
  font-size: 1.01rem;
  margin-top: 0.4rem;
}

/* --- Diğer kartlar --- */
.card-blur {
  background: rgba(255,255,255,0.85) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12) !important;
  padding:2.5rem 2.2rem 1.4rem 2.2rem;
  margin-bottom: 2rem;
  border: 1.7px solid #37e0fc12;
  backdrop-filter: blur(13px) saturate(115%);
  transition:.18s;
  position: relative;
  overflow: hidden;
}
.card-blur .card-title {
  font-weight:800;
  color:var(--accent-2);
  letter-spacing:0.4px;
  font-size:1.25rem;
  font-family: 'Sora', Arial, sans-serif;
  z-index: 2;
  position: relative;
  text-shadow: 0 1px 5px #a49bfc2e;
}
.card-blur .card-icon {
  font-size:2.2rem; color:var(--accent-2); margin-bottom:.6rem; opacity:.90;
  filter: drop-shadow(0 2px 6px #b38bfc28);
  z-index: 2; position: relative;
  animation: pop 0.7s cubic-bezier(.57,1.63,.42,.93) .03s both;
}

/* En aktif okul kartı */
.winner-card {
  background: linear-gradient(120deg,#1b2135 30%,#313e73 100%);
  border-radius:var(--soft-radius);
  box-shadow: 0 3px 28px #7fe6ff24,0 2px 14px #4ec7ff27;
  text-align:center;
  padding:2.9rem 1.7rem 1.7rem 1.7rem;
  margin-bottom:2.6rem;
  border:0;
  min-height:245px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(6px) saturate(118%);
}
.winner-card .cup {
  font-size:4.1rem; color:#ffce4b; margin-bottom:.05em;
  filter: drop-shadow(0 2px 6px #fff7e17a);
  animation:pop .85s cubic-bezier(.57,1.63,.42,.93) .13s both;
  text-shadow: 0 4px 24px #fff1e17a;
}
.winner-card .name {
  font-size:1.27rem;
  font-weight:900;
  color:#ffeebb;
  font-family: 'Sora', Arial, sans-serif;
  letter-spacing:0.01em;
}
.winner-card .badge {
  background: #fff8e2; color:#a6821b;
  font-size:1.09rem; padding:.52em 1.2em; border-radius:1.2em;
  font-weight:600; margin-top:9px; box-shadow:0 1px 6px #f9c54728;
}
.projeler-card {
  margin:1.3em 0 0 0; padding-top:0.8em;
  border-top:1.7px solid #ffe1b06c;
  text-align: left;
}
.projeler-card .text-secondary {
  font-size:1.01rem;
  font-weight:700;
  color: #8ee9ff !important;
}
.projeler-card .proj-badge {
  background: #222e48;
  color:#78c9f5;
  border-radius:2em; padding:.5em 1.25em; margin-right:7px; font-weight:500;
  font-size:1.03rem; display:inline-block; margin-bottom:8px;
  box-shadow:0 2px 7px #b5eaff22;
  border: 1.2px solid #45e0ff3a;
}
.projeler-card .proj-badge .small {
  color:#6fb0d1;
  font-weight:400;
}
.tebrik-badge {
  background: #3be6ee;
  color:#003c49;
  border-radius:2em;
  font-size:1.10rem;
  padding: 0.53em 1.28em;
  font-weight:700;
  box-shadow: 0 1px 10px #a7e8f22c;
  margin-top:1.3em; display:inline-block;
  letter-spacing: 0.03em;
  opacity:.95;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem 0.9rem;
  margin-top: 0.2rem;
}
.school-chip {
  display: inline-block;
  background: linear-gradient(90deg,#181f2b 60%,#1b3040 100%);
  color: #1ad4ff;
  border-radius: 1.6em;
  padding: 8px 19px;
  font-size: 1.03rem;
  font-weight: 700;
  border: 1.5px solid #3cf8ff2a;
  box-shadow: 0 1.5px 8px #37e3fe1a;
  transition:.13s;
  font-family: 'Inter', Arial, sans-serif;
  opacity: .96;
}
.school-chip:hover {
  background: #1c3147;
  color:#53eaff;
  border-color:#47f4ff;
  box-shadow:0 4px 18px #32e3ff1c;
  transform: scale(1.11);
}
.school-chip .text-muted {
  color: #7ea4b2 !important;
  font-weight: 400;
  margin-left: 2px;
}

.footer {
  background: transparent !important;
  color: #2d3a5a !important;
  padding: 34px 0 18px;
  text-align:center;
  font-size:1.12rem;
  margin-top:54px;
  letter-spacing:.9px;
  border-radius: 46px 46px 0 0;
  box-shadow: 0 -2px 24px #38e3fe0c;
}

.bg-dark-footer {
  background: #22263a !important;
  color: #fff !important;
  border-radius: 1.2rem 1.2rem 0 0;
  padding-top: 18px;
}

/* Responsive */
@media (max-width: 1050px) {
  .row-equal { flex-direction: column; gap: 1.6rem;}
  .col-equal { max-width: unset; min-width: unset; }
  .card-equal { min-height: 180px; }
  .main-content { margin-top: 20px !important;}
}
@media (max-width: 700px) {
  .hero {padding: 58px 0 34px 0;}
  .card-equal { padding: 1.1rem 0.7rem; min-height: 110px; }
  .main-content {margin-top:15px !important;}
  .winner-card {padding: 1.4rem 0.4rem 1.1rem 0.4rem;}
  .card-blur {padding: 1.3rem 0.5rem 1rem 0.5rem;}
}
::selection { background:#22e1ff44; }

.card-equal, .card-blur, .winner-card, .modern-card, .modern-feature-card {
  background: var(--panel-blur) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
  color: var(--text-main) !important;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s;
}

.card-title, .modern-card .card-title, .modern-feature-card .card-title {
  color: #2d3a5a !important;
}
body.dark-theme .card-title, body.dark-theme .modern-card .card-title, body.dark-theme .modern-feature-card .card-title {
  color: #4df8ff !important;
}

.card-icon, .modern-card .card-icon, .modern-feature-card .card-icon {
  color: #4df8ff !important;
}

.modern-badgelist li, .card-equal .badgelist li, .school-chip, .modern-chip {
  background: linear-gradient(90deg,var(--main-bg) 0%,var(--panel-bg) 100%) !important;
  color: var(--text-main) !important;
  border-left: 4px solid #4df8ff80 !important;
}

.footer, .modern-footer {
  background: transparent !important;
  color: var(--text-main) !important;
}

footer.modern-footer, .bg-dark-footer {
  background: #22263a !important;
  color: #fff !important;
  border-radius: 1.2rem 1.2rem 0 0;
  padding-top: 18px;
}