/* ============================================================
   FENOMEN MİNİK — KEÇE/PELUŞ TEMA (Adobe XD "fenomen minik.xd")
   fm.css'ten SONRA yüklenir; token ve bileşen override'ları içerir.
   Kaynak tasarım dili: keçe/peluş doku, gök mavisi + çimen sahne,
   turuncu (#FB922D) ana vurgu, koyu lacivert kontur.
   Fontlar: KGRedHands/GROBOLD yerine geçici Google Fonts
   (Baloo 2 + Fredoka). Asıl font dosyaları gelince @font-face
   ile değiştirilecek.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Fredoka:wght@400;500;600;700&display=swap');

/* ---------- 1. TASARIM TOKENLARI (XD paleti) ---------- */
:root {
  /* zemin tonları */
  --sky-1:        #EAF6FF;   /* açık gök */
  --sky-2:        #D7EEFC;   /* gök mavisi panel */
  --sky-3:        #A2DCFA;   /* doygun gök */
  --sky-4:        #FFE4F1;   /* pembe tint */
  --sky-5:        #E9F7DF;   /* çimen tint */

  /* vurgu renkleri */
  --sun:          #FFCD0F;
  --sun-d:        #EDB400;
  --bubble:       #E0007A;
  --bubble-d:     #B80065;
  --sky-blue:     #36B4F5;
  --sky-blue-d:   #1C75BC;
  --grape:        #9C6BFF;
  --grape-d:      #7B4CD6;
  --grass:        #76BE46;
  --grass-d:      #078849;
  --tangerine:    #FB922D;   /* ana marka vurgusu */
  --tangerine-d:  #E0761A;
  --berry:        #FF5B35;

  /* kontur — keçe laciverti */
  --ink:          #14213D;
  --ink-soft:     #33415E;
  --ink-mute:     #6C7A93;

  /* tipografi */
  --f-display:    'Baloo 2', 'TemelYazi', sans-serif;
  --f-hand:       'Fredoka', 'TemelYazi', sans-serif;
  --f-body:       'Fredoka', 'TemelYazi', sans-serif;

  /* gölgeler — keçe laciverti üzerinden */
  --sh-1: 0 4px 0 rgba(20, 33, 61, .08);
  --sh-2: 0 10px 0 rgba(20, 33, 61, .12);
  --sh-3: 0 16px 0 rgba(20, 33, 61, .15);
  --sh-glow: 0 20px 40px -10px rgba(251, 146, 45, .35);
}

body {
  background: var(--sky-1);
  font-weight: 500;
}

/* fm.css evrensel 'TemelYazi !important' kuralının üstünü ört.
   (.bx ikon kuralı sınıf seçicili olduğu için etkilenmez) */
*, *::before, *::after {
  font-family: var(--f-body) !important;
  text-transform: none;
}
h1, h2, h3, h4, h5, h6,
.fm-h2, .fm-hero__title,
.fm-agecard__age, .fm-matcard h3,
.fm-nav__link, .fm-btn, .fm-sticker {
  font-family: var(--f-display) !important;
}
/* bölüm başlıkları ve etiketler XD'deki gibi büyük harf kalsın */
.fm-h2, .fm-sticker { text-transform: uppercase; }

/* ---------- 2. NAVBAR — beyaz bar + turuncu/mavi üst şerit ---------- */
.fm-nav {
  background: #fff;
  padding: 0 0 8px;
  box-shadow: 0 4px 24px rgba(20, 33, 61, .10);
}
/* üst ince şerit: sol turuncu, sağ mavi (XD üst bandı) */
.fm-nav::before {
  content: '';
  display: block;
  height: 10px;
  background: linear-gradient(90deg,
    var(--tangerine) 0%, var(--tangerine) 55%,
    var(--sky-blue-d) 55%, var(--sky-blue-d) 72%,
    var(--grass) 72%, var(--grass) 100%);
  margin-bottom: 8px;
}

/* logo: pembe konturlu, aşağı sarkan flama kartı */
.fm-nav__brand {
  background: #fff;
  border: 3px solid var(--bubble);
  border-top: none;
  border-radius: 0 0 26px 26px;
  padding: 10px 18px 14px;
  margin-top: -18px;            /* şeridin altından sarksın */
  box-shadow: 0 8px 18px rgba(20, 33, 61, .12);
}

/* menü: turuncu hap yerine düz beyaz sekmeler */
.fm-nav__menu {
  background: #fff;
  border: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
  gap: 0;
}
.fm-nav__item + .fm-nav__item { border-left: 2px solid #E4EEF6; }
.fm-nav__link {
  color: #5B6B7C;
  text-transform: none;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 12px 16px;
  border-radius: 12px !important;
  white-space: nowrap;
}
.fm-nav__link:hover,
.fm-nav__item:hover > .fm-nav__link {
  background: #FFF3E6;
  color: var(--tangerine);
}
.fm-nav__link.is-active {
  background: transparent;
  color: var(--tangerine);
  box-shadow: none !important;
}

/* SATIN AL — mavi kutu (kumbara hissi) */
.fm-nav__item:last-child { border-left: none; margin-left: 12px; }
.fm-nav__item:last-child .fm-nav__link {
  background: #0059FF;
  color: #fff;
  border-radius: 14px !important;
  padding: 12px 22px;
  box-shadow: 0 4px 0 var(--sky-blue-d);
}
.fm-nav__item:last-child .fm-nav__link:hover {
  background: var(--sky-blue-d);
  color: #fff;
}

/* dropdown çizgisi temaya uysun */
.fm-nav__dropdown {
  border-color: var(--sky-3);
  box-shadow: 0 14px 30px rgba(20, 33, 61, .16) !important;
}
.fm-nav__dropdown a:hover { background: var(--sky-2); }

/* ---------- 3. HERO — gök + çimen sahnesi ---------- */
.fm-hero,
.fm-hero--full {
  background:
    url('../img/kece/cimen-tepeler.png') bottom center / 100% min(240px, 24vw) no-repeat,
    linear-gradient(180deg, #8FC9EF 0%, #B4DDF8 55%, #D7EEFC 100%);
  position: relative;
}
/* süzülen Kurmay balonu */
.fm-hero--full::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 5%;
  width: clamp(90px, 9vw, 150px);
  aspect-ratio: 2/3;
  background: url('../img/kece/kurmay-balon.png?v=2') center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
  animation: kece-balon 7s ease-in-out infinite;
}
@keyframes kece-balon {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-22px) rotate(2deg); }
}

/* ---------- 4. BÖLÜM DEKORLARI (peluş karakterler) ---------- */
/* Yayınlar: ipiyle uçurtma tutan zürafa sağda */
#tourYayinlar { overflow: visible; }
#tourYayinlar .fm-shead {
  position: relative;
}
#tourYayinlar .fm-shead::after {
  content: '';
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  top: -30px;
  width: clamp(120px, 12vw, 190px);
  aspect-ratio: 2/3;
  background: url('../img/kece/zurafa-ucurtma.png') center / contain no-repeat;
  pointer-events: none;
}
/* Materyaller: evrak tutan öğretmen solda */
#tourMateryaller .fm-shead {
  position: relative;
}
#tourMateryaller .fm-shead::before {
  content: '';
  position: absolute;
  left: clamp(-40px, -2vw, 0px);
  top: -24px;
  width: clamp(110px, 10vw, 170px);
  aspect-ratio: 2/3;
  background: url('../img/kece/ogretmen-evraklar.png') center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 1100px) {
  #tourYayinlar .fm-shead::after,
  #tourMateryaller .fm-shead::before { display: none; }
}

/* ---------- 5. DİJİTAL CTA — yeşil teknoloji dokusu ---------- */
.fm-cta-block.is-purple {
  background: url('../img/kece/fon-yesil-teknoloji.png') center / cover no-repeat;
  border: 6px solid #fff;
  box-shadow: 0 18px 40px rgba(20, 33, 61, .22);
}
.fm-cta-block.is-purple h2 em { color: var(--sun); }

/* becerikli.ai bandı — turuncu uzay dokusu (robot temasına uygun) */
.idx-bgh-create {
  background: url('../img/kece/fon-turuncu-uzay.png') center / cover no-repeat !important;
  border: 6px solid #fff !important;
  box-shadow: 0 18px 40px rgba(20, 33, 61, .22) !important;
}

/* yaş/koleksiyon ve materyal kartlarının 'yazı tahtası' fonu → gök paneli */
.fm-agecard-wrap,
.fm-matcards {
  background: var(--sky-2);
  border: none;
  border-radius: 32px;
  box-shadow: 0 14px 34px rgba(20, 33, 61, .12);
}

/* ---------- 6. GENEL DOKUNUŞLAR ---------- */
::selection { background: var(--tangerine); color: #fff; }

/* bölüm arka plan ritmi: gök – beyaz – gök */
.fm-section { background: transparent; }

/* kart köşeleri biraz daha yumuşak (keçe hissi) */
.fm-agecard,
.fm-matcard,
.fm-panel { border-radius: 28px; }

/* buton ana rengi: turuncu öne çıksın */
.fm-btn--yellow { background: var(--sun); color: var(--ink); }
.fm-btn--pink   { background: var(--tangerine); color: #fff; }