/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: #1a1410;
  color: #f5f2eb;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

/* Ana konteyner */
.ana-sayfa {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

/* Başlık */
.as-header { text-align: center; }
.as-okul {
  font-family: 'Noto Serif TR', serif;
  font-size: 28px;
  font-weight: 700;
  color: #f5f2eb;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.as-alt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #5a4a38;
}

/* Kartlar */
.as-kartlar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
}

.as-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 28px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  gap: 12px;
}
.as-kart:hover {
  transform: translateY(-6px);
  text-decoration: none;
}
.as-kart:active { transform: translateY(-2px); }

/* Haftalık kart — koyu mavi */
.as-kart--haftalik {
  background: linear-gradient(145deg, #1e3a6a, #162d52);
  border-color: #2a4a8a;
  box-shadow: 0 4px 24px rgba(42,74,127,.4);
}
.as-kart--haftalik:hover {
  box-shadow: 0 12px 40px rgba(42,74,127,.6);
}

/* Yıllık kart — koyu kahve/toprak */
.as-kart--yillik {
  background: linear-gradient(145deg, #2a1e0e, #1e1508);
  border-color: #5a4028;
  box-shadow: 0 4px 24px rgba(90,64,40,.3);
}
.as-kart--yillik:hover {
  box-shadow: 0 12px 40px rgba(90,64,40,.5);
}

.as-kart-ikon { font-size: 42px; line-height: 1; }

.as-kart-baslik {
  font-family: 'Noto Serif TR', serif;
  font-size: 20px;
  font-weight: 700;
  color: #f5f2eb;
  line-height: 1.2;
}

.as-kart-aciklama {
  font-size: 12px;
  color: #a09080;
  line-height: 1.6;
  flex: 1;
}

.as-kart-ok {
  font-size: 20px;
  color: #7090b0;
  font-weight: 700;
  margin-top: 4px;
  transition: transform .2s;
}
.as-kart--haftalik:hover .as-kart-ok { transform: translateX(6px); color: #90b8e0; }
.as-kart--yillik:hover .as-kart-ok { transform: translateX(6px); color: #c0a060; }

/* Mobil */
@media (max-width: 500px) {
  .as-okul { font-size: 22px; }
  .as-kartlar { grid-template-columns: 1fr; gap: 14px; }
  .as-kart { padding: 28px 20px 22px; flex-direction: row; text-align: left; gap: 16px; border-radius: 12px; }
  .as-kart-ikon { font-size: 32px; flex-shrink: 0; }
  .as-kart-baslik { font-size: 17px; }
  .as-kart-aciklama { font-size: 11px; }
  .as-kart-ok { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
  .as-kart--haftalik:hover .as-kart-ok,
  .as-kart--yillik:hover .as-kart-ok { transform: translateY(-50%) translateX(4px); }
}