/* =========================================================
   Teksen Koleji — On yuz
   Onayli temadan (docs/teksen-koleji-tema/index.html) ayiklandi.
   Inline <style> yerine ayri dosya: tarayici onbellege alabilsin ve
   Content-Security-Policy tek bir kaynaktan yonetilebilsin.
   ========================================================= */

/* ==========================================================================
   TEKSEN KOLEJİ — TEMA
   Renk sistemi mevcut kurumsal kimlikten alındı (turuncu #ee5f01 / lacivert #1a2177)
   ========================================================================== */

:root{
  /* Marka */
  --turuncu:#ee5f01;
  --turuncu-acik:#ee8c01;
  --turuncu-soft:#fff3e9;
  --lacivert:#1a2177;
  --lacivert-koyu:#111541;
  --lacivert-derin:#0a0d2b;
  --mavi:#147cc5;

  /* Nötr */
  --siyah:#12151b;
  --gri-900:#1f2430;
  --gri-600:#5b6474;
  --gri-400:#98a1b0;
  --gri-200:#e4e8ef;
  --gri-100:#f2f5f9;
  --beyaz:#ffffff;

  /* Tipografi */
  --font-baslik:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-metin:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Ölçü */
  --kapsayici:1240px;
  --radius:20px;
  --radius-sm:12px;
  --radius-lg:32px;

  /* Gölge — katmanlı: yakın temas + orta yayılım + uzak derinlik */
  --golge-sm:0 1px 2px rgba(17,21,65,.05), 0 3px 10px rgba(17,21,65,.05);
  --golge:0 2px 4px rgba(17,21,65,.04), 0 10px 26px rgba(17,21,65,.08), 0 22px 48px rgba(17,21,65,.06);
  --golge-lg:0 3px 6px rgba(17,21,65,.05), 0 16px 36px rgba(17,21,65,.10), 0 38px 80px rgba(17,21,65,.12);
  --golge-turuncu:0 10px 26px rgba(238,95,1,.28), 0 2px 6px rgba(238,95,1,.18);

  /* Arka plan desenleri — tek desen dili, marka renklerinin çok soluk tonları */
  --desen-nokta:radial-gradient(circle at 1.2px 1.2px, rgba(26,33,119,.30) 1.3px, transparent 1.9px);
  --desen-nokta-acik:radial-gradient(circle at 1.2px 1.2px, rgba(255,255,255,.24) 1.3px, transparent 1.9px);
  --desen-cizgi:repeating-linear-gradient(135deg, rgba(238,95,1,.17) 0 1.6px, transparent 1.6px 13px);
  --desen-kare:linear-gradient(rgba(26,33,119,.13) 1px, transparent 1px),
               linear-gradient(90deg, rgba(26,33,119,.13) 1px, transparent 1px);
  --desen-halka:repeating-radial-gradient(circle at 86% 10%, rgba(255,255,255,.13) 0 1.2px, transparent 1.2px 46px);

  /* İnce kağıt dokusu — düz yüzeyleri canlandırır */
  --doku:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)'/%3E%3C/svg%3E");

  --gecis:.4s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-metin);
  color:var(--gri-900);
  background:var(--beyaz);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
/* Boyut verilmemis dis-link ikonu asla devasa render olmasin */
svg.dis{width:12px;height:12px;flex-shrink:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--font-baslik);margin:0;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
button{font-family:inherit;cursor:pointer;border:0;background:none}

/* Klavyeyle gezinirken net odak halkası — fareyle tıklayınca görünmez */
:focus-visible{outline:2.5px solid var(--turuncu);outline-offset:3px;border-radius:8px}
.btn:focus-visible,.menu > li > a:focus-visible,.hizli-kart:focus-visible,
.birim:focus-visible,.haber:focus-visible,.duyuru:focus-visible{outline-offset:4px}

.kapsayici{width:100%;max-width:var(--kapsayici);margin-inline:auto;padding-inline:24px}

/* ===== ÜST BAR ===================================================== */
.ustbar{
  background:var(--lacivert-koyu);
  color:rgba(255,255,255,.72);
  font-size:13px;
}
.ustbar .kapsayici{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px}
.ustbar-sol{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ustbar-sol a{display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.ustbar-sol a:hover{color:var(--turuncu-acik)}
.ustbar-sag{display:flex;align-items:center;gap:14px}
.ustbar-sag .sos{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.08);transition:var(--gecis);
}
.ustbar-sag .sos:hover{background:var(--turuncu);transform:translateY(-2px)}
.ustbar-sag .sos svg{width:14px;height:14px;fill:currentColor}
.rozet-plan{
  display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;
  background:rgba(238,95,1,.16);color:var(--turuncu-acik);font-weight:600;font-size:12px;
}

/* ===== NAVİGASYON ================================================== */
.nav{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid rgba(17,21,65,.07);
  transition:box-shadow .3s, background .3s;
}
.nav.sabit{box-shadow:var(--golge-sm);background:#fff}
.nav .kapsayici{
  position:relative;display:flex;align-items:center;gap:18px;
  min-height:100px;padding-left:202px;
  transition:min-height .4s cubic-bezier(.22,1,.36,1), padding-left .4s cubic-bezier(.22,1,.36,1);
}

/* --- Taşan rozet logo: eski sitedeki kurumsal duruş, modern uygulama --- */
.nav-logo{
  position:absolute;left:24px;top:0;width:152px;z-index:3;
  filter:drop-shadow(0 12px 26px rgba(17,21,65,.22));
  transition:width .4s cubic-bezier(.22,1,.36,1), top .4s cubic-bezier(.22,1,.36,1),
             filter .4s, transform .4s cubic-bezier(.22,1,.36,1);
}
.nav-logo img{width:100%;height:auto}
/* Ust baslik kuculunce ikinci logo gorunur. */
.nav-logo .logo-dar{display:none}
.nav.sabit .nav-logo .logo-genis{display:none}
.nav.sabit .nav-logo .logo-dar{display:block}
.nav-logo:hover{transform:scale(1.035)}
/* Masaüstünde rozet tek başına durur — marka adı zaten rozetin içinde */
.nav-logo .logo-yazi{display:none}
.nav.sabit .kapsayici{min-height:84px;padding-left:24px}
/* Sayfa aşağı kaydırılınca: küçük rozet + "Teksen Koleji / SAKARYA" kilidi */
.nav.sabit .nav-logo{
  position:static;top:auto;width:auto;
  display:flex;align-items:center;gap:12px;
  /* Rozet golgesi yalnizca tasan (buyuk) halde anlamli; sabit baslikta
     logonun beyaz zemini basligin beyaziyla birlesmeli. */
  filter:none;
}
.nav.sabit .nav-logo img{width:62px}
.nav.sabit .nav-logo .logo-yazi{display:flex;animation:yaziGir .45s cubic-bezier(.22,1,.36,1) both}
@keyframes yaziGir{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* --- Menü --- */
.menu{display:flex;align-items:center;gap:3px;margin-left:auto}
.menu > li{position:relative}
.menu > li > a{
  position:relative;display:flex;align-items:center;gap:7px;
  padding:11px 15px;border-radius:12px;white-space:nowrap;
  font-family:var(--font-baslik);font-size:15.5px;font-weight:600;letter-spacing:-.015em;
  color:var(--lacivert);transition:var(--gecis);
}
.menu > li > a .ok{
  width:11px;height:11px;fill:currentColor;opacity:.45;flex-shrink:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s;
}
.menu > li > a::after{
  content:'';position:absolute;left:15px;right:15px;bottom:5px;height:2px;
  background:var(--turuncu);border-radius:2px;transform:scaleX(0);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.menu > li:hover > a,
.menu > li:focus-within > a,
.menu > li.acik > a,
.menu > li > a.aktif{color:var(--turuncu);background:var(--turuncu-soft)}
.menu > li:hover > a::after,
.menu > li:focus-within > a::after,
.menu > li.acik > a::after,
.menu > li > a.aktif::after{transform:scaleX(1)}
.menu > li:hover > a .ok,
.menu > li:focus-within > a .ok,
.menu > li.acik > a .ok{transform:rotate(180deg);opacity:1}

/* Portal linkleri (Online Takip / Sınav Takip) — eski sitedeki turuncu vurgu */
.menu > li > a.portal{
  background:var(--turuncu-soft);color:var(--turuncu);
  box-shadow:inset 0 0 0 1.5px rgba(238,95,1,.24);
}
.menu > li > a.portal::after{display:none}
.menu > li:hover > a.portal,
.menu > li:focus-within > a.portal{
  background:linear-gradient(135deg,var(--turuncu) 0%,var(--turuncu-acik) 100%);
  color:#fff;box-shadow:0 8px 20px rgba(238,95,1,.34);transform:translateY(-1px);
}
.menu > li > a.portal .dis{width:11px;height:11px;fill:currentColor;opacity:.6}

/* --- Açılır alt menü --- */
.alt-menu{
  position:absolute;top:calc(100% + 13px);left:-6px;min-width:252px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(17,21,65,.07);border-radius:18px;
  box-shadow:var(--golge-lg);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:top left;
  transition:opacity .28s ease, transform .38s cubic-bezier(.22,1,.36,1), visibility .38s;
}
/* fare boşluktan geçerken menü kapanmasın */
.alt-menu::before{content:'';position:absolute;left:0;right:0;top:-15px;height:15px}
.alt-menu::after{
  content:'';position:absolute;left:28px;top:-6.5px;width:12px;height:12px;
  background:rgba(255,255,255,.97);border-left:1px solid rgba(17,21,65,.07);
  border-top:1px solid rgba(17,21,65,.07);transform:rotate(45deg);border-radius:3px 0 0 0;
}
.menu > li:hover > .alt-menu,
.menu > li:focus-within > .alt-menu,
.menu > li.acik > .alt-menu{opacity:1;visibility:visible;transform:none}

.alt-menu li{opacity:0;transform:translateY(7px);transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1)}
.menu > li:hover > .alt-menu li,
.menu > li:focus-within > .alt-menu li,
.menu > li.acik > .alt-menu li{opacity:1;transform:none}
.alt-menu li:nth-child(1){transition-delay:.04s}
.alt-menu li:nth-child(2){transition-delay:.08s}
.alt-menu li:nth-child(3){transition-delay:.12s}
.alt-menu li:nth-child(4){transition-delay:.16s}
.alt-menu li:nth-child(5){transition-delay:.20s}
.alt-menu li + li{margin-top:2px}
.alt-menu a{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;
  font-family:var(--font-baslik);font-size:14.6px;font-weight:500;letter-spacing:-.01em;
  color:var(--gri-900);transition:var(--gecis);
}
.alt-menu a::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--gri-200);
  flex-shrink:0;transition:var(--gecis);
}
.alt-menu a:hover{background:var(--turuncu-soft);color:var(--turuncu);transform:translateX(4px)}
.alt-menu a:hover::before{background:var(--turuncu);transform:scale(1.5)}
.alt-not{margin-left:auto;font-family:var(--font-metin);font-size:11.5px;font-weight:600;
  color:var(--gri-400);letter-spacing:.02em;transition:var(--gecis)}
.alt-menu a:hover .alt-not{color:var(--turuncu-acik)}

/* ---- Eğitim birimleri menüsü: her öğe kendi tema rengini taşır --------
   Listedeki yuvarlak nokta birim öğelerinde dikey şeride dönüşür; şerit
   durgun hâlde soluk, üzerine gelince tam renk. İçinde bulunulan birim
   şeridi tam görünür ve yazısı kalınlaşır — renk tek ayraç değildir,
   renk körü kullanıcı da hangi birimde olduğunu görür.
   --menu-renk'i şablon basar (Renk::birimPaleti ile doğrulanmış HEX);
   basılmadığında marka turuncusuna düşülür. */
.alt-menu .birim-ogesi a::before{
  width:3px;height:16px;border-radius:2px;
  background:color-mix(in srgb, var(--menu-renk, var(--turuncu)) 35%, transparent);
}
.alt-menu .birim-ogesi a:hover,
.alt-menu .birim-ogesi a:focus-visible{
  background:color-mix(in srgb, var(--menu-renk, var(--turuncu)) 8%, #fff);
  color:var(--menu-metin, var(--turuncu));
}
.alt-menu .birim-ogesi a:hover::before,
.alt-menu .birim-ogesi a:focus-visible::before{
  background:var(--menu-renk, var(--turuncu));transform:scaleY(1.25);
}
.alt-menu .birim-ogesi.etkin a{color:var(--menu-metin, var(--turuncu));font-weight:700}
.alt-menu .birim-ogesi.etkin a::before{background:var(--menu-renk, var(--turuncu))}

.nav-aksiyon{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;font-family:var(--font-baslik);
  font-weight:700;font-size:14.5px;transition:var(--gecis);white-space:nowrap;
}
/* üzerine gelince yüzeyden geçen ışık */
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(108deg,transparent 22%,rgba(255,255,255,.34) 44%,transparent 64%);
  transform:translateX(-130%);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.btn:hover::after{transform:translateX(130%)}
.btn svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.btn-turuncu{
  background:linear-gradient(135deg,var(--turuncu) 0%,var(--turuncu-acik) 100%);
  color:#fff;box-shadow:var(--golge-turuncu);
}
.btn-turuncu:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(238,95,1,.40), 0 3px 8px rgba(238,95,1,.24);
}
.btn-hayalet{background:transparent;color:var(--lacivert);border:1.5px solid var(--gri-200)}
.btn-hayalet:hover{border-color:var(--turuncu);color:var(--turuncu);background:var(--turuncu-soft)}
.btn-beyaz{background:#fff;color:var(--lacivert)}
.btn-beyaz:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}
.btn-cam{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(10px)}
.btn-cam:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}

/* ---- Arama dugmesi ve arama perdesi ------------------------------------
   Dugme header'da; perde tum ekrani karartir, kutu ust ortada durur. */
.arama-dugme{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  color:var(--lacivert);transition:var(--gecis);
}
.arama-dugme svg{width:21px;height:21px;fill:currentColor}
.arama-dugme:hover,
.arama-dugme.acik{background:var(--gri-100);color:var(--turuncu)}
.arama-perdesi{
  position:fixed;inset:0;z-index:1100;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(72px,16vh,150px) 20px 24px;
  background:rgba(10,13,43,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s ease;
}
.arama-perdesi.acik{opacity:1}
/* display:flex tarayicinin [hidden] kuralini ezer; olmasa perde hep acik kalirdi. */
.arama-perdesi[hidden]{display:none}
/* Perde acikken sayfa arkada kaymasin. */
html.arama-acik{overflow:hidden}
.arama-kutu{
  width:100%;max-width:720px;
  transform:translateY(-14px);transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.arama-perdesi.acik .arama-kutu{transform:none}
.arama-perde-form{
  display:flex;align-items:center;gap:12px;
  padding:8px 8px 8px 20px;border-radius:18px;background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.arama-perde-form > svg{width:24px;height:24px;fill:var(--gri-400);flex-shrink:0}
/* 16px'in altindaki yazi boyutunda iOS odaklaninca sayfayi yakinlastirir. */
.arama-perde-form input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:18px;padding:12px 0;color:var(--lacivert);
}
.arama-perde-form input::-webkit-search-cancel-button{display:none}
.arama-ipucu{margin-top:14px;text-align:center;font-size:13.5px;color:rgba(255,255,255,.72)}
.arama-kapat{
  position:absolute;top:18px;right:18px;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.1);transition:var(--gecis);
}
.arama-kapat svg{width:22px;height:22px;fill:currentColor}
.arama-kapat:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}

.hamburger{display:none;width:44px;height:44px;border-radius:12px;background:var(--gri-100);place-items:center}
.hamburger span{display:block;width:20px;height:2px;background:var(--lacivert);border-radius:2px;position:relative;transition:var(--gecis)}
.hamburger span::before,.hamburger span::after{
  content:'';position:absolute;left:0;width:20px;height:2px;background:var(--lacivert);border-radius:2px;transition:var(--gecis);
}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.hamburger.acik span{background:transparent}
.hamburger.acik span::before{top:0;transform:rotate(45deg)}
.hamburger.acik span::after{top:0;transform:rotate(-45deg)}

/* Mobil menü */
.mobil-menu{
  position:fixed;inset:0 0 0 auto;width:min(88vw,380px);z-index:1000;
  background:var(--beyaz);box-shadow:-20px 0 60px rgba(17,21,65,.2);
  transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;padding:26px;overflow-y:auto;
}
.mobil-menu.acik{transform:translateX(0)}
.mobil-menu-ust{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mobil-kapat{width:42px;height:42px;border-radius:12px;background:var(--gri-100);display:grid;place-items:center;font-size:22px;color:var(--lacivert)}

/* Rozet + metin kilidi — mobil menü ve footer için ortak */
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{height:auto}
.logo-yazi{display:flex;flex-direction:column;line-height:1.1}
.logo-yazi b{font-family:var(--font-baslik);font-weight:800;font-size:18px;color:var(--lacivert);letter-spacing:-.02em}
.logo-yazi span{font-size:11px;color:var(--turuncu);font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* Mobil menü: açılır başlıklar */
.mobil-menu nav > ul{display:flex;flex-direction:column;gap:2px}
.mobil-menu .m-link,
.mobil-menu .m-ac{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:14px 16px;border-radius:12px;font-family:var(--font-baslik);
  font-weight:600;font-size:16px;color:var(--lacivert);transition:var(--gecis);text-align:left;
}
.mobil-menu .m-link:hover,
.mobil-menu .m-ac:hover{background:var(--turuncu-soft);color:var(--turuncu)}
.mobil-menu .m-ac svg{width:13px;height:13px;fill:currentColor;opacity:.45;flex-shrink:0;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s}
.mobil-menu li.acik > .m-ac{background:var(--turuncu-soft);color:var(--turuncu)}
.mobil-menu li.acik > .m-ac svg{transform:rotate(180deg);opacity:1}
.mobil-menu .m-portal{color:var(--turuncu)}
.mobil-menu .m-link .dis{width:13px;height:13px;fill:currentColor;opacity:.5;flex-shrink:0}
.mobil-menu .m-portal .dis{opacity:.7}
.mobil-alt{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.22,1,.36,1)}
.mobil-alt ul{padding:4px 0 8px}
.mobil-alt a{
  display:flex;align-items:center;gap:10px;padding:10px 16px 10px 30px;border-radius:10px;
  font-family:var(--font-baslik);font-size:14.6px;font-weight:500;color:var(--gri-600);transition:var(--gecis);
}
.mobil-alt a::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gri-200);flex-shrink:0;transition:var(--gecis)}
.mobil-alt a:hover{background:var(--turuncu-soft);color:var(--turuncu)}
.mobil-alt a:hover::before{background:var(--turuncu);transform:scale(1.5)}
/* Mobil menü header'ın küçük ekran karşılığı: birim renkleri orada da sürer. */
.mobil-alt .birim-ogesi a::before{
  width:3px;height:14px;border-radius:2px;
  background:color-mix(in srgb, var(--menu-renk, var(--turuncu)) 35%, transparent);
}
.mobil-alt .birim-ogesi a:hover,
.mobil-alt .birim-ogesi a:focus-visible{
  background:color-mix(in srgb, var(--menu-renk, var(--turuncu)) 8%, #fff);
  color:var(--menu-metin, var(--turuncu));
}
.mobil-alt .birim-ogesi a:hover::before,
.mobil-alt .birim-ogesi a:focus-visible::before{
  background:var(--menu-renk, var(--turuncu));transform:scaleY(1.2);
}
.mobil-alt .birim-ogesi.etkin a{color:var(--menu-metin, var(--turuncu));font-weight:700}
.mobil-alt .birim-ogesi.etkin a::before{background:var(--menu-renk, var(--turuncu))}
.mobil-menu .btn{margin-top:18px;width:100%}
.perde{
  position:fixed;inset:0;background:rgba(10,13,43,.55);backdrop-filter:blur(4px);
  z-index:999;opacity:0;visibility:hidden;transition:.4s;
}
.perde.acik{opacity:1;visibility:visible}

/* ===== HERO ======================================================== */
.hero{position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:center;overflow:hidden;background:var(--lacivert-derin)}
.hero-arka{position:absolute;inset:0;z-index:0}
.hero-arka img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.06);animation:yavasZoom 22s ease-in-out infinite alternate}
@keyframes yavasZoom{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.hero-arka::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(105deg, rgba(10,13,43,.94) 0%, rgba(10,13,43,.82) 38%, rgba(10,13,43,.38) 68%, rgba(10,13,43,.55) 100%),
    linear-gradient(to top, rgba(10,13,43,.85) 0%, transparent 45%);
}
.hero-parlak{
  position:absolute;width:620px;height:620px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(238,95,1,.42) 0%,transparent 68%);
  filter:blur(70px);right:-140px;top:-160px;animation:suzul 14s ease-in-out infinite alternate;
}
@keyframes suzul{from{transform:translate(0,0)}to{transform:translate(-70px,60px)}}

.hero .kapsayici{position:relative;z-index:2;padding-block:clamp(70px,10vh,120px)}
.hero-icerik{max-width:660px;color:#fff}
.hero-etiket{
  display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);font-size:13.5px;font-weight:600;letter-spacing:.02em;margin-bottom:26px;
}
.hero-etiket .nokta{width:8px;height:8px;border-radius:50%;background:var(--turuncu-acik);box-shadow:0 0 0 0 rgba(238,140,1,.7);animation:nabiz 2.2s infinite}
@keyframes nabiz{70%{box-shadow:0 0 0 12px rgba(238,140,1,0)}100%{box-shadow:0 0 0 0 rgba(238,140,1,0)}}

.hero h1{font-size:clamp(2.1rem,4.8vw,3.7rem);font-weight:800;letter-spacing:-.03em;margin-bottom:20px}
.hero h1 .vurgu{
  background:linear-gradient(120deg,var(--turuncu-acik) 0%,var(--turuncu) 55%,#ffb15c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.giris{font-size:clamp(1.02rem,1.6vw,1.2rem);color:rgba(255,255,255,.82);max-width:540px;margin-bottom:36px}
.hero-butonlar{display:flex;flex-wrap:wrap;gap:14px}

.hero-alt-cizgi{
  position:absolute;left:0;right:0;bottom:0;height:6px;z-index:3;
  background:linear-gradient(90deg,var(--turuncu) 0%,var(--turuncu-acik) 35%,var(--mavi) 70%,var(--lacivert) 100%);
}
.kaydir{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.6);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
}
.kaydir i{display:block;width:1px;height:38px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);animation:inis 2s ease-in-out infinite}
@keyframes inis{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ===== HIZLI ERİŞİM (hero üstüne binen) ============================ */
/* Kartlarin UST kismi hero'nun uzerine biner, ALT kismi Egitim Birimleri
   bolumunun zeminine oturmalidir. Serit kendi zeminini ayni renkle cizer;
   aksi halde ikisinin arasinda beyaz bir bant kaliyordu. */
/* Hizli erisim seridi Egitim Birimleri bolumunun ILK cocugudur: zemini o
   bolumden gelir, boylece hero ile bolum arasinda beyaz bir bant kalmaz.
   Serit, bolumun ust bosluğu KADAR ve bir de --tasma kadar yukari cekilir;
   boylece kartlarin ust kismi hero'nun uzerine biner. Kartlarin hero'nun
   uzerinde gorunmesini DOM sirasi saglar (bolum hero'dan sonra gelir), bu
   yuzden z-index oyununa gerek yok. */
.hizli{
  --tasma:62px;
  /* z-index:5 — hero'nun alt cizgisi (z-index:3) kartlarin uzerinden gecmesin. */
  position:relative;z-index:5;
  margin-top:calc(-1 * (var(--bolum-bosluk) + var(--tasma)));
  /* Kartlarin altindaki bosluk bu degere esittir. */
  margin-bottom:clamp(40px,5vw,56px);
}
.hizli-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hizli-kart{
  border:1px solid transparent;border-radius:var(--radius);padding:24px 22px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(150deg, rgba(17,21,65,.11), rgba(17,21,65,.03) 46%, rgba(238,95,1,.14)) border-box;
  box-shadow:var(--golge);
  display:flex;align-items:center;gap:16px;transition:var(--gecis);position:relative;overflow:hidden;
}
.hizli-kart::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(to bottom,var(--turuncu),var(--turuncu-acik));
  transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.hizli-kart:hover{
  transform:translateY(-6px);box-shadow:var(--golge-lg);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(150deg, rgba(238,95,1,.55), rgba(238,140,1,.28) 52%, rgba(26,33,119,.28)) border-box;
}
.hizli-kart:hover::before{transform:scaleY(1)}
.hizli-ikon{
  width:50px;height:50px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;
  background:var(--turuncu-soft);color:var(--turuncu);transition:var(--gecis);
}
.hizli-ikon svg{width:23px;height:23px;fill:currentColor}
.hizli-kart:hover .hizli-ikon{background:var(--turuncu);color:#fff;transform:rotate(-8deg) scale(1.06)}
.hizli-kart b{display:block;font-family:var(--font-baslik);font-weight:700;font-size:15.5px;color:var(--lacivert)}
.hizli-kart small{color:var(--gri-600);font-size:12.5px}

/* ===== BÖLÜM BAŞLIĞI =============================================== */
/* Bolum bosluğu degiskende: hizli erisim seridi ayni degerle yukari cekiliyor. */
.bolum{--bolum-bosluk:clamp(72px,9vw,80px);padding-block:var(--bolum-bosluk)}
.bolum-basi{max-width:660px;margin-bottom:52px}
.bolum-basi.orta{margin-inline:auto;text-align:center}
.etiket{
  display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 13px;border-radius:999px;
  background:var(--turuncu-soft);color:var(--turuncu);
  box-shadow:inset 0 0 0 1px rgba(238,95,1,.16);
  font-family:var(--font-baslik);font-weight:600;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px;
}
.etiket::before{
  content:'';width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 4px rgba(238,95,1,.14);
}
.bolum-basi h2{
  font-size:clamp(2.1rem,4.4vw,3.35rem);font-weight:800;color:var(--lacivert);
  margin-bottom:18px;letter-spacing:-.035em;line-height:1.05;
}
.bolum-basi p{color:var(--gri-600);font-size:clamp(1rem,1.4vw,1.1rem);max-width:56ch}
.bolum-basi.orta p{margin-inline:auto}

/* ===== EĞİTİM BİRİMLERİ ============================================ */
/* overflow:visible — hizli erisim seridi bolumun ustune tasiyor, kirpilmamali. */
.birimler{
  position:relative;
  background:
    radial-gradient(520px 520px at -6% -14%, rgba(238,95,1,.10), transparent 70%),
    radial-gradient(1150px 540px at 84% -10%, rgba(238,95,1,.055), transparent 62%),
    radial-gradient(920px 500px at 6% 110%, rgba(26,33,119,.055), transparent 60%),
    var(--gri-100);
}
/* ince kağıt dokusu — düz gri yüzeyi canlandırır */
.birimler::after,.haberler::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--doku);background-size:160px;opacity:.35;mix-blend-mode:multiply;
}
/* içerik dokunun üstünde kalsın */
.birimler > .kapsayici{position:relative;z-index:1}
/* nokta ızgarası — üstten aşağı sönümlenir */
.birimler::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--desen-nokta);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(120% 78% at 50% -6%, #000 0%, transparent 74%);
          mask-image:radial-gradient(120% 78% at 50% -6%, #000 0%, transparent 74%);
}
/* --- Dört yapraklı yonca: solda anlatım, sağda dört birim --- */
.birim-duzen{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,5vw,72px);align-items:center}

.yonca{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5px;
  width:min(100%,552px);aspect-ratio:1;margin-inline:auto;
}
.yaprak{
  position:relative;display:block;overflow:hidden;background:var(--lacivert-koyu);
  box-shadow:var(--golge);isolation:isolate;
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1);
}
/* iç köşe sivri (merkeze bakan), dış üç köşe yuvarlak — yaprak formu */
.yaprak:nth-child(1){border-radius:50% 50% 12px 50%}
.yaprak:nth-child(2){border-radius:50% 50% 50% 12px}
.yaprak:nth-child(3){border-radius:50% 12px 50% 50%}
.yaprak:nth-child(4){border-radius:12px 50% 50% 50%}
/* üzerine gelince yaprak merkezden dışa açılır */
.yaprak:nth-child(1):hover{transform:translate(-15px,-15px) scale(1.04)}
.yaprak:nth-child(2):hover{transform:translate( 15px,-15px) scale(1.04)}
.yaprak:nth-child(3):hover{transform:translate(-15px, 15px) scale(1.04)}
.yaprak:nth-child(4):hover{transform:translate( 15px, 15px) scale(1.04)}
.yaprak:hover{box-shadow:var(--golge-lg), 0 0 0 2px rgba(238,95,1,.45);z-index:6}

.yaprak img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.07);transition:transform .85s cubic-bezier(.22,1,.36,1);
}
.yaprak:hover img{transform:scale(1.17)}
.yaprak::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 50% 118%, rgba(10,13,43,.94) 0%, rgba(10,13,43,.55) 45%, transparent 78%),
    linear-gradient(to top, rgba(10,13,43,.55), transparent 60%);
  transition:opacity .5s;
}
.yaprak:hover::after{opacity:.94}

.yaprak-icerik{
  position:absolute;inset:0;z-index:2;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:clamp(18px,3vw,30px);padding-bottom:clamp(26px,4vw,40px);
}
.yaprak-yas{
  display:inline-block;padding:4px 12px;border-radius:999px;margin-bottom:9px;
  font-family:var(--font-baslik);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.yaprak-icerik h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:800;letter-spacing:-.025em}
.yaprak-icerik p{
  font-size:12.8px;line-height:1.5;color:rgba(255,255,255,.82);max-width:24ch;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s ease, opacity .4s ease, margin .4s ease;
}
.yaprak:hover .yaprak-icerik p{max-height:76px;opacity:1;margin-top:8px}
.yaprak-git{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-family:var(--font-baslik);font-weight:700;font-size:12.8px;color:var(--turuncu-acik);
  opacity:0;transform:translateY(8px);transition:var(--gecis);
}
.yaprak:hover .yaprak-git{opacity:1;transform:none}
.yaprak-git svg{width:14px;height:14px;fill:currentColor}

/* merkez madalyon */
.yonca-merkez{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(76px,10.5vw,104px);aspect-ratio:1;border-radius:50%;
  /* Yaprak uzerine gelindiginde z-index:6 aliyor; madalyon HER ZAMAN ustte kalmali. */
  z-index:8;
  background:#fff;display:grid;place-items:center;pointer-events:none;
  box-shadow:0 14px 34px rgba(17,21,65,.20), 0 0 0 9px rgba(255,255,255,.6);
}
.yonca-merkez img{width:66%;height:auto}
.birim:hover .birim-git svg{transform:translateX(4px)}

/* ===== SAYAÇLAR / NEDEN TEKSEN ===================================== */
.neden{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 420px at 96% 6%, rgba(238,95,1,.045), transparent 58%),
    var(--beyaz);
}
/* diyagonal ince çizgiler — sağ üst köşede yoğun, içeri doğru söner */
.neden::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--desen-cizgi);
  -webkit-mask-image:radial-gradient(62% 68% at 100% 0%, #000 0%, transparent 74%);
          mask-image:radial-gradient(62% 68% at 100% 0%, #000 0%, transparent 74%);
}
.neden > .kapsayici{position:relative;z-index:1}
.neden-duzen{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
/* Temada bu iki kural satir ici stil olarak duruyordu; sinifa alindi. */
.neden-baslik{font-size:clamp(1.95rem,3.9vw,3rem);font-weight:800;color:var(--lacivert);margin-bottom:16px}
.neden-giris{color:var(--gri-600);font-size:1.05rem}
/* Sayılar: dört ayrı renkli blok yerine tek panel, dev rakamlar, ince ayraçlar */
.sayac-serit{
  display:grid;grid-template-columns:repeat(2,1fr);
  border:1px solid transparent;border-radius:var(--radius-lg);
  background:
    linear-gradient(158deg,#ffffff 0%,#fdfbf9 100%) padding-box,
    linear-gradient(158deg, rgba(238,95,1,.34), rgba(26,33,119,.20) 70%) border-box;
  box-shadow:var(--golge);
  position:relative;overflow:hidden;
}
.sayac-serit::after{
  content:'';position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(238,95,1,.11) 0%, transparent 68%);pointer-events:none;
}
.sayac{position:relative;padding:32px 28px;transition:background .4s ease}
.sayac:hover{background:rgba(238,95,1,.035)}
/* dikey ayraçlar */
.sayac:nth-child(2)::before,.sayac:nth-child(4)::before{
  content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(17,21,65,.14),transparent);
}
/* yatay ayraçlar */
.sayac:nth-child(3)::after,.sayac:nth-child(4)::after{
  content:'';position:absolute;top:0;left:22%;right:22%;height:1px;
  background:linear-gradient(to right,transparent,rgba(17,21,65,.14),transparent);
}
.sayac b{
  display:block;font-family:var(--font-baslik);font-weight:800;line-height:1;
  font-size:clamp(2.5rem,4.2vw,3.3rem);letter-spacing:-.05em;color:var(--turuncu);
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .sayac b{
    background:linear-gradient(142deg,var(--turuncu) 0%,var(--turuncu-acik) 48%,var(--lacivert) 128%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.sayac span{
  display:block;margin-top:11px;font-size:13.2px;line-height:1.45;
  color:var(--gri-600);font-weight:500;
}

.ozellik-liste{display:flex;flex-direction:column;gap:22px;margin-top:34px}
.ozellik{display:flex;gap:18px;align-items:flex-start}
.ozellik-ikon{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:var(--turuncu-soft);color:var(--turuncu);
}
.ozellik-ikon svg{width:21px;height:21px;fill:currentColor}
.ozellik b{display:block;font-family:var(--font-baslik);font-weight:700;font-size:16.5px;color:var(--lacivert);margin-bottom:4px}
.ozellik p{color:var(--gri-600);font-size:14.5px}

/* ===== BURSLULUK ŞERİDİ ============================================ */
.burs{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(125deg,var(--lacivert-derin) 0%,var(--lacivert) 55%,#2a1d6b 100%);
}
.burs::before{
  content:'';position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(238,95,1,.34) 0%,transparent 68%);filter:blur(50px);
}
/* konsantrik halkalar — turuncu ışığın merkezinden yayılır */
.burs::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:var(--desen-halka);
  -webkit-mask-image:radial-gradient(78% 96% at 86% 10%, #000 0%, transparent 76%);
          mask-image:radial-gradient(78% 96% at 86% 10%, #000 0%, transparent 76%);
}
.burs-duzen{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.burs .etiket{background:rgba(238,95,1,.2);color:var(--turuncu-acik)}
.burs h2{font-size:clamp(1.95rem,3.7vw,2.9rem);font-weight:800;margin-bottom:18px}
.burs p{color:rgba(255,255,255,.78);font-size:1.05rem;margin-bottom:30px;max-width:480px}
.burs-liste{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.burs-liste li{display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.9)}
.burs-liste svg{width:20px;height:20px;fill:var(--turuncu-acik);flex-shrink:0}
.burs-gorsel{position:relative}
.burs-gorsel img{
  border-radius:var(--radius-lg);box-shadow:0 34px 80px rgba(0,0,0,.45);
  transform:rotate(2.2deg);transition:var(--gecis);
}
.burs-gorsel:hover img{transform:rotate(0deg) scale(1.02)}
.burs-rozet{
  position:absolute;left:-26px;bottom:34px;background:#fff;color:var(--lacivert);
  border-radius:18px;padding:16px 22px;box-shadow:var(--golge-lg);text-align:center;
}
.burs-rozet b{display:block;font-family:var(--font-baslik);font-size:1.5rem;font-weight:800;color:var(--turuncu);line-height:1}
.burs-rozet span{font-size:11.5px;color:var(--gri-600);font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* ===== HABERLER ==================================================== */
.haberler{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1000px 480px at 10% -8%, rgba(26,33,119,.06), transparent 60%),
    radial-gradient(900px 460px at 92% 104%, rgba(238,95,1,.05), transparent 62%),
    var(--gri-100);
}
.haberler > .kapsayici{position:relative;z-index:1}
/* ayna: nokta ızgarası alttan yukarı sönümlenir */
.haberler::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--desen-nokta);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(120% 76% at 50% 106%, #000 0%, transparent 74%);
          mask-image:radial-gradient(120% 76% at 50% 106%, #000 0%, transparent 74%);
}
.bolum-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:48px;flex-wrap:wrap}
.bolum-ust .bolum-basi{margin-bottom:0}
/* Basligi olmayan bolum ustu: solda yalnizca rozet, sagda baglanti.
   flex-end burada yanlis hizalar (rozet kisa, dugme uzun) ve rozetin
   baslik icin konmus alt boslugu onu satirdan yukari iter; ikisi de
   ayni yatay eksene oturtuluyor. */
.bolum-ust.hizali{align-items:center}
.bolum-ust.hizali > .etiket{margin-bottom:0}

.haber-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-auto-rows:minmax(0,auto);gap:24px}
.haber{
  background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--golge-sm);transition:var(--gecis);height:100%;
}
.haber:hover{
  transform:translateY(-8px);
  box-shadow:var(--golge-lg), 0 0 0 1.5px rgba(238,95,1,.30);
}
.haber-foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gri-200)}
.haber-foto img{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.22,1,.36,1)}
.haber:hover .haber-foto img{transform:scale(1.09)}
.haber-tarih{
  position:absolute;left:16px;top:16px;z-index:2;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-radius:12px;padding:8px 14px;text-align:center;box-shadow:var(--golge-sm);
}
.haber-tarih b{display:block;font-family:var(--font-baslik);font-size:1.15rem;font-weight:800;color:var(--turuncu);line-height:1}
.haber-tarih span{font-size:10.5px;color:var(--gri-600);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.haber-govde{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.haber-govde h3{
  font-size:1.13rem;font-weight:700;color:var(--lacivert);margin-bottom:10px;
  transition:color .3s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.haber:hover .haber-govde h3{color:var(--turuncu)}
.haber-govde p{
  color:var(--gri-600);font-size:14.2px;margin-bottom:18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.haber-devam{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-baslik);font-weight:700;font-size:13.5px;color:var(--turuncu);
}
.haber-devam svg{width:15px;height:15px;fill:currentColor;transition:transform .3s}
.haber:hover .haber-devam svg{transform:translateX(5px)}

/* Öne çıkan haber: ilk kart 2 satır kaplar */
.haber.one-cikan{grid-row:span 2}
.haber.one-cikan .haber-foto{aspect-ratio:4/3.4}
.haber.one-cikan .haber-govde{padding:30px}
.haber.one-cikan .haber-govde h3{font-size:1.55rem;-webkit-line-clamp:3}
.haber.one-cikan .haber-govde p{font-size:15px;-webkit-line-clamp:4}
.one-rozet{
  position:absolute;right:16px;top:16px;z-index:2;
  background:linear-gradient(135deg,var(--turuncu),var(--turuncu-acik));color:#fff;
  border-radius:999px;padding:6px 15px;font-family:var(--font-baslik);
  font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(238,95,1,.4);
}

/* ===== DUYURULAR =================================================== */
.duyurular{
  position:relative;overflow:hidden;
  background:
    radial-gradient(700px 400px at 4% 96%, rgba(26,33,119,.04), transparent 58%),
    var(--beyaz);
}
/* kare ızgara — sol alt köşede, takvim/ajanda çağrışımı */
.duyurular::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--desen-kare);background-size:36px 36px;
  -webkit-mask-image:radial-gradient(64% 74% at 0% 100%, #000 0%, transparent 76%);
          mask-image:radial-gradient(64% 74% at 0% 100%, #000 0%, transparent 76%);
}
.duyurular > .kapsayici{position:relative;z-index:1}
.duyuru-duzen{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
/* --- Zaman tüneli --- */
.zaman{position:relative;padding-left:98px}
/* durgun çizgi */
.zaman::before{
  content:'';position:absolute;left:74px;top:18px;bottom:18px;width:2px;border-radius:2px;
  background:rgba(17,21,65,.10);
}
/* kaydırdıkça dolan çizgi */
.zaman::after{
  content:'';position:absolute;left:74px;top:18px;width:2px;border-radius:2px;
  height:var(--dolum,0px);max-height:calc(100% - 36px);
  background:linear-gradient(to bottom,var(--turuncu),var(--turuncu-acik));
  box-shadow:0 0 12px rgba(238,95,1,.35);
}

.zaman-oge{position:relative;padding-bottom:22px}
.zaman-oge:last-child{padding-bottom:0}

/* tarih bloğu — çizginin solunda */
.zaman-tarih{
  position:absolute;left:-98px;top:14px;width:56px;text-align:right;
  font-family:var(--font-baslik);line-height:1;
}
.zaman-tarih b{display:block;font-size:1.65rem;font-weight:800;color:var(--lacivert);letter-spacing:-.05em}
.zaman-tarih span{
  display:block;margin-top:6px;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--turuncu);
}

/* düğüm */
.zaman-oge::before{
  content:'';position:absolute;left:-30px;top:22px;width:13px;height:13px;border-radius:50%;
  background:#fff;z-index:2;
  box-shadow:0 0 0 3px var(--turuncu), 0 0 0 7px rgba(238,95,1,.13);
  transition:box-shadow .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
}
.zaman-oge:hover::before{
  transform:scale(1.15);
  box-shadow:0 0 0 4px var(--turuncu), 0 0 0 11px rgba(238,95,1,.20);
}

.zaman-kart{
  display:flex;gap:16px;align-items:center;padding:15px 17px;border-radius:var(--radius);
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(140deg, rgba(17,21,65,.12), rgba(17,21,65,.04) 60%, rgba(238,95,1,.10)) border-box;
  transition:var(--gecis);
}
.zaman-oge:hover .zaman-kart{
  transform:translateX(9px);box-shadow:var(--golge);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(140deg, rgba(238,95,1,.48), rgba(238,140,1,.20) 58%, rgba(26,33,119,.22)) border-box;
}
.zaman-foto{
  width:78px;height:78px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;
  background:var(--gri-200);
}
.zaman-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.zaman-oge:hover .zaman-foto img{transform:scale(1.12)}
.zaman-yazi{min-width:0}
.zaman-yazi h3{
  font-size:1.02rem;font-weight:700;color:var(--lacivert);margin-bottom:4px;transition:color .3s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.zaman-oge:hover h3{color:var(--turuncu)}
.zaman-yazi p{
  font-size:13.2px;color:var(--gri-600);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ===== FOOTER ====================================================== */
footer{background:var(--lacivert-derin);color:rgba(255,255,255,.7);position:relative;overflow:hidden}
footer::before{
  content:'';position:absolute;left:-160px;bottom:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(238,95,1,.15) 0%,transparent 70%);
}
/* açık nokta ızgarası — sağ üstten sönümlenir */
footer::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--desen-nokta-acik);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(78% 82% at 90% 4%, #000 0%, transparent 76%);
          mask-image:radial-gradient(78% 82% at 90% 4%, #000 0%, transparent 76%);
}
.footer-ust{
  display:grid;grid-template-columns:1.55fr .8fr .9fr .9fr .95fr;gap:20px 34px;
  padding-block:clamp(56px,7vw,84px);position:relative;z-index:2;
}
/* Footer logosu koyu zeminde yuvarlak madalyon olarak durur. */
/* Logo dosyasinin oranindan bagimsiz olarak duzgun bir daire: kare
   olmayan bir gorsele dogrudan border-radius:50% verilince elips cikiyor
   ve koyu zeminde beyaz bir leke gibi duruyordu. */
.footer-marka .logo img{
  width:62px;height:62px;border-radius:50%;
  object-fit:contain;background:#fff;padding:5px;
}
.footer-marka .logo-yazi b{color:#fff}
.footer-marka > p{margin-top:18px;font-size:13.5px;max-width:320px}
/* Iletisim bilgileri marka sutununda, sosyal dugmelerin ustunde durur. */
.footer-marka .footer-iletisim{margin-top:22px;max-width:340px}
.footer-sos{display:flex;gap:10px;margin-top:22px}
.footer-sos a{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#fff;transition:var(--gecis);
}
.footer-sos a svg{width:17px;height:17px;fill:currentColor}
/* Ikon sinifi cizgi stili uretiyor; marka isaretlerinin bazi parcalari
   (Instagram cercevesi, YouTube govdesi) cizgiyle ciziliyor. Footer'da
   dugme kucuk oldugu icin cizgi kalinligi biraz inceltiliyor. */
/* Ikon::svg cizgi ikonu uretir (fill="none"); ustteki fill:currentColor bu
   ozniteligi EZIYORDU — CSS, SVG sunum ozniteliklerinden guclu. Instagram'in
   cercevesi ve YouTube'un dikdortgeni ici dolu beyaz kareye donuyordu.
   Dolgusu olan parcalar (Facebook, oynat ucgeni) kendi fill'ini tasir. */
.footer-sos a .sos-ikon{fill:none;stroke-width:1.6}
.footer-sos a:hover{background:var(--turuncu);transform:translateY(-4px)}
footer h4{
  font-size:15px;font-weight:700;color:#fff;margin-bottom:20px;
  letter-spacing:.02em;position:relative;padding-bottom:12px;
}
footer h4::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2.5px;background:var(--turuncu);border-radius:2px}
/* Footer sutunlari <details>: genis ekranda baslik duz metin gibi durur,
   ok ve imleç yok. Akordeon yalnizca telefonda (720px altı). */
.footer-kol > summary{display:block;list-style:none;cursor:default}
.footer-kol > summary::-webkit-details-marker{display:none}
.footer-kol > summary::marker{content:''}
.footer-ok{display:none}
.footer-menu li{margin-bottom:1px}
.footer-menu a{font-size:13px;transition:var(--gecis);display:inline-flex;align-items:center;gap:7px}
.footer-menu a:hover{color:var(--turuncu-acik);transform:translateX(5px)}
.footer-menu a .dis{width:11px;height:11px;fill:currentColor;opacity:.45;flex-shrink:0}
.footer-menu a:hover .dis{opacity:1}
.footer-iletisim li{display:flex;gap:11px;margin-bottom:12px;font-size:13px;align-items:flex-start}
.footer-iletisim svg{width:18px;height:18px;fill:var(--turuncu);flex-shrink:0;margin-top:3px}
.footer-iletisim a:hover{color:var(--turuncu-acik)}
/* Yasal / KVKK şeridi */
.footer-yasal{
  border-top:1px solid rgba(255,255,255,.09);padding-block:20px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  font-size:13.2px;position:relative;z-index:2;
}
.footer-yasal a{display:inline-flex;align-items:center;gap:7px;transition:var(--gecis)}
.footer-yasal a:hover{color:var(--turuncu-acik)}
.footer-yasal svg{width:13px;height:13px;fill:currentColor;opacity:.5;flex-shrink:0}
.footer-yasal a:hover svg{opacity:1}

.footer-alt{
  display:flex;justify-content:center;text-align:center;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.08);
  font-size:13.5px;color:rgba(255,255,255,.62);position:relative;z-index:2;
}
.footer-alt a:hover{color:var(--turuncu-acik)}

/* ===== WHATSAPP =================================================== */
.whatsapp{
  position:fixed;right:22px;bottom:22px;z-index:800;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:var(--gecis);
}
.whatsapp svg{width:30px;height:30px;fill:#fff}
.whatsapp:hover{transform:scale(1.09) translateY(-3px);box-shadow:0 16px 40px rgba(37,211,102,.6)}
.whatsapp::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;
  animation:halka 2.4s ease-out infinite;
}
@keyframes halka{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* ===== SCROLL ANİMASYONU ========================================== */
.gorun{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.gorun.aktif{opacity:1;transform:none}

/* ===== RESPONSIVE ================================================= */
/* --- Header ölçek basamağı: dar masaüstü --- */
@media (max-width:1300px){
  .nav .kapsayici{padding-left:178px}
  .nav-logo{width:138px;top:0}
  .menu > li > a{font-size:14.6px;padding:10px 12px}
  .menu > li > a::after{left:12px;right:12px}
  .alt-not{display:none}
}

/* --- Yonca: dar ekranda normal kart ızgarasına döner --- */
@media (max-width:980px){
  .birim-duzen{grid-template-columns:1fr;gap:40px}
  .yonca{
    width:100%;aspect-ratio:auto;grid-template-columns:1fr 1fr;gap:18px;
  }
  .yaprak,
  .yaprak:nth-child(1),.yaprak:nth-child(2),
  .yaprak:nth-child(3),.yaprak:nth-child(4){border-radius:var(--radius)}
  .yaprak:nth-child(1):hover,.yaprak:nth-child(2):hover,
  .yaprak:nth-child(3):hover,.yaprak:nth-child(4):hover{transform:translateY(-8px)}
  .yaprak{aspect-ratio:4/5}
  /* kaynak görsellerin üstündeki gömülü başlık bandını kırpar */
  .yaprak img{object-position:center bottom}
  .yaprak-icerik{text-align:left;align-items:flex-start;padding:22px}
  .yaprak-icerik p{max-width:none}
  .yonca-merkez{display:none}
}

/* --- Tablet ve mobil: rozet + "Teksen Koleji / SAKARYA" metni yan yana --- */
@media (max-width:1080px){
  .menu{display:none}
  .hamburger{display:grid}
  /* Masaüstünde düğmeleri sağa .menu'nün margin-left:auto'su itiyor; menü
     gizlenince iten kalmıyor ve hamburger logonun yanına yapışıyordu. */
  .nav-aksiyon{margin-left:auto}
  .nav .kapsayici,
  .nav.sabit .kapsayici{position:static;min-height:82px;padding-left:24px}
  .nav-logo,
  .nav.sabit .nav-logo{
    position:static;width:auto;top:auto;
    display:flex;align-items:center;gap:12px;filter:none;transform:none;
  }
  .nav-logo:hover{transform:none}
  /* Dar baslikta logo belirgin: 50px'te logonun kendisi okunmuyordu. */
  .nav-logo img,
  .nav.sabit .nav-logo img{width:62px}
  .nav-logo .logo-yazi{display:flex;animation:none}
  /* Dar baslikta logo yazisi da buyuk: 720px altindaki genel .logo-yazi
     kurali (16px) footer ve mobil menu icin; header'da logonun yaninda
     kucuk kaliyordu. Secici daha ozgul oldugu icin o kural bunu ezmez. */
  .nav-logo .logo-yazi b{font-size:22px;white-space:nowrap}
  .nav-logo .logo-yazi span{font-size:12px;letter-spacing:.14em}
  /* Dar baslikta her zaman ikinci logo (Ayarlar → Görseller → Logo - 2):
     buyuk madalyon logo bu boyuta kuculunce okunmuyordu. Kaydirilinca
     gecilen sabit baslikla ayni gorunum. */
  .nav-logo .logo-genis{display:none}
  .nav-logo .logo-dar{display:block}
}

@media (max-width:1200px){
  .hizli-grid{grid-template-columns:repeat(2,1fr)}
  .haber-grid{grid-template-columns:repeat(2,1fr)}
  .haber.one-cikan{grid-row:span 1;grid-column:span 2}
  .haber.one-cikan .haber-foto{aspect-ratio:16/8}
  .neden-duzen,.burs-duzen,.duyuru-duzen{grid-template-columns:1fr;gap:44px}
  .footer-ust{grid-template-columns:1fr 1fr 1fr;gap:34px}
  .footer-marka{grid-column:span 3}
}
@media (max-width:900px){
  .footer-ust{grid-template-columns:1fr 1fr;gap:32px}
  .footer-marka{grid-column:span 2}
}
@media (max-width:720px){
  .ustbar-sol .gizle-mobil{display:none}
  .nav .kapsayici,
  .nav.sabit .kapsayici{min-height:76px}
  .nav-logo img,
  .nav.sabit .nav-logo img{width:58px}
  .nav-logo,
  .nav.sabit .nav-logo{gap:10px}
  .logo-yazi b{font-size:16px}
  .logo-yazi span{font-size:10px;letter-spacing:.12em}
  /* Telefonda header'da Ön Kayıt yok: logo ile hamburger arasına sıkışıyordu.
     Düğme hamburger menünün altında duruyor, erişim kaybolmuyor. */
  .nav-aksiyon .btn-turuncu{display:none}
  .arama-perdesi{padding:84px 14px 20px}
  .arama-perde-form{padding:6px 6px 6px 16px;gap:10px}
  .arama-perde-form input{font-size:17px;padding:10px 0}
  .arama-perde-form .btn{padding:10px 16px}
  .arama-kapat{top:14px;right:14px}
  .hizli-grid{grid-template-columns:1fr}
  .hizli{--tasma:40px}
  .yonca{grid-template-columns:1fr;gap:16px}
  .yaprak{aspect-ratio:16/10}
  .haber-grid{grid-template-columns:1fr}
  .haber.one-cikan{grid-column:span 1}
  .sayac{padding:24px 18px}
  .sayac b{font-size:2.05rem}
  .sayac span{font-size:12.4px;margin-top:8px}
  .footer-ust{grid-template-columns:1fr;gap:30px}
  .footer-marka{grid-column:span 1}

  /* Telefonda footer ORTALI; sutunlar akordeon satirlari. Satirlar arasinda
     bosluk yok, ince cizgiyle ayriliyor — acik bir liste degil, dokunulacak
     basliklar gibi durmali. */
  .footer-ust{text-align:center;row-gap:0}
  .footer-marka{margin-bottom:28px}
  .footer-marka .logo,
  .footer-sos{justify-content:center}
  .footer-marka > p,
  .footer-marka .footer-iletisim{margin-inline:auto}
  /* Ikon satir ici: iki satirlik adreste ikon en solda, metin ortada kaliyor
     ve birbirinden kopuyordu. Artik ilk satirin basina yapisik. */
  .footer-iletisim li{display:block;text-align:center}
  .footer-iletisim svg{display:inline-block;vertical-align:-4px;margin:0 7px 0 0}
  .footer-kol{border-top:1px solid rgba(255,255,255,.09)}
  .footer-kol:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
  .footer-kol > summary{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:17px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .footer-kol > summary h4{margin:0;padding:0}
  .footer-kol > summary h4::after{display:none}
  .footer-ok{display:block;width:18px;height:18px;fill:currentColor;opacity:.55;transition:transform .25s ease}
  .footer-kol[open] .footer-ok{transform:rotate(180deg);opacity:.9}
  .footer-kol .footer-menu{padding-bottom:18px}
  .footer-kol .footer-menu li{margin-bottom:4px}
  .footer-kol .footer-menu a{padding-block:4px}
  .footer-kol .footer-menu a:hover{transform:none}
  .footer-yasal{gap:8px 18px;font-size:12.6px}
  .burs-gorsel img{transform:none}
  .burs-rozet{left:16px;bottom:16px}
  .zaman{padding-left:70px}
  .zaman::before,.zaman::after{left:52px}
  .zaman-tarih{left:-70px;width:40px;top:12px}
  .zaman-tarih b{font-size:1.3rem}
  .zaman-tarih span{font-size:9px;letter-spacing:.1em;margin-top:4px}
  .zaman-oge::before{left:-24px;top:19px;width:11px;height:11px}
  .zaman-kart{gap:13px;padding:13px 14px}
  .zaman-foto{width:66px;height:66px}
  .footer-alt{flex-direction:column;text-align:center}
  .bolum-ust{flex-direction:column;align-items:flex-start}
}
/* Cok dar telefonlar (360px gibi): logo yazisi tek satirda kalsin diye
   logo ve yazi bir tik kuculur; 22px'te "Teksen Koleji" ikiye kiriliyordu. */
@media (max-width:374px){
  .nav-logo img,
  .nav.sabit .nav-logo img{width:50px}
  .nav-logo .logo-yazi b{font-size:18.5px}
  .nav-logo .logo-yazi span{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .gorun{opacity:1;transform:none}
}


/* ===== HERO SLAYTLARI ============================================= */
/* Her slayt kendi gorseli, yazisi ve dugmeleriyle panelden yonetilir. Slaytlar
   ust uste durur, etkin olan gorunur. Gecis opaklikla yapilir: yerlesim
   yeniden hesaplanmadigi icin akici kalir.
   Etkin olmayan slayt tiklamalari yutmasin diye pointer-events kapatilir. */
.hero-slaytlar{position:absolute;inset:0;z-index:1}
.hero-slayt{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:0;pointer-events:none;transition:opacity 1.1s ease;
}
.hero-slayt.etkin{opacity:1;pointer-events:auto;z-index:2}
/* Gorseller capraz gecerken YAZILAR ust uste binmesin: cikan yazi hizla
   kaybolur, giren yazi gorsel gecisi bitmeye yakin belirir. */
.hero-slayt .kapsayici{
  position:relative;z-index:2;padding-block:clamp(70px,10vh,120px);width:100%;
  opacity:0;transition:opacity .35s ease;
}
.hero-slayt.etkin .kapsayici{opacity:1;transition:opacity .5s ease .5s}
@media (prefers-reduced-motion: reduce){
  .hero-slayt{transition:none}
}