:root {
  --navy: #071f36;
  --navy-2: #0b2d4d;
  --green: #80c41c;
  --white: #ffffff;
  --text: #102235;
  --muted: #6d7b88;
  --surface: #f4f7f9;
  --border: #dce4ea;
  --shadow: 0 24px 70px rgba(4, 24, 43, .2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--white);
}
body.modal-open { overflow: hidden; }
a { color: inherit; }
button, select { font: inherit; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 92px;
  padding: 14px clamp(20px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand img {
  width: 245px;
  max-height: 110px;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: block;
}
.header-mail {
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid rgba(128,196,28,.8);
  padding-bottom: 5px;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--navy);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,20,36,.86), rgba(3,20,36,.45) 58%, rgba(3,20,36,.65));
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  color: var(--white);
  padding-top: 80px;
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--green);
  font-weight: 800;
  letter-spacing: .18em;
  font-size: .78rem;
}
.eyebrow.dark { color: #5f9910; }
.hero h1 {
  max-width: 820px;
  margin: 0 0 34px;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.primary-button {
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #09233a;
  font-weight: 900;
  padding: 17px 30px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(128,196,28,.3);
  transition: transform .2s ease, filter .2s ease;
}
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.primary-button.full { width: 100%; margin-top: 8px; }
.scroll-indicator {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  color: white;
  font-size: 2rem;
  text-decoration: none;
}

.news-section {
  padding: 90px clamp(20px, 5vw, 76px) 110px;
  background: var(--surface);
}
.section-heading {
  max-width: 1180px;
  margin: 0 auto 36px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: -.04em;
}
.section-heading > p {
  max-width: 480px;
  color: var(--muted);
  line-height: 1.7;
}
.news-grid {
  max-width: 1180px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-card {
  background: white;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(15, 39, 60, .08);
}
.news-placeholder {
  min-height: 190px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: var(--green);
  font-size: 1.5rem;
  font-weight: 900;
}
.news-body { padding: 24px; }
.news-body time { color: var(--muted); font-size: .85rem; }
.news-body h3 { margin: 10px 0; font-size: 1.25rem; }
.news-body p { margin: 0; color: var(--muted); line-height: 1.65; }

.site-footer {
  padding: 28px clamp(20px, 5vw, 76px);
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-footer img { width: 90px; background: white; border-radius: 10px; }
.site-footer a { color: white; text-decoration: none; }

.modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
}
.modal.open { display: block; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,18,31,.78);
  backdrop-filter: blur(5px);
}
.modal-panel {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100% - 30px));
  max-height: calc(100vh - 30px);
  overflow: auto;
  margin: 15px auto;
  padding: clamp(24px, 5vw, 44px);
  background: white;
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.modal-close {
  position: absolute;
  right: 20px;
  top: 16px;
  border: 0;
  background: transparent;
  font-size: 2rem;
  cursor: pointer;
}
.modal-panel h2 {
  margin: 0 40px 8px 0;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: -.04em;
}
.modal-intro { color: var(--muted); margin-bottom: 26px; }
form { display: grid; gap: 15px; }
label { display: grid; gap: 7px; font-weight: 800; }
select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  padding: 0 14px;
  color: var(--text);
}
select:disabled { background: #eef2f4; color: #93a0aa; }
.form-message { min-height: 22px; margin: 0; color: #5f9910; font-weight: 700; text-align: center; }

@media (max-width: 800px) {
  .site-header { min-height: 76px; padding: 10px 18px; }
  .brand img { width: 108px; max-height: 58px; }
  .header-mail { font-size: .8rem; }
  .hero-content { padding-top: 60px; }
  .hero h1 { font-size: clamp(2.7rem, 15vw, 4.8rem); }
  .section-heading { display: block; }
  .news-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; text-align: center; }
}

.missing-school-box{border:1px dashed #b9c8d2;border-radius:14px;padding:14px;background:#f8fafb}
.missing-school-box p{margin:0 0 10px}
.secondary-button{width:100%;border:1px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font-weight:800;padding:13px 18px;cursor:pointer}
.missing-school-form{display:grid;gap:14px;padding:16px;border-radius:14px;background:#f4f7f9}
.missing-school-form input{width:100%;min-height:50px;border:1px solid var(--border);border-radius:12px;padding:0 14px;font:inherit}

.missing-school-form[hidden],
.missing-school-box[hidden] {
  display: none !important;
}

.missing-school-form[hidden] {
  display: none !important;
}
.missing-school-form {
  margin-top: 4px;
}

.form-message {
  white-space: normal;
  line-height: 1.45;
}

button:disabled{opacity:.62;cursor:not-allowed}
.success-modal[hidden]{display:none!important}
.success-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(5,25,43,.72);backdrop-filter:blur(4px)}
.success-modal-card{width:min(420px,100%);padding:30px 24px;border-radius:22px;background:#fff;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.success-modal-card h2{margin:10px 0 8px;color:var(--navy)}
.success-modal-card p{margin:0 0 22px;color:#5f6f7b}
.success-icon{width:62px;height:62px;margin:0 auto;display:grid;place-items:center;border-radius:50%;background:var(--green);color:var(--navy);font-size:2rem;font-weight:900}
.modal-open{overflow:hidden}

.success-check-button{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--green);
  color:var(--navy);
  font-size:2.2rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(128,196,28,.32)
}
.success-check-button:hover{transform:scale(1.04)}
.success-modal-card small{display:block;color:#7a8892;line-height:1.45}


.news-cover{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.dynamic-news-card{
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.dynamic-news-card:hover,
.dynamic-news-card:focus{
  transform:translateY(-5px);
  box-shadow:0 20px 46px rgba(8,32,53,.14);
  outline:none;
}
.news-read-more{
  display:inline-block;
  margin-top:12px;
  color:var(--navy);
  font-weight:900;
}
.news-detail-modal[hidden]{display:none!important}
.news-detail-modal{
  position:fixed;
  inset:0;
  z-index:9998;
  display:grid;
  place-items:center;
  padding:20px;
}
.news-detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,22,38,.76);
  backdrop-filter:blur(4px);
}
.news-detail-card{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:min(88vh,900px);
  overflow:auto;
  border-radius:24px;
  background:#fff;
  box-shadow:0 28px 85px rgba(0,0,0,.3);
}
.news-detail-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:rgba(7,31,54,.88);
  color:#fff;
  font-size:1.7rem;
  cursor:pointer;
}
.news-detail-image{
  width:100%;
  max-height:380px;
  object-fit:cover;
  display:block;
}
.news-detail-content{padding:28px}
.news-detail-content time{
  color:#788791;
  font-size:.92rem;
}
.news-detail-content h2{
  margin:8px 0 12px;
  color:var(--navy);
  font-size:clamp(1.8rem,4vw,2.7rem);
}
.news-detail-excerpt{
  font-size:1.1rem;
  font-weight:700;
  color:#405461;
}
.news-detail-text{
  margin-top:20px;
  color:#344a57;
  line-height:1.75;
  white-space:pre-wrap;
}
@media(max-width:600px){
  .news-detail-card{border-radius:18px}
  .news-detail-content{padding:22px 18px}
}


@media (max-width: 768px) {
  .brand img {
    width: 210px;
    max-height: 96px;
  }
}


/* Update 20: centered transparent logo */
.site-header {
  position: absolute;
  justify-content: center;
}

.brand {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  display: block;
}

.brand img {
  width: auto;
  height: 110px;
  max-width: min(320px, 42vw);
  max-height: 110px;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.header-mail {
  position: absolute;
  right: clamp(20px, 5vw, 76px);
  top: 35px;
}

@media (max-width: 768px) {
  .brand {
    top: 10px;
  }

  .brand img {
    height: 92px;
    max-height: 92px;
    max-width: 42vw;
  }

  .header-mail {
    right: 16px;
    top: 28px;
    font-size: .82rem;
  }
}


/* Güncelleme 22: logoyu tekrar sol üste al */
.site-header {
  justify-content: space-between;
}

.brand {
  position: absolute;
  left: clamp(20px, 5vw, 76px);
  top: 14px;
  transform: none;
}

.brand img {
  width: auto;
  height: 110px;
  max-height: 110px;
}

@media (max-width: 768px) {
  .brand {
    left: 16px;
    top: 10px;
  }

  .brand img {
    height: 92px;
    max-height: 92px;
  }
}