<div class="ogrenci-takip-wrap">
  <table class="ogrenci-takip">
    <thead>
      <tr>
        <th class="ay-hucre" rowspan="2">2026<br>MAYIS</th>
        <th class="hafta-baslik" colspan="4">1. HAFTA</th>
        <th class="hafta-baslik" colspan="4">2. HAFTA</th>
      </tr>
      <tr>
        <th>4 PZT</th>
        <th>5 SALI</th>
        <th>6 ÇRŞ</th>
        <th>7 PRŞ</th>
        <th>11 PZT</th>
        <th>12 SALI</th>
        <th>13 ÇRŞ</th>
        <th>14 PRŞ</th>
      </tr>
      <tr>
        <th class="sure-ayet">Sure ve Ayet</th>
        <th></th><th></th><th></th><th></th>
        <th></th><th></th><th></th><th></th>
      </tr>
    </thead>
    <tbody>
      <!-- 17 boş öğrenci satırı -->
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
      <tr><td class="ogr-hucre"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
  <p class="ogrenci-takip-ipucu">📱 Mobilde yatay olarak kaydırabilirsiniz</p>
</div>

<style>
.ogrenci-takip-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  font-family: Arial, Helvetica, sans-serif;
}
.ogrenci-takip {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
}
.ogrenci-takip th,
.ogrenci-takip td {
  border: 1.5px solid #000;
  padding: 10px 6px;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
  height: 36px;
}
.ogrenci-takip thead th {
  background: #fff;
  color: #000;
  font-weight: 700;
}
.ogrenci-takip .ay-hucre {
  font-size: 16px;
  line-height: 1.3;
  width: 110px;
}
.ogrenci-takip .hafta-baslik {
  color: #e53935;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.ogrenci-takip .sure-ayet {
  font-weight: 600;
  font-size: 13px;
}
.ogrenci-takip .ogr-hucre {
  min-height: 36px;
}
.ogrenci-takip tbody tr:hover {
  background: #f8f9fa;
}
.ogrenci-takip-ipucu {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 8px;
  font-style: italic;
}

/* Mobil */
@media (max-width: 768px) {
  .ogrenci-takip th,
  .ogrenci-takip td {
    font-size: 12px;
    padding: 8px 4px;
  }
  .ogrenci-takip .ay-hucre,
  .ogrenci-takip .hafta-baslik {
    font-size: 13px;
  }
}
@media (min-width: 900px) {
  .ogrenci-takip-ipucu { display: none; }
}
</style>