/* ============================================
   Ana Sayfa Özel Stil (index.css)
   ============================================ */

/* Hero */
.hero-section{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  background: linear-gradient(135deg,var(--goem-blue-dark) 0%, var(--goem-blue) 55%, var(--goem-blue-light) 100%);
  overflow:hidden;
}
.hero-section::before{
  content:"";
  position:absolute; inset:0;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3ccircle cx='50' cy='50' r='1' fill='rgba(255,255,255,0.11)'/%3e%3c/svg%3e") repeat;
  background-size: 52px 52px;
  animation: heroBg 20s linear infinite;
}
@keyframes heroBg{ from{ background-position:0 0;} to{ background-position:52px 52px;} }

.hero-shapes{ position:absolute; inset:0; pointer-events:none; }
.hero-shape{ position:absolute; opacity:.12; }
.hero-shape-1{ top:10%; left:5%; width:200px; height:200px; background:var(--goem-yellow); border-radius:50%; animation: float 6s ease-in-out infinite; }
.hero-shape-2{ top:60%; right:10%; width:150px; height:150px; background:var(--white); transform: rotate(45deg); animation: float 8s ease-in-out infinite reverse; }
.hero-shape-3{ bottom:10%; left:15%; width:110px; height:110px; border:3px solid var(--goem-yellow); border-radius:50%; animation: spin15 15s linear infinite; }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-26px);} }
@keyframes spin15{ to{ transform: rotate(360deg);} }

.hero-content{ position:relative; z-index:2; padding-top: 110px; }
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(247,181,0,.18);
  border:1px solid var(--goem-yellow);
  color: var(--goem-yellow);
  font-weight:800;
  font-size:.9rem;
  margin-bottom: 22px;
}
.hero-title{
  color: var(--white);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 4.3rem);
  line-height:1.08;
  margin-bottom: 18px;
}
.hero-title span{ color: var(--goem-yellow); }
.hero-subtitle{
  color: rgba(255,255,255,.9);
  font-size: 1.15rem;
  max-width: 560px;
  margin-bottom: 30px;
}
.hero-stats{
  display:flex;
  gap: 34px;
  margin-top: 42px;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero-stat{ text-align:center; }
.hero-stat-number{
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--goem-yellow);
  line-height:1;
}
.hero-stat-label{ color: rgba(255,255,255,.8); font-size: .9rem; }

.hero-visual{ position:relative; z-index:2; padding-top: 110px; }
.hero-carousel{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-xl);
}
.hero-carousel img{ width:100%; height: 420px; object-fit: cover; }
@media (max-width: 991.98px){
  .hero-section{ min-height:auto; padding: 120px 0 70px; }
  .hero-visual{ padding-top: 24px; }
  .hero-carousel img{ height: 320px; }
  .hero-stats{ flex-wrap: wrap; gap: 18px; }
  .hero-stat{ flex: 1 1 45%; }
  .about-image img{ height: auto; }
  .category-card{ padding: 24px 20px; }
  .category-letter{ font-size: 2.6rem; }
  .category-title{ font-size: 1rem; }
  .category-desc{ font-size: .88rem; }
  .category-icon{ width: 46px; height: 46px; font-size: 1.1rem; }
}
@media (max-width: 575.98px){
  .hero-section{ padding: 100px 0 50px; }
  .hero-title{ font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .hero-subtitle{ font-size: 1rem; }
  .hero-carousel img{ height: 220px; }
  .hero-stat-number{ font-size: 1.8rem; }
  .hero-stats{ gap: 12px; }
  .about-image img{ height: auto; }
  .about-badge{ padding: 10px 12px; }
  .about-badge .n{ font-size: 1.5rem; }
  .about-badge .t{ font-size: .75rem; }
  .about-feature .ic{ width: 40px; height: 40px; font-size: 1rem; flex-shrink: 0; }
  .about-feature h6{ font-size: .92rem; }
  .about-feature p{ font-size: .85rem; }
  .category-card{ padding: 20px 16px; }
  .category-letter{ font-size: 2.2rem; }
  .category-title{ font-size: .95rem; }
  .category-desc{ font-size: .84rem; }
  .category-icon{ width: 42px; height: 42px; font-size: 1rem; margin-top: 12px; }
  .modules-grid{ grid-template-columns: 1fr; }
  .module-card{ padding: 20px 16px; }
  .module-icon{ width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: 12px; }
  .module-title{ font-size: .95rem; }
  .module-desc{ font-size: .85rem; }
  .feature-card{ padding: 22px 18px; }
  .feature-ic{ width: 60px; height: 60px; font-size: 1.6rem; }
  .feature-card h5{ font-size: 1rem; }
  .feature-card p{ font-size: .88rem; }
  .stakeholder-card{ padding: 24px 20px; }
  .stakeholder-ic{ width: 68px; height: 68px; font-size: 1.8rem; }
  .stakeholder-card li{ font-size: .88rem; padding: 8px 0 8px 26px; }
}

/* About */
.about-image{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.about-image img{ width:100%; height: auto; object-fit: cover; }
.about-badge{
  position:absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(13,71,161,.92);
  color: var(--white);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.about-badge .n{ font-family: var(--font-primary); color: var(--goem-yellow); font-size: 2rem; font-weight: 900; line-height:1; }
.about-badge .t{ font-weight: 800; font-size:.85rem; }

.about-feature{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  margin-top: 16px;
}
.about-feature .ic{
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg,var(--goem-yellow),var(--goem-yellow-dark));
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--gray-900);
  font-size: 1.2rem;
}
.about-feature h6{ margin:0 0 4px 0; font-weight: 900; }
.about-feature p{ margin:0; color: var(--gray-600); }

/* Categories */
.categories-section{ background: linear-gradient(180deg,var(--gray-50) 0%, var(--white) 100%); }
.category-card{
  position:relative;
  height:100%;
  padding: 34px 28px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow:hidden;
  transition: var(--transition-normal);
}
.category-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 5px;
  background: currentColor;
}
.category-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(0,0,0,.03); }
.category-letter{ font-family: var(--font-primary); font-weight: 900; font-size: 3.6rem; opacity:.9; margin-bottom: 10px; line-height:1; }
.category-title{ font-size: 1.15rem; font-weight: 900; margin-bottom: 10px; }
.category-desc{ color: var(--gray-600); font-size: .95rem; margin:0; }
.category-icon{
  margin-top: 18px;
  width: 58px; height: 58px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: currentColor;
  color: var(--white);
  font-size: 1.35rem;
}
.cat-green{ color: var(--cat-green); background: linear-gradient(180deg, rgba(76,175,80,.10) 0%, var(--white) 100%); }
.cat-orange{ color: var(--cat-orange); background: linear-gradient(180deg, rgba(255,152,0,.10) 0%, var(--white) 100%); }
.cat-purple{ color: var(--cat-purple); background: linear-gradient(180deg, rgba(156,39,176,.10) 0%, var(--white) 100%); }
.cat-blue{ color: var(--goem-blue); background: linear-gradient(180deg, rgba(21,101,192,.10) 0%, var(--white) 100%); }

/* Modules preview */
.modules-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.module-card{
  position:relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  padding: 26px 22px;
  overflow:hidden;
  transition: var(--transition-normal);
}
.module-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(247,181,0,.6); }
.module-card::before{
  content:"";
  position:absolute; left:0; top:0;
  width:4px; height:100%;
  background: var(--goem-yellow);
  transform: scaleY(0);
  transform-origin: top;
  transition: var(--transition-normal);
}
.module-card:hover::before{ transform: scaleY(1); }
.module-number{
  position:absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--gray-100);
  color: var(--gray-600);
  font-weight: 900;
  font-size: .85rem;
}
.module-icon{
  width: 54px; height: 54px;
  border-radius: var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.45rem;
  margin-bottom: 16px;
}
.module-icon.yellow{ background: rgba(247,181,0,.16); color: var(--goem-yellow-dark); }
.module-icon.blue{ background: rgba(21,101,192,.16); color: var(--goem-blue); }
.module-icon.green{ background: rgba(76,175,80,.16); color: var(--cat-green); }
.module-icon.orange{ background: rgba(255,152,0,.16); color: var(--cat-orange); }
.module-icon.purple{ background: rgba(156,39,176,.16); color: var(--cat-purple); }
.module-icon.red{ background: rgba(244,67,54,.16); color: var(--cat-red); }

.module-title{ font-weight: 900; font-size: 1.05rem; margin-bottom: 8px; }
.module-desc{ color: var(--gray-600); font-size: .92rem; margin:0; }

/* Dark Feature strip */
.features-strip{
  background: linear-gradient(135deg,var(--goem-blue-dark) 0%, var(--goem-blue) 100%);
  color: var(--white);
  position:relative;
  overflow:hidden;
}
.features-strip::before{
  content:"";
  position:absolute; top:-40%; right:-20%;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: var(--goem-yellow);
  opacity: .06;
}
.features-strip .section-title h2,
.features-strip .section-title p{ color: var(--white); }
.features-strip .section-title h2::after{ background: var(--goem-yellow); }

.feature-card{
  height:100%;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  text-align:center;
  transition: var(--transition-normal);
}
.feature-card:hover{ transform: translateY(-8px); background: rgba(255,255,255,.14); }
.feature-ic{
  width: 78px; height: 78px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--goem-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--gray-900);
  font-size: 2rem;
}
.feature-card h5{ color: var(--white); margin-bottom: 10px; font-weight: 900; }
.feature-card p{ color: rgba(255,255,255,.85); margin:0; }

/* Stakeholders */
.stakeholder-card{
  height:100%;
  padding: 34px 28px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
  overflow:hidden;
}
.stakeholder-card:hover{ transform: translateY(-8px); }
.stakeholder-ic{
  width: 86px; height: 86px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 18px;
  color: var(--white);
  font-size: 2.2rem;
}
.stakeholder-card.student .stakeholder-ic{ background: linear-gradient(135deg,#2196F3,#1976D2); }
.stakeholder-card.teacher .stakeholder-ic{ background: linear-gradient(135deg,#9C27B0,#7B1FA2); }
.stakeholder-card.parent .stakeholder-ic{ background: linear-gradient(135deg,#FF9800,#F57C00); }
.stakeholder-card.institution .stakeholder-ic{ background: linear-gradient(135deg,#4CAF50,#388E3C); }
.stakeholder-card h5{ text-align:center; font-weight: 900; margin-bottom: 14px; }
.stakeholder-card ul{ padding-left: 0; margin:0; }
.stakeholder-card li{
  list-style:none;
  position:relative;
  padding: 10px 0 10px 30px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  font-size: .95rem;
}
.stakeholder-card li:last-child{ border-bottom:none; }
.stakeholder-card li::before{
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position:absolute;
  left:0;
  color: var(--goem-yellow);
}

/* CTA */
.cta{
  background: linear-gradient(135deg,var(--gray-900) 0%, #1a1a2e 100%);
  color: var(--white);
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  top:-100px; right:-100px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--goem-yellow);
  opacity:.12;
}
.cta::after{
  content:"";
  position:absolute;
  bottom:-140px; left:-140px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: var(--goem-blue);
  opacity:.12;
}
.cta .wrap{ position:relative; z-index:2; text-align:center; }
.cta h2{ color: var(--white); margin-bottom: 12px; font-weight: 900; }
.cta h2 span{ color: var(--goem-yellow); }
.cta p{ color: rgba(255,255,255,.85); max-width: 720px; margin: 0 auto 22px; font-size: 1.05rem; }