/* =====================================================
   HOME PAGE – GOD LEVEL CSS
   Depends on: global style.css
   ===================================================== */

.home-page section{
  padding:90px 0;
}

/* ================= HERO ================= */

.home-page .banner-text h1{
  font-size:3rem;
  font-weight:900;
}

.home-page .banner-text p{
  font-size:1.1rem;
  max-width:520px;
}

.hero-cta{
  margin-top:24px;
}

/* ================= COUNTERS ================= */

.counter-section{
  background:#f8fafc;
}

.counters-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

.counter-card{
  background:#fff;
  border-radius:22px;
  padding:30px 20px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:.35s ease;
}

.counter-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}

.counter-card h3{
  font-size:2.6rem;
  font-weight:900;
  color:var(--primary);
}

.counter-card p{
  margin-top:6px;
  font-weight:600;
  color:var(--text-muted);
}

@media(max-width:900px){
  .counters-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:500px){
  .counters-grid{ grid-template-columns:1fr; }
}

/* ================= ABOUT ================= */

.about-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px;
  align-items:center;
}

.about-image img{
  border-radius:26px;
  box-shadow:var(--shadow-lg);
}

.about-content h2{
  font-size:2.3rem;
  font-weight:800;
  margin-bottom:16px;
}

.about-content p{
  line-height:1.75;
  color:var(--text-muted);
}

.about-points{
  margin-top:18px;
}

.about-points li{
  margin-bottom:10px;
  font-weight:600;
}

.about-points i{
  color:var(--primary);
  margin-right:8px;
}

@media(max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ================= WHY SYE ================= */

.why-sye{
  background:#fff;
  text-align:center;
}

.why-sye h2{
  font-size:2.3rem;
  font-weight:800;
  margin-bottom:60px;
}

.why-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:26px;
}

.why-card{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:.35s ease;
}

.why-card img{
  width:100%;
  height:170px;
  object-fit:cover;
}

.why-text{
  padding:18px;
}

.why-text h4{
  font-weight:700;
}

.why-text p{
  font-size:.9rem;
  color:var(--text-muted);
}

.why-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
}

@media(max-width:1100px){
  .why-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:700px){
  .why-grid{ grid-template-columns:1fr; }
}

/* ================= EXPLORE OPTIONS ================= */
/* ===============================
   EXPLORE YOUR OPTIONS – PREMIUM
================================ */

.popular-courses{
  padding:90px 0;
}

.popular-courses h2{
  text-align:center;
  font-size:36px;
  font-weight:900;
  margin-bottom:60px;
  color:var(--text-dark);
}

/* GRID */
.course-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

/* CARD */
.course-card{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  display:block;
  background:#000;
  box-shadow:var(--shadow-sm);
  transition:transform .45s cubic-bezier(.4,0,.2,1),
             box-shadow .45s cubic-bezier(.4,0,.2,1);
}

/* IMAGE */
.course-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}

/* DARK OVERLAY */
.course-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.15),
    rgba(0,0,0,0)
  );
  opacity:.9;
  transition:.4s ease;
  z-index:1;
}

/* TITLE */
.course-card span{
  position:absolute;
  left:22px;
  bottom:20px;
  z-index:2;
  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:.3px;
}

/* HOVER EFFECT */
.course-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
}

.course-card:hover img{
  transform:scale(1.08);
}

.course-card:hover::before{
  opacity:1;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){
  .course-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:520px){
  .course-grid{
    grid-template-columns:1fr;
  }

  .course-card img{
    height:200px;
  }
}

/* ================= PROCESS ================= */

.process{
  background:#fff;
  text-align:center;
  padding:90px 0;
}

.process h2{
  text-align:center;
  margin-bottom:60px;
  font-size:36px;
  font-weight:900;
  color:var(--text-dark);
}

/* GRID */
.process-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}

/* CARD */
.process-card{
  background:#ffffff;
  padding:46px 32px 38px;
  border-radius:26px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:.4s cubic-bezier(.4,0,.2,1);
}

/* HOVER */
.process-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
}

/* IMAGE FIX (MAIN ISSUE SOLVED HERE) */
.process-card img{
  width:64px;
  height:64px;
  object-fit:contain;
  margin:0 auto 24px;
  display:block;

  background:#ffffff;
  padding:12px;
  border-radius:18px;

  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.7);

  transition:transform .35s ease;
}

/* ICON ANIMATION */
.process-card:hover img{
  transform:scale(1.12);
}

/* TITLE */
.process-card h4{
  font-size:18px;
  font-weight:800;
  margin-bottom:8px;
  color:var(--text-dark);
}

/* DESCRIPTION */
.process-card p{
  font-size:15px;
  color:var(--text-muted);
  line-height:1.5;
}

/* STEP NUMBER (BACKGROUND STYLE) */
.process-card::after{
  content:attr(data-step);
  position:absolute;
  top:18px;
  right:22px;
  font-size:44px;
  font-weight:900;
  color:rgba(0,0,0,.04);
  pointer-events:none;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){
  .process-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:500px){
  .process-grid{
    grid-template-columns:1fr;
  }
}

/* ================= CTA ================= */

.highlights{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  text-align:center;
}

.highlights h2{
  font-size:2.2rem;
  font-weight:800;
}

.highlights p{
  margin:12px 0 22px;
  font-size:1.05rem;
}

.highlights .btn-primary{
  background:#fff;
  color:var(--primary);
}

/* ================= TESTIMONIALS ================= */