/* Özel Enes Yetim Okulları — site stili
   Renkler kurumun kendisinden: logo laciverti ve okul binasının turuncusu. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/fraunces-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/fraunces-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --kagit: #f7f4ee;
  --kagit-2: #efe9df;
  --beyaz: #fffdf9;
  --murekkep: #18213a;
  --lacivert: #0c215c;
  --lacivert-2: #1a3478;
  --lacivert-acik: #c9d2ea;
  --turuncu: #e3602a;
  --turuncu-koyu: #bf4a17;
  --turuncu-acik: #fbe3d6;
  --gri: #5a6274;
  --cizgi: #ddd4c6;
  --hata: #b42318;
  --kap: 1200px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --golge: 0 18px 40px -18px rgba(12, 33, 92, .35);
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--kagit); color: var(--murekkep);
  font: 400 1.0625rem/1.65 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
body.kilitli { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-optical-sizing: auto;
  line-height: 1.06; letter-spacing: -.018em; color: var(--lacivert); margin: 0 0 .5em; text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.2vw, 4.3rem); }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.65rem); }
h3 { font-size: 1.32rem; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
address { font-style: normal; }
ul, ol { padding: 0; margin: 0; list-style: none; }
::selection { background: var(--turuncu); color: #fff; }

.kap { width: min(100% - 32px, var(--kap)); margin-inline: auto; }
@media (min-width: 700px) { .kap { width: min(100% - 64px, var(--kap)); } }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 3px; border-radius: 2px; }
.atla { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lacivert); color: #fff; padding: 10px 16px; border-radius: 3px; text-decoration: none; }
.atla:focus { top: 12px; }

/* ---------- Düğme ve bağlantı ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-weight: 600; font-size: 1rem; line-height: 1.1; padding: .95em 1.35em;
  border-radius: 3px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.dugme:active { transform: translateY(1px); }
.dugme-turuncu { background: var(--turuncu); color: #fff; }
.dugme-turuncu:hover { background: var(--turuncu-koyu); }
.dugme-lacivert { background: var(--lacivert); color: #fff; }
.dugme-lacivert:hover { background: var(--lacivert-2); }
.dugme-cizgi { border-color: currentColor; background: transparent; color: var(--lacivert); }
.dugme-cizgi:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.dugme-beyaz { background: #fff; color: var(--lacivert); }
.dugme-beyaz:hover { background: var(--turuncu-acik); }
.ok { display: inline-block; transition: transform .3s var(--ease); }
a:hover > .ok, button:hover > .ok, .dugme:hover .ok { transform: translateX(4px); }
.bag {
  font-weight: 600; color: var(--lacivert); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 6px; text-decoration-color: var(--turuncu); transition: text-underline-offset .2s, color .2s;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.bag:hover { text-underline-offset: 3px; color: var(--turuncu-koyu); }
.bag-ince { text-decoration-color: var(--cizgi); }

/* ---------- Üst şerit ve başlık ---------- */
.serit { background: var(--lacivert); color: #dfe5f4; font-size: .875rem; view-transition-name: serit; }
.serit-ic { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.serit p { margin: 0; }
.serit strong { color: #fff; font-weight: 600; }
.serit a { text-decoration: none; color: #fff; }
.serit a:hover { text-decoration: underline; }
.serit-sag { display: flex; gap: 18px; }
@media (max-width: 760px) { .serit-ek { display: none; } .serit-ic { justify-content: center; } .serit-sag { display: none; } }

.ust {
  position: sticky; top: 0; z-index: 40; background: rgba(247, 244, 238, .94);
  backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
  view-transition-name: ust;
}
.ust.kaydi { border-bottom-color: var(--cizgi); box-shadow: 0 6px 24px -18px rgba(12, 33, 92, .45); }
.ust-ic { display: flex; align-items: center; gap: 28px; height: 78px; }
.marka { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--lacivert); flex: none; }
.marka img { width: 36px; height: auto; }
.marka-yazi { display: flex; flex-direction: column; line-height: 1.05; }
.marka-yazi b { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.22rem; letter-spacing: -.01em; }
.marka-yazi small { font-size: .8rem; color: var(--gri); margin-top: 3px; letter-spacing: .01em; }

.menu { position: relative; margin-left: auto; }
.menu > ul { display: flex; align-items: center; gap: 2px; }
.menu > ul > li { position: relative; display: flex; align-items: center; }
.menu > ul > li > a {
  display: block; padding: 10px 12px; text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--murekkep);
  transition: color .2s;
}
.menu > ul > li > a:hover, .menu > ul > li > a[aria-current] { color: var(--lacivert); }
.menu > ul > li > a[aria-current] { font-weight: 600; }
.menu-cizgi {
  position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: var(--turuncu);
  border-radius: 2px; opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s;
}
.acilir-dugme { width: 26px; height: 30px; margin-left: -8px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 3px; }
.acilir-dugme svg { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s var(--ease); }
.acilir.acik .acilir-dugme svg { transform: rotate(180deg); }
.acilir-panel {
  position: absolute; top: calc(100% + 10px); left: -18px; width: 380px; padding: 10px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 6px; box-shadow: var(--golge);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: 20% 0;
  transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s;
}
.acilir-panel::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.acilir:hover .acilir-panel, .acilir.acik .acilir-panel {
  opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--ease), visibility 0s;
}
.acilir-panel a { display: block; padding: 11px 14px; border-radius: 4px; text-decoration: none; transition: background .15s; }
.acilir-panel a:hover, .acilir-panel a[aria-current] { background: var(--kagit); }
.acilir-panel b { display: block; color: var(--lacivert); font-weight: 600; }
.acilir-panel b em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--turuncu-koyu); margin-left: 6px; vertical-align: 2px; letter-spacing: .02em; }
.acilir-panel span { font-size: .88rem; color: var(--gri); }
.acilir-panel .acilir-tum { margin-top: 4px; border-top: 1px solid var(--cizgi); border-radius: 0 0 4px 4px; font-weight: 600; color: var(--lacivert); font-size: .92rem; }

.ust-sag { display: flex; align-items: center; gap: 10px; flex: none; }
.giris-kutu { position: relative; }
.giris-dugme { padding: .72em 1.05em; font-size: .95rem; }
.giris-dugme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.giris-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 320px; padding: 8px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 6px; box-shadow: var(--golge);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: 90% 0;
  transition: opacity .18s, transform .22s var(--ease), visibility 0s .22s;
}
.giris-kutu.acik .giris-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .28s var(--ease), visibility 0s; }
.giris-panel-bas { margin: 4px 10px 6px; font-size: .8rem; color: var(--gri); }
.giris-panel a { display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none; transition: background .15s, padding .2s var(--ease); }
.giris-panel a:hover { background: var(--kagit); padding-left: 16px; }
.giris-panel b { display: block; color: var(--lacivert); font-weight: 600; font-size: .98rem; }
.giris-panel span { display: block; font-size: .84rem; color: var(--gri); }

.hamburger { display: none; width: 46px; height: 46px; border: 1.5px solid var(--cizgi); border-radius: 3px; background: transparent; cursor: pointer; position: relative; }
.hamburger span:not(.gizli) { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--lacivert); transition: transform .3s var(--ease), top .3s var(--ease); }
.hamburger span:nth-child(1) { top: 17px; }
.hamburger span:nth-child(2) { top: 26px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobil-menu {
  position: fixed; inset: 0; z-index: 35; background: var(--lacivert); color: #fff; overflow-y: auto;
  padding: 150px 0 40px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .3s;
}
.mobil-menu.acik { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
.mobil-menu li, .mobil-menu .mobil-giris, .mobil-menu .mobil-tel {
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s, transform .45s var(--ease); transition-delay: calc(var(--i) * 35ms);
}
.mobil-menu.acik li, .mobil-menu.acik .mobil-giris, .mobil-menu.acik .mobil-tel { opacity: 1; transform: none; }
.mobil-menu li > a { display: block; padding: 7px 0; font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; font-weight: 500; text-decoration: none; }
.mobil-menu li > a[aria-current] { color: #ffb48e; }
.mobil-alt { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 2px 0 10px; }
.mobil-menu .mobil-alt a { color: var(--lacivert-acik); text-decoration: none; font-family: "Figtree", system-ui, sans-serif; font-size: 1rem; font-weight: 500; padding: 2px 0; }
.mobil-giris { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.mobil-giris p { grid-column: 1 / -1; margin: 0; color: var(--lacivert-acik); font-size: .9rem; }
.mobil-giris a { color: #fff; font-weight: 600; text-decoration: none; padding: 6px 0; }
.mobil-tel a { display: inline-block; margin-top: 22px; color: #fff; font-size: 1.15rem; font-weight: 600; }

@media (max-width: 1100px) {
  .menu { display: none; }
  .hamburger { display: block; }
  .ust-sag { margin-left: auto; }
}
@media (max-width: 520px) {
  .ust-ic { height: 68px; gap: 12px; }
  .marka img { width: 30px; }
  .marka-yazi b { font-size: 1.08rem; }
  .giris-dugme span { display: none; }
  .giris-dugme { padding: 0; width: 46px; height: 46px; }
  .giris-panel { position: fixed; left: 16px; right: 16px; top: 100px; width: auto; }
  .mobil-menu { padding-top: 120px; }
}

/* ---------- Ortak bölüm düzeni ---------- */
.bolum { padding: clamp(64px, 8vw, 116px) 0; }
.bolum-sik { padding: clamp(48px, 6vw, 80px) 0; }
.bolum-acik { background: var(--kagit-2); }
.bolum-koyu { background: var(--lacivert); color: #dfe5f4; }
.bolum-koyu h2, .bolum-koyu h3 { color: #fff; }
.ust-yazi { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; color: var(--turuncu-koyu); margin-bottom: 14px; }
.ust-yazi::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.bolum-koyu .ust-yazi { color: #ffb48e; }
.bolum-bas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.bolum-bas h2 { margin: 0; }
.bolum-bas p { margin: 0; color: var(--gri); font-size: 1.08rem; }
.bolum-koyu .bolum-bas p { color: #c3cbe2; }
@media (max-width: 860px) { .bolum-bas { grid-template-columns: 1fr; } }
.metin-genis { max-width: 64ch; }
.buyuk-metin { font-size: 1.2rem; line-height: 1.6; }

/* Fotoğraf perdesi: görünür olunca aşağıdan yukarı açılır */
.foto-perde { overflow: hidden; border-radius: 4px; background: var(--kagit-2); }
.foto-perde img { width: 100%; height: 100%; object-fit: cover; }
.js .foto-ac .foto-perde, .js .foto-ac.foto-perde { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
.js .foto-ac .foto-perde img, .js .foto-ac.foto-perde img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.js .foto-ac.gorundu .foto-perde, .js .foto-ac.gorundu.foto-perde { clip-path: inset(0); }
.js .foto-ac.gorundu .foto-perde img, .js .foto-ac.gorundu.foto-perde img { transform: none; }
figcaption { font-size: .88rem; color: var(--gri); margin-top: 10px; line-height: 1.45; }

/* ---------- Ana sayfa girişi ---------- */
.giris-alani { padding: clamp(28px, 4.5vw, 64px) 0 clamp(64px, 8vw, 104px); }
.giris-izgara { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.giris-kunye { font-weight: 600; color: var(--gri); margin-bottom: 22px; font-size: .98rem; }
.giris-kunye b { color: var(--lacivert); }
.giris-baslik { margin-bottom: 28px; font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
@media (max-width: 900px) { .giris-baslik { font-size: clamp(2rem, 8.4vw, 3.4rem); } }
.satir { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.satir > span { display: inline-block; }
.js .satir > span { animation: satir-gir 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes satir-gir { from { transform: translateY(108%); } }
.firca { position: relative; white-space: nowrap; color: var(--lacivert); }
.firca svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .36em; overflow: visible; pointer-events: none; }
.firca path { fill: none; stroke: var(--turuncu); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .firca path { stroke-dashoffset: 1; animation: ciz .9s .95s var(--ease) forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.giris-metin { font-size: 1.15rem; color: #3b4357; max-width: 50ch; margin-bottom: 30px; }
.js .giris-metin, .js .giris-eylem, .js .giris-tel { animation: belir .8s var(--ease) both; }
.js .giris-metin { animation-delay: .55s; }
.js .giris-eylem { animation-delay: .7s; }
.js .giris-tel { animation-delay: .82s; }
@keyframes belir { from { opacity: 0; transform: translateY(12px); } }
.giris-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-bottom: 26px; }
.giris-tel { font-size: .95rem; color: var(--gri); margin: 0; }
.giris-tel a { color: var(--lacivert); font-weight: 600; text-decoration: none; white-space: nowrap; }
.giris-tel a:hover { text-decoration: underline; }
.giris-foto { margin: 0; position: relative; }
.giris-foto .foto-perde { aspect-ratio: 9 / 10; }
.js .giris-foto .foto-perde { animation: perde 1.2s .15s var(--ease) both; }
.js .giris-foto img { animation: yakin 2s .15s var(--ease) both; }
@keyframes perde { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes yakin { from { transform: scale(1.16); } }
.giris-foto-not { position: absolute; left: -28px; bottom: 34px; max-width: 250px; background: var(--beyaz); padding: 14px 16px; border-radius: 4px; box-shadow: var(--golge); font-size: .9rem; line-height: 1.45; color: var(--murekkep); }
.giris-foto-not b { display: block; color: var(--lacivert); font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.02rem; margin-bottom: 2px; }
.js .giris-foto-not { animation: belir .8s 1.15s var(--ease) both; }
@media (max-width: 900px) {
  .giris-izgara { grid-template-columns: 1fr; }
  .giris-foto { order: -1; }
  .giris-foto .foto-perde { aspect-ratio: 4 / 3.4; }
  .giris-foto-not { position: static; max-width: none; box-shadow: none; padding: 10px 0 0; background: none; }
}

/* ---------- Kademe yolu ---------- */
.yol { position: relative; }
.yas-hesap {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 170px) minmax(0, 1fr); gap: 14px 18px; align-items: end;
  padding: 18px 20px; margin-bottom: 30px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 6px;
}
.yas-alan label { display: block; font-size: .86rem; font-weight: 600; color: var(--gri); margin-bottom: 6px; }
.yas-hesap input, .yas-hesap select { width: 100%; }
.yas-sonuc { align-self: center; color: var(--gri); line-height: 1.45; }
.yas-sonuc b { color: var(--lacivert); font-size: 1.12rem; display: block; font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.yas-sonuc.uyari b { color: var(--turuncu-koyu); }
@media (max-width: 760px) { .yas-hesap { grid-template-columns: 1fr 1fr; } .yas-sonuc { grid-column: 1 / -1; } }
.yas-kucuk { margin-bottom: 0; grid-template-columns: minmax(0, 220px) minmax(0, 170px); }
.yas-kucuk .yas-sonuc { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--cizgi); }
.yas-kucuk .yas-sonuc .bag { display: inline-block; margin-top: 8px; }
.yas-sonuc.yenilendi b { animation: belir .45s var(--ease) both; }
@media (max-width: 520px) { .yas-kucuk { grid-template-columns: 1fr; } }

.yol-serit-kap { position: relative; padding-top: 42px; }
.yol-serit { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 0; border: 1.5px solid var(--lacivert); border-radius: 5px; overflow: hidden; background: var(--beyaz); }
.yol-parca {
  grid-column: span var(--birim); position: relative; text-align: left; padding: 16px 14px 15px; min-height: 78px;
  border: 0; border-left: 1.5px solid var(--lacivert); background: transparent; cursor: pointer; color: var(--lacivert);
  transition: background-color .3s var(--ease), color .3s;
}
.yol-parca:first-child { border-left: 0; }
.yol-parca.dar { padding-inline: 9px; }
.yol-parca.dar b { font-size: .98rem; }
.yol-parca.dar small { font-size: .76rem; }
.yol-parca b { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.12rem; line-height: 1.15; }
.yol-parca small { display: block; font-size: .84rem; color: var(--gri); margin-top: 3px; transition: color .3s; }
.yol-parca::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--turuncu); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.yol-parca:hover { background: var(--kagit); }
.yol-parca[aria-selected="true"] { background: var(--lacivert); color: #fff; }
.yol-parca[aria-selected="true"] small { color: var(--lacivert-acik); }
.yol-parca[aria-selected="true"]::after { transform: scaleX(1); }
.yol-parca.denk { box-shadow: inset 0 0 0 3px var(--turuncu); }
.yol-cetvel { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); margin-top: 8px; font-size: .78rem; color: var(--gri); }
.yol-cetvel li { position: relative; padding-top: 9px; text-align: center; }
.yol-cetvel li::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 6px; background: var(--cizgi); }
.yol-isaret {
  position: absolute; top: 0; left: 0; transform: translateX(-50%); opacity: 0;
  transition: left .7s var(--ease), opacity .3s; pointer-events: none; white-space: nowrap;
}
.yol-isaret.var { opacity: 1; }
.yol-isaret span { display: inline-block; background: var(--turuncu); color: #fff; font-size: .8rem; font-weight: 700; padding: 5px 10px; border-radius: 3px; position: relative; }
.yol-isaret span::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--turuncu); }
.yol-isaret.sol span { transform: translateX(calc(50% - 14px)); }
.yol-isaret.sol span::after { left: 14px; }
.yol-isaret.sag span { transform: translateX(calc(-50% + 14px)); }
.yol-isaret.sag span::after { left: auto; right: 8px; }

.yol-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 36px; }
.yol-foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--kagit-2); }
.yol-foto img { width: 100%; height: 100%; object-fit: cover; }
.yol-yas { font-weight: 600; color: var(--turuncu-koyu); margin-bottom: 6px; }
.yol-metin h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 8px; }
.yol-slogan { font-family: "Fraunces", Georgia, serif; font-style: italic; color: var(--gri); font-size: 1.1rem; }
.yol-baglar { display: flex; gap: 24px; margin: 18px 0 0; }
.yol-panel.degisti .yol-foto img { animation: foto-gir .7s var(--ease) both; }
.yol-panel.degisti .yol-metin > * { animation: belir .55s var(--ease) both; }
.yol-panel.degisti .yol-metin > :nth-child(2) { animation-delay: .05s; }
.yol-panel.degisti .yol-metin > :nth-child(3) { animation-delay: .1s; }
.yol-panel.degisti .yol-metin > :nth-child(4) { animation-delay: .15s; }
.yol-panel.degisti .yol-metin > :nth-child(5) { animation-delay: .2s; }
@keyframes foto-gir { from { opacity: .2; transform: scale(1.06); clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@media (max-width: 760px) {
  .yol-serit-kap { padding-top: 0; }
  .yol-serit { grid-template-columns: 1fr; }
  .yol-parca { grid-column: auto; border-left: 0; border-top: 1.5px solid var(--lacivert); min-height: 0; padding: 12px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .yol-parca:first-child { border-top: 0; }
  .yol-parca small { margin: 0; }
  .yol-parca::after { top: 0; bottom: 0; right: auto; width: 4px; height: auto; transform: scaleY(0); transform-origin: top; }
  .yol-parca[aria-selected="true"]::after { transform: scaleY(1); }
  .yol-cetvel, .yol-isaret { display: none; }
  .yol-panel { grid-template-columns: 1fr; margin-top: 24px; }
}

/* ---------- Form öğeleri ---------- */
input[type="text"], input[type="tel"], input[type="date"], input[type="number"], input[type="search"], input[type="password"], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; background: #fff; border: 1.5px solid #cfc6b6; border-radius: 3px;
  transition: border-color .2s, box-shadow .2s; font-size: 1rem;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230c215c' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lacivert); box-shadow: 0 0 0 3px rgba(12, 33, 92, .14); }
.alan { margin-bottom: 18px; }
.alan > label, .alan > .etiket { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 7px; color: var(--murekkep); }
.alan small.ipucu { display: block; color: var(--gri); font-size: .85rem; margin-top: 6px; }
.alan.hatali input, .alan.hatali select, .alan.hatali textarea { border-color: var(--hata); }
.hata-yazi { display: none; color: var(--hata); font-size: .86rem; margin-top: 6px; font-weight: 500; }
.alan.hatali .hata-yazi { display: block; animation: sars .35s; }
@keyframes sars { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.iki-alan { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 600px) { .iki-alan { grid-template-columns: 1fr; } }
.secim-grup { display: flex; flex-wrap: wrap; gap: 8px; }
.secim-grup label { position: relative; cursor: pointer; }
.secim-grup input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.secim-grup span { display: inline-block; padding: 10px 15px; border: 1.5px solid #cfc6b6; border-radius: 3px; background: #fff; font-weight: 500; transition: border-color .2s, background .2s, color .2s; }
.secim-grup input:checked + span { border-color: var(--lacivert); background: var(--lacivert); color: #fff; }
.secim-grup input:focus-visible + span { outline: 3px solid var(--turuncu); outline-offset: 2px; }
.onay { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.5; cursor: pointer; }
.onay input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lacivert); flex: none; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- İç sayfa kapağı ---------- */
.kapak { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--cizgi); }
.kapak-ic { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.kapak-fotolu .kapak-ic { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.yol-izi { font-size: .88rem; color: var(--gri); margin-bottom: clamp(24px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 6px; }
.yol-izi a { color: var(--gri); text-decoration: none; }
.yol-izi a:hover { color: var(--lacivert); text-decoration: underline; }
.yol-izi [aria-current] { color: var(--murekkep); font-weight: 500; }
.kapak-baslik { max-width: 18ch; }
.kapak-giris { font-size: 1.16rem; color: #3b4357; max-width: 56ch; margin-bottom: 0; }
.kapak-foto { margin: 0; }
.kapak-foto .foto-perde { aspect-ratio: 4 / 3.3; }
.js .kapak-foto .foto-perde { animation: perde 1.1s .1s var(--ease) both; }
.js .kapak-foto img { animation: yakin 1.8s .1s var(--ease) both; }
.js .kapak-yazi > * { animation: belir .7s var(--ease) both; }
.js .kapak-yazi > :nth-child(2) { animation-delay: .06s; }
.js .kapak-yazi > :nth-child(3) { animation-delay: .12s; }
.js .kapak-yazi > :nth-child(4) { animation-delay: .18s; }
.js .kapak-yazi > :nth-child(5) { animation-delay: .24s; }
@media (max-width: 860px) { .kapak-fotolu .kapak-ic { grid-template-columns: 1fr; } }
.kunye-kart { background: var(--lacivert); color: #dfe5f4; border-radius: 6px; padding: 28px 30px 24px; position: relative; overflow: hidden; }
.kunye-kart img { position: absolute; right: -36px; bottom: -40px; width: 190px; opacity: .08; }
.kunye-kart dl { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; margin: 0; position: relative; }
.kunye-kart dt, .kunye-kart dd { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); margin: 0; }
.kunye-kart dt { color: #8f9cc4; font-size: .9rem; }
.kunye-kart dd { color: #fff; font-weight: 600; text-align: right; }
.kunye-kart dd a { color: #fff; text-decoration: none; }
.kunye-kart dd a:hover { color: #ffb48e; }
.kunye-kart p { margin: 18px 0 0; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.25rem; color: #ffb48e; position: relative; }
.js .kunye-kart { animation: belir .8s .2s var(--ease) both; }

/* ---------- Listeler ---------- */
.ozellik-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--cizgi); }
.ozellik-liste li { padding: 22px 0 22px 0; border-bottom: 1px solid var(--cizgi); display: grid; grid-template-columns: 30px 1fr; gap: 0 14px; }
.ozellik-liste li::before { content: ""; width: 12px; height: 12px; margin-top: 8px; border: 2px solid var(--turuncu); border-radius: 50%; }
.ozellik-liste h3 { font-size: 1.18rem; margin-bottom: 4px; grid-column: 2; }
.ozellik-liste p { margin: 0; color: var(--gri); grid-column: 2; }
@media (max-width: 760px) { .ozellik-liste { grid-template-columns: 1fr; } }
.bolum-koyu .ozellik-liste, .bolum-koyu .ozellik-liste li { border-color: rgba(255, 255, 255, .16); }
.bolum-koyu .ozellik-liste p { color: #c3cbe2; }

.isaret-liste li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--cizgi); }
.isaret-liste li:last-child { border-bottom: 0; }
.isaret-liste li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 14px; height: 8px; border-left: 2px solid var(--turuncu); border-bottom: 2px solid var(--turuncu); transform: rotate(-45deg); }

/* ---------- Ana sayfa: okulumuzdan ---------- */
.kareler { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: auto auto; gap: 18px; }
.kareler figure { margin: 0; }
.kareler .k1 { grid-row: span 2; }
.kareler .k1 .foto-perde { aspect-ratio: 3 / 4; }
.kareler .k2 .foto-perde, .kareler .k3 .foto-perde { aspect-ratio: 4 / 3.2; }
.kareler .k-metin { grid-column: span 2; align-self: end; padding: 8px 0 0; }
.kareler .k-metin p { color: var(--gri); max-width: 52ch; }
@media (max-width: 860px) {
  .kareler { grid-template-columns: 1fr 1fr; }
  .kareler .k1 { grid-column: span 2; grid-row: auto; }
  .kareler .k1 .foto-perde { aspect-ratio: 4 / 3.4; }
  .kareler .k-metin { grid-column: span 2; }
}

/* Duyuru satırları */
.duyuru-satirlar { border-top: 1px solid var(--cizgi); }
.duyuru-satir { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--cizgi); text-decoration: none; transition: padding .3s var(--ease), background .3s; }
.duyuru-satir:hover { padding-left: 12px; background: linear-gradient(90deg, var(--kagit-2), transparent 70%); }
.duyuru-satir time { color: var(--gri); font-size: .92rem; }
.duyuru-satir h3 { margin: 0; font-size: 1.22rem; }
.duyuru-satir .etiket-kucuk { font-size: .82rem; color: var(--turuncu-koyu); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .duyuru-satir { grid-template-columns: 1fr; gap: 4px; } }

/* Çağrı bandı */
.cagri { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 64px; align-items: center; }
.cagri h2 { margin-bottom: 14px; }
.cagri p { color: #c3cbe2; margin: 0; max-width: 52ch; }
.cagri-eylem { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cagri-eylem .tel-buyuk { font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; color: #fff; text-decoration: none; font-weight: 600; }
.cagri-eylem .tel-buyuk:hover { color: #ffb48e; }
.cagri-eylem .dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.bolum-koyu .dugme-cizgi { color: #fff; }
.bolum-koyu .dugme-cizgi:hover { background: #fff; color: var(--lacivert); border-color: #fff; }
@media (max-width: 860px) { .cagri { grid-template-columns: 1fr; } }

/* ---------- Kurumumuz ---------- */
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.iki-sutun figure { margin: 0; }
.iki-sutun .foto-perde { aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .iki-sutun { grid-template-columns: 1fr; } }
.ilke { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px 64px; padding: 34px 0; border-top: 1px solid var(--cizgi); }
.ilke:last-child { border-bottom: 1px solid var(--cizgi); }
.ilke h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.ilke p { margin: 0; color: #3b4357; font-size: 1.08rem; }
@media (max-width: 760px) { .ilke { grid-template-columns: 1fr; } }
.zaman { position: relative; padding-left: 34px; }
.zaman::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--cizgi); }
.js .zaman.foto-ac::after { content: ""; position: absolute; left: 7px; top: 8px; width: 2px; height: 0; background: var(--turuncu); transition: height 1.6s var(--ease); }
.js .zaman.foto-ac.gorundu::after { height: calc(100% - 16px); }
.zaman li { position: relative; padding: 0 0 26px; }
.zaman li::before { content: ""; position: absolute; left: -33px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--kagit); border: 2px solid var(--turuncu); z-index: 1; }
.zaman time { font-weight: 600; color: var(--turuncu-koyu); font-size: .92rem; }
.zaman h3 { margin: 2px 0 4px; font-size: 1.18rem; }
.zaman p { margin: 0; color: var(--gri); }
.deger-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid #fff3; }
.deger-liste li { padding: 26px 24px 4px 0; }
.deger-liste li + li { padding-left: 24px; border-left: 1px solid #fff3; }
.deger-liste b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; font-weight: 500; color: #fff; margin-bottom: 8px; }
.deger-liste p { color: #c3cbe2; margin: 0; }
@media (max-width: 760px) { .deger-liste { grid-template-columns: 1fr; } .deger-liste li + li { padding-left: 0; border-left: 0; border-top: 1px solid #fff3; } }

/* ---------- Okullarımız ---------- */
.kademe-blok { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--cizgi); }
.kademe-blok:nth-child(even) figure { order: 2; }
.kademe-blok figure { margin: 0; }
.kademe-blok .foto-perde { aspect-ratio: 4 / 3; }
.kademe-blok .yol-yas { margin-bottom: 4px; }
.kademe-blok h2 { margin-bottom: 6px; }
.kademe-blok .isaret-liste { margin: 18px 0 22px; }
@media (max-width: 860px) { .kademe-blok { grid-template-columns: 1fr; } .kademe-blok:nth-child(even) figure { order: 0; } }
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--beyaz); }
.tablo { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .97rem; }
.tablo th, .tablo td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo thead th { font-size: .85rem; color: var(--gri); font-weight: 600; background: var(--kagit); }
.tablo tbody th { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--lacivert); font-size: 1.08rem; white-space: nowrap; }
.tablo tr:last-child > * { border-bottom: 0; }
.tablo tbody tr { transition: background .2s; }
.tablo tbody tr:hover { background: var(--kagit); }

/* ---------- Kademe sayfaları ---------- */
.yan-yana { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .yan-yana { grid-template-columns: 1fr; } }
.not-kutu { background: var(--beyaz); border: 1px solid var(--cizgi); border-left: 4px solid var(--turuncu); border-radius: 4px; padding: 20px 22px; }
.not-kutu h3 { font-size: 1.15rem; margin-bottom: 6px; }
.not-kutu p:last-child { margin-bottom: 0; }
.alinti { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.25; color: var(--lacivert); font-weight: 500; font-style: italic; margin: 0; max-width: 26ch; }
.alinti::before { content: "“"; color: var(--turuncu); }
.alinti::after { content: "”"; color: var(--turuncu); }
.diger-kademeler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.diger-kademeler a { display: block; padding: 20px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 5px; text-decoration: none; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.diger-kademeler a:hover { border-color: var(--lacivert); transform: translateY(-3px); box-shadow: var(--golge); }
.diger-kademeler a[aria-current] { border-color: var(--turuncu); }
.diger-kademeler b { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--lacivert); font-size: 1.15rem; }
.diger-kademeler span { color: var(--gri); font-size: .9rem; }
@media (max-width: 860px) { .diger-kademeler { grid-template-columns: 1fr 1fr; } }

/* Net hesaplama */
.net { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 6px; padding: 8px 22px 18px; }
.net-bas, .net-satir { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px 70px; gap: 6px 12px; align-items: center; }
.net-bas { font-size: .8rem; color: var(--gri); font-weight: 600; padding: 10px 0 8px; border-bottom: 1px solid var(--cizgi); }
.net-bas span:not(:first-child) { text-align: center; }
.net-satir { padding: 10px 0; border-bottom: 1px solid var(--cizgi); position: relative; }
.net-ders { font-weight: 600; font-size: .98rem; line-height: 1.25; }
.net-ders small { display: block; font-weight: 400; color: var(--gri); font-size: .8rem; }
.net-satir input { min-height: 42px; padding: 8px; text-align: center; }
.net-deger { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.2rem; color: var(--lacivert); text-align: center; font-variant-numeric: tabular-nums; }
.net-cubuk { grid-column: 1 / -1; height: 4px; background: var(--kagit-2); border-radius: 2px; overflow: hidden; }
.net-cubuk i { display: block; height: 100%; width: 0; background: var(--turuncu); border-radius: 2px; transition: width .6s var(--ease); }
.net-uyari { grid-column: 1 / -1; color: var(--hata); font-size: .84rem; }
.net-uyari:empty { display: none; }
.net-toplam { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 6px; }
.net-toplam span { font-weight: 600; }
.net-toplam small { display: block; font-weight: 400; color: var(--gri); font-size: .84rem; }
.net-toplam output { font-family: "Fraunces", Georgia, serif; font-size: 2.6rem; font-weight: 600; color: var(--lacivert); line-height: 1; font-variant-numeric: tabular-nums; }
.net-sifirla { font-size: .92rem; }
@media (max-width: 480px) { .net { padding: 6px 14px 14px; } .net-bas, .net-satir { grid-template-columns: minmax(0, 1fr) 62px 62px 52px; gap: 6px 8px; } }

/* SSS */
.sss { border-top: 1px solid var(--cizgi); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-weight: 600; font-size: 1.08rem; color: var(--lacivert); }
.sss summary::-webkit-details-marker { display: none; }
.sss summary:hover { color: var(--turuncu-koyu); }
.sss-arti { position: relative; width: 16px; height: 16px; flex: none; }
.sss-arti::before, .sss-arti::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; transition: transform .35s var(--ease); }
.sss-arti::after { transform: rotate(90deg); }
.sss details[open] .sss-arti::after { transform: rotate(0); }
.sss details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.sss details[open]::details-content { block-size: auto; }
.sss-cevap { padding: 0 40px 20px 0; color: #3b4357; }
.sss-cevap p { margin: 0; }

/* ---------- Okul hayatı: galeri ---------- */
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.suzgec button { border: 1.5px solid var(--cizgi); background: transparent; padding: 9px 15px; border-radius: 3px; cursor: pointer; font-weight: 500; transition: border-color .2s, background .2s, color .2s; }
.suzgec button:hover { border-color: var(--lacivert); }
.suzgec button[aria-pressed="true"] { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.suzgec button small { color: inherit; opacity: .65; margin-left: 4px; }
.galeri { columns: 3 260px; column-gap: 18px; }
.galeri-oge { break-inside: avoid; margin: 0 0 18px; }
.galeri-oge button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.galeri-oge .foto-perde { position: relative; display: block; }
.galeri-oge img { transition: transform .7s var(--ease), filter .4s; }
.galeri-oge button:hover img { transform: scale(1.04); }
.galeri-oge figcaption b { display: block; color: var(--murekkep); font-weight: 600; font-size: .98rem; }
.galeri-oge.gizlendi { display: none; }
.galeri-oge.belirdi { animation: belir .5s var(--ease) both; }
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: 1fr auto; background: rgba(9, 18, 44, 0); transition: background .35s; }
.lightbox.acik { background: rgba(9, 18, 44, .94); }
.lightbox-sahne { position: relative; display: grid; place-items: center; padding: 24px 72px 0; min-height: 0; }
.lightbox-sahne img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 3px; transform-origin: 0 0; }
.lightbox-alt { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px 22px; color: #dfe5f4; opacity: 0; transition: opacity .3s .15s; }
.lightbox.acik .lightbox-alt { opacity: 1; }
.lightbox-alt b { color: #fff; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.15rem; }
.lightbox-alt span { display: block; font-size: .92rem; color: #c3cbe2; }
.lightbox-sayac { font-variant-numeric: tabular-nums; font-size: .9rem; color: #c3cbe2; }
.lb-dugme { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.3rem; cursor: pointer; transition: background .2s, border-color .2s; opacity: 0; }
.lightbox.acik .lb-dugme { opacity: 1; transition: opacity .3s .15s, background .2s; }
.lb-dugme:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.lb-onceki { left: 14px; }
.lb-sonraki { right: 14px; }
.lb-kapat { top: 18px; margin-top: 0; right: 14px; }
@media (max-width: 640px) { .lightbox-sahne { padding: 64px 12px 0; } .lb-onceki, .lb-sonraki { top: auto; bottom: -58px; } .lb-onceki { left: auto; right: 72px; } }

.hareket-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.hareket-liste li { padding: 22px 0; border-top: 2px solid var(--lacivert); }
.hareket-liste h3 { font-size: 1.2rem; margin-bottom: 6px; }
.hareket-liste p { color: var(--gri); margin: 0 0 10px; }
.hareket-liste .beceri { font-size: .88rem; color: var(--lacivert); font-weight: 500; }
@media (max-width: 860px) { .hareket-liste { grid-template-columns: 1fr; } }

/* ---------- Duyurular ---------- */
.duyuru-ara { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.duyuru-ara .suzgec { margin: 0; }
.duyuru-ara input { max-width: 300px; }
.duyuru-sayac { color: var(--gri); font-size: .92rem; margin: 0 0 8px; }
.duyuru-kart { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--cizgi); }
.duyuru-kart:last-child { border-bottom: 1px solid var(--cizgi); }
.duyuru-kart .kart-foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--kagit-2); }
.duyuru-kart .kart-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.duyuru-kart:hover .kart-foto img { transform: scale(1.05); }
.duyuru-kart .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; color: var(--gri); margin-bottom: 6px; }
.duyuru-kart .meta b { color: var(--turuncu-koyu); font-weight: 600; }
.duyuru-kart h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin-bottom: 8px; }
.duyuru-kart p { color: #3b4357; margin-bottom: 10px; max-width: 68ch; }
.duyuru-kart.gizlendi { display: none; }
.duyuru-kart.belirdi { animation: belir .45s var(--ease) both; }
.bos-sonuc { padding: 40px 0; color: var(--gri); }
@media (max-width: 600px) { .duyuru-kart { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } }

/* ---------- Kayıt ---------- */
.adimlar-yazi { counter-reset: adim; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.adimlar-yazi li { counter-increment: adim; padding: 22px 0 0; border-top: 2px solid var(--lacivert); }
.adimlar-yazi li::before { content: counter(adim); display: block; font-family: "Fraunces", Georgia, serif; font-size: 2.6rem; line-height: 1; color: var(--turuncu); font-weight: 500; margin-bottom: 10px; }
.adimlar-yazi h3 { font-size: 1.2rem; margin-bottom: 6px; }
.adimlar-yazi p { color: var(--gri); margin: 0; }
@media (max-width: 760px) { .adimlar-yazi { grid-template-columns: 1fr; gap: 24px; } }

.form-kart { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 6px; padding: clamp(20px, 3.5vw, 40px); position: relative; overflow: hidden; }
.ilerleme { display: flex; gap: 6px; margin-bottom: 28px; }
.ilerleme li { flex: 1; font-size: .84rem; color: var(--gri); font-weight: 600; }
.ilerleme li::before { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--kagit-2); margin-bottom: 8px; background-image: linear-gradient(var(--turuncu), var(--turuncu)); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .5s var(--ease); }
.ilerleme li.tamam::before, .ilerleme li.simdi::before { background-size: 100% 100%; }
.ilerleme li.simdi { color: var(--lacivert); }
.adim { border: 0; padding: 0; margin: 0; min-width: 0; }
.adim legend { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.5rem; color: var(--lacivert); margin-bottom: 18px; padding: 0; }
.js .adim:not(.etkin) { display: none; }
.adim.ileri { animation: adim-ileri .45s var(--ease) both; }
.adim.geri { animation: adim-geri .45s var(--ease) both; }
@keyframes adim-ileri { from { opacity: 0; transform: translateX(28px); } }
@keyframes adim-geri { from { opacity: 0; transform: translateX(-28px); } }
.form-gezinti { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--cizgi); }
.form-gezinti .sag { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.kademe-oneri { display: none; margin-top: 8px; padding: 10px 12px; border-radius: 3px; background: var(--turuncu-acik); color: #6b2a0c; font-size: .92rem; }
.kademe-oneri.var { display: block; animation: belir .4s var(--ease) both; }
.ozet-liste { display: grid; grid-template-columns: 160px 1fr; gap: 0; border-top: 1px solid var(--cizgi); margin-bottom: 20px; }
.ozet-liste dt, .ozet-liste dd { padding: 10px 0; border-bottom: 1px solid var(--cizgi); margin: 0; }
.ozet-liste dt { color: var(--gri); font-size: .92rem; }
.ozet-liste dd { font-weight: 600; }
.basari { text-align: left; }
.basari .tik { width: 64px; height: 64px; margin-bottom: 18px; }
.basari .tik circle { fill: none; stroke: var(--turuncu); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ciz .7s var(--ease) forwards; }
.basari .tik path { fill: none; stroke: var(--lacivert); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ciz .45s .55s var(--ease) forwards; }
.yan-bilgi h3 { font-size: 1.2rem; }
.yan-bilgi .not-kutu + .not-kutu { margin-top: 16px; }

/* ---------- İletişim ---------- */
.iletisim-izgara { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .iletisim-izgara { grid-template-columns: 1fr; } }
.iletisim-bilgi dl { margin: 0 0 24px; }
.iletisim-bilgi dt { font-size: .86rem; font-weight: 600; color: var(--gri); margin-top: 22px; }
.iletisim-bilgi dd { margin: 4px 0 0; font-size: 1.12rem; }
.iletisim-bilgi dd a { color: var(--lacivert); font-weight: 600; text-decoration: none; }
.iletisim-bilgi dd a:hover { text-decoration: underline; text-decoration-color: var(--turuncu); }
.iletisim-bilgi .tel-satir { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.kopyala { margin-left: 10px; font-size: .86rem; }
.harita { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--lacivert); color: #fff; margin-top: clamp(40px, 5vw, 64px); }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.harita-kapak { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; padding: 24px; background:
  linear-gradient(rgba(12, 33, 92, .78), rgba(12, 33, 92, .88)), url(../img/okul-onu-yatay-640.jpg) center / cover; }
.harita-kapak p { margin: 0; max-width: 46ch; color: #dfe5f4; font-size: .95rem; }
.harita-kapak b { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 600; }
@media (max-width: 600px) { .harita { aspect-ratio: 4 / 5; } }

/* ---------- Giriş ---------- */
.giris-sayfa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 6vw, 96px); align-items: start; padding: clamp(32px, 5vw, 72px) 0 clamp(64px, 8vw, 110px); }
@media (max-width: 860px) { .giris-sayfa { grid-template-columns: 1fr; } }
.rol-sekme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--lacivert); border-radius: 4px; overflow: hidden; margin-bottom: 24px; position: relative; }
.rol-sekme button { position: relative; z-index: 1; border: 0; background: transparent; padding: 11px 6px; font-weight: 600; font-size: .92rem; cursor: pointer; color: var(--lacivert); transition: color .3s; }
.rol-sekme button[aria-selected="true"] { color: #fff; }
.rol-kaydirac { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 25%; background: var(--lacivert); transition: transform .4s var(--ease); }
.giris-not { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 4px; background: var(--turuncu-acik); color: #5c240a; font-size: .95rem; line-height: 1.5; }
.giris-not.var { display: block; animation: belir .4s var(--ease) both; }
.sifre-alan { position: relative; }
.sifre-alan input { padding-right: 84px; }
.sifre-goster { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--lacivert); font-weight: 600; font-size: .88rem; padding: 8px 10px; cursor: pointer; }
.rol-aciklama { min-height: 3.2em; color: var(--gri); }
.rol-ozellik { margin-top: 22px; }

/* ---------- Metin sayfası (KVKK) ---------- */
.yazi { max-width: 74ch; }
.yazi h2 { font-size: 1.5rem; margin-top: 1.6em; }
.yazi ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.yazi li { margin-bottom: .35em; }

/* ---------- Alt kısım ---------- */
.alt { background: #0a1b4c; color: #c3cbe2; padding: clamp(56px, 7vw, 88px) 0 0; font-size: .97rem; }
.alt h2 { font-family: "Figtree", system-ui, sans-serif; font-size: .86rem; font-weight: 600; letter-spacing: .02em; color: #8f9cc4; margin: 0 0 14px; }
.alt a { text-decoration: none; color: #fff; }
.alt a:hover { text-decoration: underline; text-decoration-color: var(--turuncu); text-underline-offset: 4px; }
.alt-izgara { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.alt-marka img { width: 52px; margin-bottom: 18px; }
.alt-marka b { display: block; color: #fff; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.25rem; margin-bottom: 4px; }
.alt-motto { font-family: "Fraunces", Georgia, serif; font-style: italic; color: #ffb48e; }
.alt address span { color: #8f9cc4; font-size: .9rem; }
.alt-bag { display: inline-block; margin-top: 12px; font-weight: 600; }
.alt-liste li { padding: 3px 0; }
.alt-iki { columns: 2; column-gap: 20px; }
.alt-son { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .86rem; color: #8f9cc4; }
.alt-son a { color: #c3cbe2; }
.alt-imza { margin-left: auto; }
@media (max-width: 960px) { .alt-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .alt-izgara { grid-template-columns: 1fr; } .alt-imza { margin-left: 0; } }

/* ---------- Bildirim ---------- */
.bildirim-alani { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 10px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.bildirim { pointer-events: auto; background: var(--lacivert); color: #fff; padding: 14px 18px; border-radius: 4px; box-shadow: 0 16px 40px -12px rgba(9, 18, 44, .5); font-size: .95rem; line-height: 1.45; border-left: 4px solid var(--turuncu); animation: bildirim-gir .45s var(--ease) both; }
.bildirim.cikiyor { animation: bildirim-cik .3s ease-in both; }
@keyframes bildirim-gir { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes bildirim-cik { to { opacity: 0; transform: translateY(10px); } }

/* ---------- 404 ---------- */
.yok { padding: clamp(64px, 10vw, 140px) 0; }
.yok h1 { max-width: 16ch; }

/* ---------- Sayfa geçişi (destekleyen tarayıcılarda) ---------- */
@view-transition { navigation: auto; }
main { view-transition-name: icerik; }
::view-transition-old(icerik) { animation: 160ms ease-in both sayfa-cik; }
::view-transition-new(icerik) { animation: 460ms var(--ease) both sayfa-gir; }
@keyframes sayfa-cik { to { opacity: 0; transform: translateY(-6px); } }
@keyframes sayfa-gir { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .foto-ac .foto-perde, .js .foto-ac.foto-perde { clip-path: none; }
  .js .foto-ac .foto-perde img, .js .foto-ac.foto-perde img { transform: none; }
  @view-transition { navigation: none; }
}