/* Tablet ve Küçük Laptop İçin (1024px - 1399px) */
@media screen and (max-width: 1399px) {
    
    /* Navbar */
    .navbar {
        padding: 10px 15px;
    }
    
    /* Hero */
    .hero h1 {
        font-size: 42px;
        margin-top: -180px;
    }
    .hero p {
        font-size: 24px;
    }

    /* Hakkinda Bölümü */
    .hakkinda-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hakkinda-text {
        width: 80%;
        padding: 30px;
    }
    .hakkinda-image {
        width: 80%;
    }

    /* Galeri */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Genel Responsive */
    body {
        font-size: 16px;
    }

    /* References Section */
    .references {
        padding: 40px 0;
        margin-bottom: 1px;
    }

    .references h2 {
        font-size: 26px;
        margin-bottom: 25px;
    }

    .references-grid {
        grid-template-columns: repeat(5, 1fr); /* 5 sütunlu grid */
        gap: 18px;
    }

    .reference-item {
        padding: 18px;
    }

    .reference-item img {
        max-width: 75px;
        max-height: 75px;
    }
    /*Footer Alanı*/
    .footer-container {
        max-width: 100%;
        padding: 0 20px;
    }
    .footer-logo img {
        height: 45px;
    }
    .footer-info {
        font-size: 14px;
    }
    .footer-social a {
        font-size: 18px;
    }
    /*Copyright Section*/
    .copyright {
        background-color: #eaf4fc; /* Footer ile uyumlu açık mavi */
        color: #1d3557; /* Koyu mavi */
        text-align: center;
        padding: 12px 5px;
        font-size: 13px; /* Küçük ekranlar için biraz küçültüldü */
        font-family: 'Inter', sans-serif;
        font-weight: 500;
    }

    /* Bağlantılar */
    .copyright a {
        color: #1d3557;
        text-decoration: underline;
        font-weight: 600;
    }

    /* Hover efekti */
    .copyright a:hover {
        color: #379ed8; /* Açık mavi */
    }
        /* ================================
       COURSE DETAIL (Tablet / Small Laptop)
       max-width: 1399px
    ================================= */

    .course-hero{
        padding: 42px 0 28px;
    }

    .course-hero-grid{
        grid-template-columns: 1fr; /* tek kolon */
        gap: 18px;
    }

    .course-preview img{
        height: 600px;
    }

    .course-main{
        padding: 24px 0 56px;
    }

    .course-main-grid{
        grid-template-columns: 1fr; /* tek kolon */
        gap: 18px;
    }

    .buy{
        position: static; /* sticky kapat */
        top: auto;
    }

    .info-grid{
        grid-template-columns: 1fr 1fr; /* tablet'te 2 kolon kalabilir */
    }

    /* Mobil/Tablet: Buy box üste gelsin */
.course-main-grid{
  display: grid;
  grid-template-columns: 1fr;
}

.course-main-grid > div{  /* LEFT */
  order: 2;
}

.course-main-grid > aside.buy{ /* RIGHT (buy) */
  order: 1;
  margin-bottom: 14px; /* buy ile içerik arası boşluk */
}

/* ================================
   MOBILE / TABLET – CARD DETAIL BUTTON
================================ */

.course-card{
  position: relative;
}

.card-detail-btn{
  margin: 10px 12px 14px;
  width: calc(100% - 24px);
  height: 42px;
  border-radius: 999px;
  border: 2px solid #2b4df0;
  background: #fff;
  color: #2b4df0;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

}