/* ════════════════════════════════════════
   K12 Maarif – Paylaşılan Stiller (v4)
   Özgün tasarım: Amber + Lacivert paleti
   Altıgen petek düğümlü ilerleme yolu
════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800;900&family=Nunito:wght@600;700;800;900&display=swap');

:root{
  /* Ana palet: amber + lacivert */
  --ana:#F59E0B;          /* amber */
  --ana-koyu:#D97706;
  --ana-golge:#B45309;
  --lacivert:#1E3A5F;     /* koyu lacivert */
  --lacivert-koyu:#152C49;
  --lacivert-acik:#2C5282;

  /* Yardımcı tonlar (sınırlı palet) */
  --camgobegi:#0E7490;    /* petrol mavisi */
  --camgobegi-koyu:#0A5A70;
  --kahve:#92400E;        /* toprak */
  --bakir:#C2641A;        /* bakır */

  --bg:#FDFBF7;           /* krem beyaz */
  --bg2:#F5F0E8;          /* açık bej */
  --kart:#FFFFFF;
  --sinir:#E8E0D0;
  --sinir2:#D5C9B5;
  --yaz:#2D2A24;
  --yaz-koyu:#1C1A15;
  --gri:#A89F8E;
  --gri-koyu:#6E6557;

  --golge:0 4px 18px rgba(146,100,20,.10);
  --r:16px;
  --r-lg:24px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  color:var(--yaz);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ════ HEADER (dar) ════ */
.site-header{
  background:var(--lacivert);
  box-shadow:0 3px 0 var(--lacivert-koyu);
  position:sticky;top:0;z-index:500;
}
.header-inner{
  max-width:1080px;margin:0 auto;
  padding:10px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.logo-icon{
  width:38px;height:38px;background:var(--ana);border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 2px 0 var(--ana-golge);
}
.logo-text h1{font-family:'Baloo 2',cursive;font-size:20px;font-weight:800;color:#fff;line-height:1}
.logo-text span{font-size:10px;color:rgba(255,255,255,.75);font-weight:800;letter-spacing:.3px}
.header-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav-btn{
  background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.30);
  color:#fff;padding:6px 15px;border-radius:50px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;
  cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block;
}
.nav-btn:hover,.nav-btn.aktif{background:var(--ana);border-color:var(--ana);color:#fff}

/* ════ İÇERİK ════ */
.icerik{max-width:1080px;margin:0 auto;padding:22px 16px 70px}

/* ════ BREADCRUMB ════ */
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.breadcrumb a{font-size:13px;font-weight:800;color:var(--camgobegi);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{color:var(--sinir2);font-size:15px}
.breadcrumb .mevcut{font-size:13px;font-weight:800;color:var(--yaz)}

/* ════ GERİ BUTONU ════ */
.geri-btn{
  background:var(--bg2);border:2px solid var(--sinir);color:var(--yaz);
  width:40px;height:40px;border-radius:12px;font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;text-decoration:none;font-weight:900;
  box-shadow:0 2px 0 var(--sinir2);
}
.geri-btn:hover{background:var(--ana);color:#fff;border-color:var(--ana);box-shadow:0 2px 0 var(--ana-golge)}
.geri-btn:active{transform:translateY(2px);box-shadow:none}

/* ════ SAYFA BAŞLIK ════ */
.sayfa-baslik{
  background:var(--kart);border-radius:var(--r-lg);
  padding:18px 22px;box-shadow:var(--golge);
  margin-bottom:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:2px solid var(--sinir);
}
.sayfa-baslik .ikon{font-size:36px;flex-shrink:0}
.sayfa-baslik h2{font-family:'Baloo 2',cursive;font-size:clamp(19px,4vw,24px);font-weight:800;color:var(--yaz-koyu);margin-bottom:2px}
.sayfa-baslik p{font-size:13px;color:var(--gri-koyu);font-weight:700}

/* ════ BÖLÜM BAŞLIKLARI ════ */
.bolum-baslik{font-family:'Baloo 2',cursive;font-size:19px;font-weight:800;color:var(--yaz-koyu);margin-bottom:5px}
.bolum-alt{color:var(--gri-koyu);font-size:13px;margin-bottom:20px;font-weight:700}

/* ════ DERS KARTLARI ════ */
.ders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:13px;margin-bottom:28px}
.ders-kart{
  background:var(--kart);border-radius:var(--r);
  padding:20px 16px;cursor:pointer;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  border:2px solid var(--sinir);
  border-bottom-width:4px;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  text-decoration:none;color:inherit;
}
.ders-kart:hover{transform:translateY(-4px)}
.ders-kart:active{transform:translateY(1px);border-bottom-width:2px}
.ders-kart-ikon{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;font-size:23px;
}
.ders-kart h4{font-family:'Baloo 2',cursive;font-size:15px;font-weight:800}
.ders-kart p{font-size:12px;color:var(--gri-koyu);font-weight:700;line-height:1.45}

/* Ders varyantları — 4 tonlu sınırlı palet */
.d-amber{border-bottom-color:var(--ana)}.d-amber .ders-kart-ikon{background:#FEF3E0}.d-amber:hover{border-color:var(--ana)}.d-amber h4{color:var(--ana-koyu)}
.d-lacivert{border-bottom-color:var(--lacivert-acik)}.d-lacivert .ders-kart-ikon{background:#E8EFF7}.d-lacivert:hover{border-color:var(--lacivert-acik)}.d-lacivert h4{color:var(--lacivert)}
.d-petrol{border-bottom-color:var(--camgobegi)}.d-petrol .ders-kart-ikon{background:#E0F2F7}.d-petrol:hover{border-color:var(--camgobegi)}.d-petrol h4{color:var(--camgobegi-koyu)}
.d-bakir{border-bottom-color:var(--bakir)}.d-bakir .ders-kart-ikon{background:#FBEEE0}.d-bakir:hover{border-color:var(--bakir)}.d-bakir h4{color:var(--kahve)}

/* ════════════════════════════════════
   ÖZGÜN PETEK YOLU (altıgen düğümler)
════════════════════════════════════ */
.yol-kapsayici{
  max-width:420px;margin:0 auto;
  position:relative;
  padding:10px 0 40px;
}

/* Bölüm şeridi */
.yol-bolum-serit{
  background:var(--lacivert);
  border-radius:var(--r);
  padding:13px 18px;
  margin-bottom:30px;
  display:flex;align-items:center;gap:11px;
  box-shadow:0 3px 0 var(--lacivert-koyu);
}
.yol-bolum-serit .ybs-ikon{font-size:26px}
.yol-bolum-serit .ybs-metin h3{font-family:'Baloo 2',cursive;font-size:16px;font-weight:800;color:#fff}
.yol-bolum-serit .ybs-metin p{font-size:11px;font-weight:800;color:rgba(255,255,255,.75)}

/* Düğüm konteyner — zigzag */
.yol-dugum-wrap{
  display:flex;
  margin-bottom:26px;
  position:relative;
}
.yol-dugum-wrap.poz-orta{justify-content:center}
.yol-dugum-wrap.poz-sol{justify-content:center;transform:translateX(-70px)}
.yol-dugum-wrap.poz-sag{justify-content:center;transform:translateX(70px)}

/* ALTIGEN düğüm — clip-path ile petek biçimi */
.yol-dugum{
  width:80px;height:88px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;cursor:pointer;
  text-decoration:none;
  position:relative;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  border:none;
  background:transparent;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.18));
}
.yol-dugum .petek{
  position:absolute;inset:0;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index:0;
  transition:all .2s;
}
.yol-dugum .petek::after{
  content:'';position:absolute;
  top:4px;left:8px;right:8px;height:36%;
  clip-path:polygon(50% 0%, 100% 40%, 0% 40%);
  background:rgba(255,255,255,.22);
}
.yol-dugum .dugum-ikon{position:relative;z-index:1}
.yol-dugum:hover{transform:scale(1.07)}
.yol-dugum:active{transform:scale(.95) translateY(3px);filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}

/* AÇIK düğüm: amber */
.yol-dugum.acik .petek{background:linear-gradient(160deg,#FBB040,var(--ana) 55%,var(--ana-koyu))}
.yol-dugum.acik{color:#fff}

/* Açık düğüm renk varyantları */
.yol-dugum.acik.n-lacivert .petek{background:linear-gradient(160deg,#3A6291,var(--lacivert-acik) 55%,var(--lacivert))}
.yol-dugum.acik.n-petrol  .petek{background:linear-gradient(160deg,#15A3C7,var(--camgobegi) 55%,var(--camgobegi-koyu))}
.yol-dugum.acik.n-bakir   .petek{background:linear-gradient(160deg,#E08A3C,var(--bakir) 55%,var(--kahve))}

/* TAMAMLANMIŞ düğüm: altın + onay */
.yol-dugum.tamam .petek{background:linear-gradient(160deg,#FFD978,#EAB308 55%,#A16207)}
.yol-dugum.tamam{color:#fff}
.yol-dugum.tamam::after{
  content:'✓';
  position:absolute;bottom:0;right:-2px;
  width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid #EAB308;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#A16207;
  z-index:2;
}

/* KİLİTLİ düğüm */
.yol-dugum.kilitli{cursor:not-allowed;filter:drop-shadow(0 4px 0 rgba(0,0,0,.10))}
.yol-dugum.kilitli .petek{background:linear-gradient(160deg,#EFE9DC,var(--bg2) 55%,var(--sinir))}
.yol-dugum.kilitli{color:var(--gri)}
.yol-dugum.kilitli:hover{transform:none}
.yol-dugum.kilitli::after{
  content:'🔒';
  position:absolute;bottom:0;right:-2px;
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:2px solid var(--sinir2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;z-index:2;
}

/* BAŞLA balonu */
.yol-dugum.acik .basla-balon{
  position:absolute;top:-36px;left:50%;transform:translateX(-50%);
  background:#fff;border:2px solid var(--sinir);
  border-radius:12px;padding:5px 13px;
  font-family:'Baloo 2',cursive;font-size:12px;font-weight:800;
  color:var(--ana-koyu);white-space:nowrap;
  animation:balon-zipla 1.2s ease infinite;
  pointer-events:none;z-index:3;
}
.yol-dugum.acik .basla-balon::after{
  content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:#fff;
  border-right:2px solid var(--sinir);border-bottom:2px solid var(--sinir);
}
@keyframes balon-zipla{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}

/* Düğüm etiketi */
.yol-etiket{
  position:absolute;top:92px;left:50%;transform:translateX(-50%);
  font-family:'Baloo 2',cursive;font-size:12px;font-weight:800;
  color:var(--gri-koyu);text-align:center;
  max-width:130px;white-space:normal;line-height:1.25;
  pointer-events:none;
}

/* Yol izi — eşkenar dörtgen noktalar (petek temasına uygun) */
.yol-iz{
  display:flex;justify-content:center;gap:6px;
  margin:-6px 0 16px;
  position:relative;
}
.yol-iz .iz-nokta{
  width:9px;height:9px;
  background:var(--sinir2);
  transform:rotate(45deg);
  border-radius:2px;
}
.yol-iz.iz-tamam .iz-nokta{background:#EAB308}
.yol-iz.poz-sol{transform:translateX(-35px)}
.yol-iz.poz-sag{transform:translateX(35px)}

/* Bölüm sonu — petek kupası */
.yol-kupa{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:14px 0 30px;
}
.yol-kupa .kupa-ikon{
  width:96px;height:104px;
  display:flex;align-items:center;justify-content:center;
  font-size:42px;position:relative;
  filter:drop-shadow(0 6px 0 rgba(161,98,7,.5));
}
.yol-kupa .kupa-ikon::before{
  content:'';position:absolute;inset:0;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:linear-gradient(160deg,#FFE49A,#F59E0B 50%,#B45309);
  z-index:-1;
}
.yol-kupa .kupa-metin{font-family:'Baloo 2',cursive;font-size:13px;font-weight:800;color:var(--gri-koyu)}

/* ════ FOOTER ════ */
.site-footer{
  background:var(--lacivert);
  text-align:center;padding:20px;margin-top:36px;
}
.site-footer p{font-size:12px;color:rgba(255,255,255,.6);font-weight:700}
.site-footer span{color:var(--ana)}

/* ════ ANİMASYONLAR ════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .4s ease both}
.fade-up:nth-child(2){animation-delay:.05s}
.fade-up:nth-child(3){animation-delay:.1s}
.fade-up:nth-child(4){animation-delay:.15s}
.fade-up:nth-child(5){animation-delay:.2s}
.fade-up:nth-child(6){animation-delay:.25s}
.fade-up:nth-child(7){animation-delay:.3s}
.fade-up:nth-child(8){animation-delay:.35s}

/* ════ RESPONSIVE ════ */
@media (max-width:768px){
  .header-inner{padding:9px 13px}
  .logo-text h1{font-size:17px}
  .icerik{padding:16px 12px 56px}
  .sayfa-baslik{padding:14px 16px;gap:11px}
  .ders-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}
}
@media (max-width:480px){
  .logo-text span{display:none}
  .ders-grid{grid-template-columns:repeat(2,1fr)}
  .header-nav{gap:5px}
  .nav-btn{padding:5px 11px;font-size:12px}
  .yol-dugum-wrap.poz-sol{transform:translateX(-52px)}
  .yol-dugum-wrap.poz-sag{transform:translateX(52px)}
  .yol-dugum{width:70px;height:78px;font-size:26px}
  .yol-etiket{top:82px}
  .yol-iz.poz-sol{transform:translateX(-26px)}
  .yol-iz.poz-sag{transform:translateX(26px)}
}
@media (max-width:360px){
  .yol-dugum-wrap.poz-sol{transform:translateX(-42px)}
  .yol-dugum-wrap.poz-sag{transform:translateX(42px)}
}